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 {
            width: 1200px;
            display: block;
            margin-top: 5%;
            margin-left: auto;
            margin-right: auto;
            font-family: "Lato", sans-serif;
        }
​
        svg text {
          font-family: "Lato", sans-serif;
        }
    </style>
​
    <body>
        <div id="target"></div>
        <script type="text/javascript">
​
            let summaryTileChart = d3.summaryTiles();
​
            axios.get("orlando_narcotics_offenses.json").then(res => {
                
                summaryTileChart
                    .data(res.data)
                    .x("hr")
                    .y("dow")
                    .fill("count")
                    .tileWidth(40)
                    .tileHeight(35)
                    .onClick(d => console.log(d))
                    .colorScheme("RdYlBu")
                    .reverseColorScale()
                    .title("Narcotics Criminal Offenses in Orlando, FL (2009-2015)")
                    .legendTitle("Number of Offenses")
                    .xLabel("Hour of Day")
                    .yLabel("Day of Week");
​
                    d3.select("#target")
                        .call(summaryTileChart);
​
            });
​
        </script>
    </body>
​
</html>
​
    