D3 Examples - d3-summary-tiles

xxxxxxxxxx
 
<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>
​
    <style>
        #target {
            font-family: "Lato", sans-serif;
            margin-top: 2%;
        }
​
        svg text {
          font-family: "Lato", sans-serif;
        }
    </style>
​
    <body>
        <div id="target"></div>
        <script type="text/javascript">
​
            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>
    