d3-summary-tiles | Correlations

<html>

<head>
        <title>Summary Tiles Example</title>
        <link href='https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script type="text/javascript" src="https://d3js.org/d3-selection.v1.min.js"></script>
        <script src="https://unpkg.com/d3-summary-tiles/build/d3-summary-tiles.min.js"></script>
    </head>

svg text {
          font-family: "Lato", sans-serif;
        }
    </style>

let summaryTileChart = d3.summaryTiles();

axios.get("network_correlations.json").then(res => {
            
                summaryTileChart
                    .data(res.data)
                    .x("nnh_1")
                    .y("nnh_2")
                    .fill("cor")
                    .fillDomain([-1, 1])
                    .tileWidth(10)
                    .tileHeight(9)
                    .colorScheme("RdBu")
                    .reverseColorScale()
                    .title("Brain Network Correlations")
                    .legendTitle("Correlation")
                    .verticalLegend()
                    .xLabel("")
                    .yLabel("")
                    .numberFormat(".02f")
                    .tickLabelSize(8)
                    .rotateXTicks()
                    .pairwiseJoinText(" vs. ")
                    .noNullTooltips()
                    .tooltipWidth(140);
                
                d3.select("#target")
                    .call(summaryTileChart);
            
            });

</script>
    </body>

</html>

https://unpkg.com/axios/dist/axios.min.js

https://d3js.org/d3-selection.v1.min.js

https://unpkg.com/d3-summary-tiles/build/d3-summary-tiles.min.js