D3 Examples - Module 3

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>
        
        <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 {
                fill: red;
            }
            
            .hover text {
                fill: red;
                font-weight: bold;
            }           
            
            #container {
                background-color: white;
                border: 2px solid lightGray;
                margin: auto;
                max-width: 900px;
            }
            
            #chartContainer {
                background-color: white;
                margin: auto;
                max-width: 900px;
            }
                        
            .header,
            .content,
            .footer {
                margin: auto;
                max-width: 900px;
            }
                                    
        </style>
    </head>
        
    <body>
        
        <div id="container">
            <div class="header">
                <h1>The States of Mexico</h1>
            </div>
​
            <div class="content">
                <p>There are 31 states in Mexico. Hover over each state to reveal its name.
                </p>
            </div>
            
            <div id="chartContainer">
            </div>
                        
            <div class="footer">
                <p><b>Source: </b> <a href="https://www.naturalearthdata.com/downloads/10m-cultural-vectors/">Natural Earth </a>
                </p>
            </div>
        </div>
        
        
        <script type="text/javascript">
            
            var w = 900;
            var h = 600;
            
            var projection = d3.geo.conicConformal()
                .rotate([98, 0])
                .center([0, 25])
                .parallels([29.5, 45.5])
                .scale(1500)
                .translate([w/1.75, h/2.1])
                .precision(.1);
​
            var path = d3.geo.path()
                .projection(projection);
            
            var svg = d3.select("#chartContainer")
                .append("svg")
                .attr({
                    width: w, 
                    height: h,
                });
            
            
            d3.json("mexicanStates.json", function(json) {
​
                var mapGroup = svg.selectAll("g")
                    .data(json.features)
                    .enter()
                    .append("g")
                        
                                          
                mapGroup.append("path")
                    .attr({
                        d: path,
                        fill: "lightGray",
                        stroke: "white",
                    })
                    .append("title")
                    .text(function(d) { return "Estados: " + d.properties.name ;}
                    );
                
                
                svg.append("text")
                    .attr({
                        x: 500,
                        y: 60,
                        "text-anchor": "start",
                        "font-size": "25px",
                        "font-weight": "bold",
                        fill: "black",
                    })
                    .text("State: ");
                              
                mapGroup.append("text")
                    .attr({
                        x: 575,
                        y: 60,
                        "text-anchor": "start",
                        "font-size": "25px",
                        "fill": "none",
                    })
                    .text(function(d) { return d.properties.name ; });
                
                
                mapGroup.style("cursor", "pointer")
​
                mapGroup.on("mouseover", function() { 
                    d3.select(this)
                        .classed("hover", true)
                });
                
                mapGroup.on("mouseout", function() { 
                    d3.select(this)
                        .classed("hover", false)
                });
            
            });
        
        </script>
    </body>
</html>
    