d3-summary-tiles | Volcano

<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>

const summaryTileChart = d3.summaryTiles();

axios.get("volcano.json").then(res => {
                
                summaryTileChart
                   .data(res.data)
                   .x("x")
                   .y("y")
                   .fill("value")
                   .tileWidth(9)
                   .tileHeight(9)
                   .colorScheme("Spectral")
                   .reverseColorScale()
                   .noTooltip()
                   .flipYAxis()
                   .noXTicks()
                   .noYTicks()
                   .title("R's Volcano Dataset")
                   .legendTitle("Elevation")
                   .horizontalPadding(5)
                   .xLabel("")
                   .yLabel("");

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