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;
        }
        
        #select-container {
            position: fixed;
            display: flex;
            justify-content: center;
            margin-top: 10px;
            margin-left: 115px;
        }
​
        svg text {
          font-family: "Lato", sans-serif;
        }
    </style>
​
    <body>
        <div id="target"></div>
        <script type="text/javascript">
​
            // initialize
            let summaryTileChart = d3.summaryTiles();
​
            axios.get("orlando_crime.json").then(res => drawChart(res));
​
            function drawChart(res) {
​
                // create a dropdown for offense categories
                const offenses = Object.keys(res.data);
​
                const offensePicker = d3.select("#target")
                    .append("div")
                    .attr("id", "select-container")
                    .append("select");
​
                offensePicker.selectAll("option")
                    .data(offenses)
                    .enter()
                    .append("option")
                    .text(d => d);
​
                let selectedOffense = d3.select("select").property("value");
​
                // set up and draw the first chart
                summaryTileChart
                    .data(res.data[selectedOffense])
                    .x("hr")
                    .y("dow")
                    .fill("count")
                    .tileWidth(40)
                    .tileHeight(35)
                    .onClick(d => console.log(d))
                    .colorScheme("RdYlBu")
                    .reverseColorScale()
                    .title(`${selectedOffense} Criminal Offenses in Orlando, FL (2009-2015)`)
                    .legendTitle("Number of Offenses")
                    .xLabel("Hour of Day")
                    .horizontalPadding(100)
                    .yLabel("Day of Week");
​
                d3.select("#target")
                    .call(summaryTileChart);
​
                // make updates to chart based on dropdown selection
                offensePicker.on("change", function() {
​
                    selectedOffense = d3.select(this).property("value");
​
                    summaryTileChart
                        .data(res.data[selectedOffense])
                        .title(`${selectedOffense} Criminal Offenses in Orlando, FL (2009-2015)`);
​
                });
​
            }
​
        </script>
    </body>
​
</html>
    