D3 Examples - Module 4

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>States of Mexico</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.5.0/d3-legend.js"></script>
        
        <style type="text/css">
            body {
                background-color: gainsboro;
                font-family: Arial, sans-serif;
            }
            
            svg {
                background-color: white;
            }
            
            h1 {
                background-color: gray;
                border-left: 15px solid red;
                color: white;
                font-family: Georgia, "Times New Roman", san-serif;
                font-size: 30px;
                font-weight: normal;
                margin: auto;
                padding: 5px 10px;
            }
            
            p {
                font-family: Arial, sans-serif;
                font-size: 20px;
                margin: 10px 25px;
            }
            
            a:link {
                color: black;
                text-decoration: underline;
            }
            
            a:visited {
                color: red;
            }
            
            path:hover {
                opacity: 1.0;
                stroke: "red";
            }
            
            .hover text {
                fill: red;
                font-weight: bold;
            }
            
            #container {
                background-color: white;
                border: 2px solid lightGray;
                margin: auto;
                max-width: 1000px;
            }
            
            #chartContainer {
                background-color: white;
                margin: auto;
                max-width: 1000px;
            }
            
            .header,
            .descript,
            .footer {
                margin: auto;
                max-width: 1000px;
            }
            
            #tooltip {
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                -moz-box-shadow: 1px 1px 5px gray;
                -webkit-box-shadow: 1px 1px 5px gray;
                box-shadow: 1px 1px 5px gray;
                background-color: white;
                opacity: 1.0;
                position: absolute;
                pointer-events: none;
                height: auto;
                width: 225px;
            }
            
            #tooltip.hidden {
                display: none;
            }
            
            #tooltip p {
                font-family: sans-serif;
                font-size: 15px;
                margin-left: 5px;
            }
            
            .button {
                border: 2.5px solid white;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                display: inline-block;
                padding: 7.5px 0;
                line-height: 20px;
                background: red;
                width: 90px;
                text-align: center;
                color: white;
                font-family: Arial, sans-serif;
                font-size: 20px;
                font-weight: bold;
                text-transform: uppercase;
            }
            
            .button:hover {
                background: black;
                color: white;
                cursor: pointer;
            }
            
            .buttonContainer {
                background-color: white;
                padding: 0 2.5%;
                margin: auto;
                max-width: 1000px;
            }
            
            .legendLinear {
                font-family: Arial, sans-serif;
                font-size: 15px;
                font-weight: bold;
            }
        </style>
    </head>
        
    <body>
        <div id="container">
            <div class="header">
                <h1>The Homicide Rate in Mexico, 2007-2013</h1>
            </div>
            
            <div class="descript">
                <p>The homicide rate in Mexico has risen significantly from 8 homicides per 100,000 in 2007 to 22 homicides per 100,000 in 2013. That's an increase of 135%. However, the rates vary greatly by state. For instance, the homicide rate in the <b style="color:limeGreen">Yucatán</b> has been lower than the rate in United States in every year shown here. However, in <b style="color:indigo">Chihuahua</b>, the homicide rate is among one of the highest in the world.</p>
            </div>
            
            <div class="buttonContainer">
                <input type="button" value="2007" class="button" onmouseover="updateData2007()">
                
                <input type="button" value="2008" class="button" onmouseover="updateData2008()">
                
                <input type="button" value="2009" class="button" onmouseover="updateData2009()" >
                
                <input type="button" value="2010" class="button" onmouseover="updateData2010()">
                
                <input type="button" value="2011" class="button" onmouseover="updateData2011()">
                
                <input type="button" value="2012" class="button" onmouseover="updateData2012()">
                
                <input type="button" value="2013" class="button" onmouseover="updateData2013()" >
            </div>
            
            <div id="chartContainer">
                <div id="tooltip" class="hidden">
                    <p>State: <b><span id="value1"></span></b>
                        <br>Homicide rate per 100,000 inhabitants: 
                        <b><span id="value2"></span></b>
                    </p>
                </div>
            </div>
            
            <div class="footer">
                <p>Sources: <a href="https://www.inegi.org.mx/saladeprensa/boletines/2015/especiales/especiales2015_07_4.pdf">Instituto Nacional de Estadística y Geografía</a> and <a href="https://www.naturalearthdata.com/downloads/10m-cultural-vectors/">Natural Earth </a>
                </p>
            </div>
        </div>
        
        <script type="text/javascript">
            var year = "2007";
            
            var w = 1000;
            var h = 500;
            var speed = 250;
            
            var projection = d3.geo.conicConformal()
                .rotate([98, 0])
                .center([0, 25])
                .parallels([29.5, 45.5])
                .scale(1250)
                .translate([500, 225])
                .precision(.1);
            
            var path = d3.geo.path()
                .projection(projection);
            
            var color = d3.scale.quantize()
                .domain([0, 189])
                .range([
                        "#fff5f0",
                        "#fee0d2",
                        "#fcbba1",
                        "#fc9272",
                        "#fb6a4a",
                        "#ef3b2c",
                        "#cb181d",
                        "#a50f15",
                        "#67000d",
                        ]);
            
            var svg = d3.select("#chartContainer")
                .append("svg")
                .attr({
                    width: w, 
                    height: h,
                });
            
            
            d3.csv("mexico.csv", function(data) {
                
                d3.json("mexicanStates.json", function(json) {
                
                    for (var i = 0; i < data.length; i++) {
                        var dataCountryCode = data[i].state;
                        var dataValue = +data[i][year];
                        
                        for (var j = 0; j < json.features.length; j++) {
                            var jsonCountryCode = json.features[j].properties.name;
                            if (dataCountryCode == jsonCountryCode) {
                                json.features[j].properties.homicide = dataValue;
                                break;
                            }
                        }
                    }
                    
                    
                    
                    var mapGroup = svg.selectAll("g")
                        .data(json.features)
                        .enter()
                        .append("g")
                    
                    mapGroup.append("path")
                        .attr({
                            d: path,
                            fill: function(d) {
                                var value = d.properties.homicide;
                                if (value) {
                                    return color(value);
                                } else {
                                    return "#000";
                                }
                            },
                            stroke: function(d) {
                                if (d.properties.name == "Yucatan") {
                                    return "limeGreen";
                                } else if (d.properties.name == "Chihuahua"){
                                    return "indigo";
                                } else {
                                    return "silver";
                                }
                            },
                            "stroke-width": function(d) {
                                if (d.properties.name == "Yucatan") {
                                    return "2.5px";
                                } else if (d.properties.name == "Chihuahua") {
                                    return "2.5px";
                                } else {
                                    return "1px";
                                }
                            },
                            opacity: 1.0,
                        });
                    
                    
                    
                    svg.append("g")
                        .attr("class", "legendLinear")
                        .attr("transform", "translate(500, 50)");
                    
                    var legendLinear = d3.legend.color()
                        .shapeWidth(50)
                        .shapeHeight(20)
                        .labels([0, 21, 42, 63, 84, 105, 126, 147, 168, 189])
                        .labelAlign("start")
                        .orient("horizontal")
                        .title("Homicide rate per 100,000 inhabitants")
                        .ascending(false)
                        .scale(color);
                    
                    svg.select(".legendLinear")
                        .call(legendLinear);
                    
                    mapGroup.style("cursor", "pointer")
                    
                    mapGroup.on("mouseover", function(d) {
                        d3.select("#tooltip")
                            .style("left", (d3.event.pageX) + 45 + "px")
                            .style("top", (d3.event.pageY - 45) + "px")
                            .select("#value1")
                            .text(d.properties.name);
                        
                        d3.select("#value2")
                            .text(d.properties.homicide);
                        
                        d3.select("#tooltip").classed("hidden", false);
                    })
                        .on("mouseout", function() {
                            d3.select("#tooltip").classed("hidden", true);
                    });
                     
                });
            });
            
            
            
            
            function updateData2007() {
                var year = "2007";
                
                
                d3.csv("mexico.csv", function(data) {
                    
                    d3.json("mexicanStates.json", function(json) {
                    
                        for (var i = 0; i < data.length; i++) {
                            var dataCountryCode = data[i].state;
                            var dataValue = +data[i][year];
                            for (var j = 0; j < json.features.length; j++) {
                                var jsonCountryCode = json.features[j].properties.name;
                                if (dataCountryCode == jsonCountryCode) {
                                    //Copy the data value into the GeoJSON
                                    json.features[j].properties.homicide = dataValue;
                                    break;
                                }
                            }
                        }
                        
                    d3.selectAll("g")
                        .data(json.features);
                    
                    d3.selectAll("path")
                        .data(json.features)
                        .transition()
                        .duration(100)
                        .attr({
                            d: path,
                            fill: function(d) {
                                var value = d.properties.homicide;
                                if (value) {
                                    return color(value);
                                } else {
                                    return "black";
                                }
                            },
                            opacity: 1.0,
                        });
                        
                    });
                });
            }
            
            
            
            
            function updateData2008() {
                var year = "2008";
                
                d3.csv("mexico.csv", function(data) {
                    
                    d3.json("mexicanStates.json", function(json) {
                    
                        for (var i = 0; i < data.length; i++) {
                            var dataCountryCode = data[i].state;
                            var dataValue = +data[i][year];
                            for (var j = 0; j < json.features.length; j++) {
                                var jsonCountryCode = json.features[j].properties.name;
                                if (dataCountryCode == jsonCountryCode) {
                                    json.features[j].properties.homicide = dataValue;
                                    break;
                                }
                            }
                        }
                        
                    d3.selectAll("g")
                        .data(json.features);
                    
                    d3.selectAll("path")
                        .data(json.features)
                        .transition()
                        .duration(100)
                        .attr({
                            d: path,
                            fill: function(d) {
                                var value = d.properties.homicide;
                                if (value) {
                                    return color(value);
                                } else {
                                    return "black";
                                }
                            },
                            opacity: 1.0,
                        });
                    
                    });
                });
            }
            
            
            
            
            function updateData2009() {
                var year = "2009";
                
                d3.csv("mexico.csv", function(data) {
                    
                    d3.json("mexicanStates.json", function(json) {
                    
                        for (var i = 0; i < data.length; i++) {
                            var dataCountryCode = data[i].state;
                            var dataValue = +data[i][year];
                            for (var j = 0; j < json.features.length; j++) {
                                var jsonCountryCode = json.features[j].properties.name;
                                if (dataCountryCode == jsonCountryCode) {
                                    json.features[j].properties.homicide = dataValue;
                                    break;
                                }
                            }
                        }
                        
                    d3.selectAll("g")
                        .data(json.features);
                    
                    d3.selectAll("path")
                        .data(json.features)
                        .transition()
                        .duration(100)
                        .attr({
                            d: path,
                            fill: function(d) {
                                var value = d.properties.homicide;
                                if (value) {
                                    return color(value);
                                } else {
                                    return "black";
                                }
                            },
                            opacity: 1.0,
                        });
                    });
                });
            }
            
            
            
            
            function updateData2010() {
                var year = "2010";
                
                d3.csv("mexico.csv", function(data) {
                    
                    d3.json("mexicanStates.json", function(json) {
                    
                        for (var i = 0; i < data.length; i++) {
                            var dataCountryCode = data[i].state;
                            var dataValue = +data[i][year];
                            for (var j = 0; j < json.features.length; j++) {
                                var jsonCountryCode = json.features[j].properties.name;
                                if (dataCountryCode == jsonCountryCode) {
                                    json.features[j].properties.homicide = dataValue;
                                    break;
                                }
                            }
                        }
                    
                    d3.selectAll("g")
                        .data(json.features);
                        
                    d3.selectAll("path")
                        .data(json.features)
                        .transition()
                        .duration(100)
                        .attr({
                            d: path,
                            fill: function(d) {
                                var value = d.properties.homicide;
                                if (value) {
                                    return color(value);
                                } else {
                                    return "black";
                                }
                            },
                            opacity: 1.0,
                        });
                    });
                });
            }
            
            
            
            
            function updateData2011() {
                var year = "2011";
                
                d3.csv("mexico.csv", function(data) {
                    
                    d3.json("mexicanStates.json", function(json) {
                    
                        for (var i = 0; i < data.length; i++) {
                            var dataCountryCode = data[i].state;
                            var dataValue = +data[i][year];
                            for (var j = 0; j < json.features.length; j++) {
                                var jsonCountryCode = json.features[j].properties.name;
                                if (dataCountryCode == jsonCountryCode) {
                                    json.features[j].properties.homicide = dataValue;
                                    break;
                                }
                            }
                        }
                        
                    d3.selectAll("g")
                        .data(json.features);
                    
                    d3.selectAll("path")
                        .data(json.features)
                        .transition()
                        .duration(100)
                        .attr({
                            d: path,
                            fill: function(d) {
                                var value = d.properties.homicide;
                                if (value) {
                                    return color(value);
                                } else {
                                    return "black";
                                }
                            },
                            opacity: 1.0,
                        });
                    });
                });
            }
            
            
            
            
            function updateData2012() {
                var year = "2012";
                
                d3.csv("mexico.csv", function(data) {
                    
                    d3.json("mexicanStates.json", function(json) {
                    
                        for (var i = 0; i < data.length; i++) {
                            var dataCountryCode = data[i].state;
                            var dataValue = +data[i][year];
                            for (var j = 0; j < json.features.length; j++) {
                                var jsonCountryCode = json.features[j].properties.name;
                                if (dataCountryCode == jsonCountryCode) {
                                    json.features[j].properties.homicide = dataValue;
                                    break;
                                }
                            }
                        }
                    
                    d3.selectAll("g")
                        .data(json.features);
                        
                    d3.selectAll("path")
                        .data(json.features)
                        .transition()
                        .duration(100)
                        .attr({
                            d: path,
                            fill: function(d) {
                                var value = d.properties.homicide;
                                if (value) {
                                    return color(value);
                                } else {
                                    return "black";
                                }
                            },
                            opacity: 1.0,
                        });
                    });
                });
            }
            
            
            
            
            function updateData2013() {
                var year = "2013";
                
                d3.csv("mexico.csv", function(data) {
                    
                    d3.json("mexicanStates.json", function(json) {
                    
                        for (var i = 0; i < data.length; i++) {
                            var dataCountryCode = data[i].state;
                            var dataValue = +data[i][year];
                            for (var j = 0; j < json.features.length; j++) {
                                var jsonCountryCode = json.features[j].properties.name;
                                if (dataCountryCode == jsonCountryCode) {
                                    json.features[j].properties.homicide = dataValue;
                                    break;
                                }
                            }
                        }
                        
                    d3.selectAll("g")
                        .data(json.features);
                    
                    d3.selectAll("path")
                        .data(json.features)
                        .transition()
                        .duration(100)
                        .attr({
                            d: path,
                            fill: function(d) {
                                var value = d.properties.homicide;
                                if (value) {
                                    return color(value);
                                } else {
                                    return "black";
                                }
                            },
                            opacity: 1.0,
                        });
                    });
                });
            }
            
        </script>
    </body>
</html>
    