Hnet d3heatmap

Survived_0Survived_1Pclass_1Pclass_2Pclass_3Sex_femaleSex_maleSibSp_0SibSp_1SibSp_3SibSp_4Parch_0Parch_1Parch_2Cabin_nanEmbarked_CEmbarked_QEmbarked_SSibSp_5SibSp_8Ticket_19950Ticket_3101295Ticket_347082Ticket_347088Ticket_349909Ticket_382652Ticket_4133Ticket_CA 2144Ticket_CA. 2343Fare_low_10.5Cabin_C23 C25 C27Cabin_G6Ticket_347077Fare_low_26Age_low_37Fare_low_60.3Age_low_24Fare_low_8.1Fare_low_23Fare_low_9.5Age_low_30Age_low_6.5Age_low_16.5Fare_low_32.9Age_low_26Fare_low_29.7Fare_low_7.8Survived_0Survived_1Pclass_1Pclass_2Pclass_3Sex_femaleSex_maleSibSp_0SibSp_1SibSp_3SibSp_4Parch_0Parch_1Parch_2Cabin_nanEmbarked_CEmbarked_QEmbarked_SSibSp_5SibSp_8Ticket_19950Ticket_3101295Ticket_347082Ticket_347088Ticket_349909Ticket_382652Ticket_4133Ticket_CA 2144Ticket_CA. 2343Fare_low_10.5Cabin_C23 C25 C27Cabin_G6Ticket_347077Fare_low_26Age_low_37Fare_low_60.3Age_low_24Fare_low_8.1Fare_low_23Fare_low_9.5Age_low_30Age_low_6.5Age_low_16.5Fare_low_32.9Age_low_26Fare_low_29.7Fare_low_7.8

This heatmap is created in d3js using https://github.com/erdogant/d3heatmap. A network can be represented by an adjacency matrix, where each cell ij represents an edge from vertex i to vertex j. Given this two-dimensional representation of a graph, a natural visualization is to show the matrix! However, the effectiveness of a matrix diagram is heavily dependent on the order of rows and columns: if related nodes are placed closed to each other, it is easier to identify clusters and bridges. While path-following is harder in a matrix view than in a node-link diagram, matrices have other advantages. As networks get large and highly connected, node-link diagrams often devolve into giant hairballs of line crossings. Line crossings are impossible with matrix views. Matrix cells can also be encoded to show additional data; here color depicts clusters computed by a community-detection algorithm.