Skip to content

Instantly share code, notes, and snippets.

@majomo

majomo/index.html

Forked from mendozaline/index.html
Created March 30, 2016 05:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save majomo/d9f7ac9e77f323c0e81eb8c41296e1a2 to your computer and use it in GitHub Desktop.
Save majomo/d9f7ac9e77f323c0e81eb8c41296e1a2 to your computer and use it in GitHub Desktop.
Download ZIP
Module 4
Raw
index.html
<!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="http://www.inegi.org.mx/saladeprensa/boletines/2015/especiales/especiales2015_07_4.pdf">Instituto Nacional de Estadística y Geografía</a> and <a href="http://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>
Display the source blob
Display the rendered blob
Raw
mexicanStates.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
mexico.csv
state 2007 2008 2009 2010 2011 2012 2013
Aguascalientes 4 5 6 6 7 4 4
Baja California 12 33 48 47 25 17 23
Baja California Sur 6 6 5 8 6 5 7
Campeche 6 7 7 6 6 9 8
Coahuila 4 7 10 16 26 41 28
Colima 7 9 9 20 24 39 32
Chiapas 2 6 11 4 4 8 10
Chihuahua 15 76 105 182 126 77 59
Distrito Federal 9 10 11 12 12 12 12
Durango 11 26 61 66 63 48 27
Guanajuato 4 5 9 8 11 12 12
Guerrero 23 30 54 45 70 76 65
Hidalgo 3 3 6 4 8 6 6
Jalisco 6 8 9 14 20 20 19
Mexico 8 10 12 14 17 18 20
Michoacan 13 15 21 16 19 18 20
Morelos 7 12 15 27 25 36 34
Nayarit 10 15 18 49 52 25 19
Nuevo Leon 6 5 7 20 45 38 19
Oaxaca 15 16 16 19 17 18 19
Puebla 5 6 6 6 7 8 9
Queretaro 3 4 5 4 6 6 6
Quintana Roo 10 11 11 11 12 11 11
San Luis Potosi 6 8 8 14 14 17 11
Sinaloa 14 30 51 85 69 48 42
Sonora 12 17 21 27 20 19 23
Tabasco 7 7 8 9 10 8 11
Tamaulipas 6 8 10 28 32 46 25
Tlaxcala 3 5 7 5 7 6 7
Veracruz 5 4 9 6 13 13 10
Yucatan 3 3 2 2 3 2 2
Zacatecas 5 7 9 9 19 30 28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment