Module 3

<!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) {

mapGroup.on("mouseover", function() { 
                    d3.select(this)
                        .classed("hover", true)
                });
                
                mapGroup.on("mouseout", function() { 
                    d3.select(this)
                        .classed("hover", false)
                });
            
			});
		
		</script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js