Skip to content

Instantly share code, notes, and snippets.

@jamieeeeeeeee

jamieeeeeeeee/chile-threshold-working.html

Last active November 17, 2017 19:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jamieeeeeeeee/1e96b917ea41a5de4751d48bbca75160 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jamieeeeeeeee/1e96b917ea41a5de4751d48bbca75160 to your computer and use it in GitHub Desktop.
Download ZIP
Interactive Map of Chile, Educational data from the Ministry of Education
Raw
chile-threshold-working.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Scaling the AlbersUSA projection</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js"></script>
<style type="text/css">
/*
Add tool tip
https://bl.ocks.org/alandunning/7008d0332cc28a826b37b3cf6e7bd998
*/
.toolTip {
position: absolute;
display: none;
min-width: 80px;
height: auto;
background: none repeat scroll 0 0 #ffffff;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 1px;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*
Make responsive
https://chartio.com/resources/tutorials/how-to-resize-an-svg-when-the-window-is-resized-in-d3-js/
*/
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: top;
overflow: hidden;
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="container" class="svg-container">
</div>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script type="text/javascript">
//Width and height
var width = 600;
var height = 500;
//Create SVG element
var svg = d3.select("div#container")
.append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geoMercator()
.center([-33, -40])
.scale(500);
var path = d3.geoPath()
.projection(projection);
var x = d3.scaleLinear()
.domain([12, 26])
.rangeRound([300, 560]);
var color = d3.scaleThreshold()
.domain([13, 16, 17, 18, 19, 20, 21, 22, 26])
.range(d3.schemePuBu[9]);
//create a new, empty map.
var map = d3.map();
var tooltip = d3.select("body").append("div").attr("class", "toolTip");
var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(0,40)");
g.selectAll("rect")
.data(color.range().map(function(d) {
d = color.invertExtent(d);
if (d[0] == null) d[0] = x.domain()[0];
if (d[1] == null) d[1] = x.domain()[1];
return d;
}))
.enter().append("rect")
.attr("height", 8)
.attr("x", function(d) { return x(d[0]) ; })
.attr("width", function(d) { return x(d[1]) - x(d[0]); })
.attr("fill", function(d) { return color(d[0]); });
g.append("text")
.attr("class", "caption")
.attr("x", x.range()[0] )
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Achieved adequate scores in math");
d3.queue()
.defer(d3.json, "simple-cl-id-topo.json")
.defer(d3.csv, "regional-math-performance-10th.csv", function(d) { map.set(d.id, +d.perc_math_adequate); })
.await(ready);
g.call(d3.axisBottom(x)
.tickSize(13)
.tickFormat(function(x, i) { return i ? x : x + "%"; })
.tickValues(color.domain()))
.select(".domain")
.remove();
//Load in GeoJSON data
function ready(error, chile) {
if (error) return console.error(error);
console.log(chile);
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(chile, chile.objects.subunits).features)
.enter().append("path")
.attr("fill", function(d) { return color(d.perc_math_adequate = map.get(d.id)); })
.attr("d", path)
.on("mousemove", function(d){
tooltip
.style("left", d3.event.pageX - 50 + "px")
.style("top", d3.event.pageY - 70 + "px")
.style("display", "inline-block")
.html("<b>Region " +(d.id) + "</b>: " + (d.perc_math_adequate) + "% achieved adequate scores in math" );
})
.on("mouseout", function(d){ tooltip.style("display", "none");})
.append("title")
.text(function(d) { return d.perc_math_adequate + "%"; });
/*
svg.append("path")
.datum(subunits)
.attr("d", path)
.attr("fill", function(d) {
return color(d.perc_math_adequate = map.get(d.id));
});
//to center -> http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object
*/
var b = path.bounds(projection),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection
.scale(s)
.translate(t);
};
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Scaling the AlbersUSA projection</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js"></script>
<style type="text/css">
/*
Add tool tip
https://bl.ocks.org/alandunning/7008d0332cc28a826b37b3cf6e7bd998
*/
.toolTip {
position: absolute;
display: none;
min-width: 80px;
height: auto;
background: none repeat scroll 0 0 #ffffff;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 1px;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*
Make responsive
https://chartio.com/resources/tutorials/how-to-resize-an-svg-when-the-window-is-resized-in-d3-js/
*/
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: top;
overflow: hidden;
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="container" class="svg-container">
</div>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script type="text/javascript">
//Width and height
var width = 600;
var height = 500;
//Create SVG element
var svg = d3.select("div#container")
.append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geoMercator()
.center([-33, -40])
.scale(500);
var path = d3.geoPath()
.projection(projection);
var x = d3.scaleLinear()
.domain([12, 26])
.rangeRound([300, 560]);
var color = d3.scaleThreshold()
.domain([13, 16, 17, 18, 19, 20, 21, 22, 26])
.range(d3.schemePuBu[9]);
//create a new, empty map.
var map = d3.map();
var tooltip = d3.select("body").append("div").attr("class", "toolTip");
var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(0,40)");
g.selectAll("rect")
.data(color.range().map(function(d) {
d = color.invertExtent(d);
if (d[0] == null) d[0] = x.domain()[0];
if (d[1] == null) d[1] = x.domain()[1];
return d;
}))
.enter().append("rect")
.attr("height", 8)
.attr("x", function(d) { return x(d[0]) ; })
.attr("width", function(d) { return x(d[1]) - x(d[0]); })
.attr("fill", function(d) { return color(d[0]); });
g.append("text")
.attr("class", "caption")
.attr("x", x.range()[0] )
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Achieved adequate scores in math");
d3.queue()
.defer(d3.json, "simple-cl-id-topo.json")
.defer(d3.csv, "regional-math-performance-10th.csv", function(d) { map.set(d.id, +d.perc_math_adequate); })
.await(ready);
g.call(d3.axisBottom(x)
.tickSize(13)
.tickFormat(function(x, i) { return i ? x : x + "%"; })
.tickValues(color.domain()))
.select(".domain")
.remove();
//Load in GeoJSON data
function ready(error, chile) {
if (error) return console.error(error);
console.log(chile);
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(chile, chile.objects.subunits).features)
.enter().append("path")
.attr("fill", function(d) { return color(d.perc_math_adequate = map.get(d.id)); })
.attr("d", path)
.on("mousemove", function(d){
tooltip
.style("left", d3.event.pageX - 50 + "px")
.style("top", d3.event.pageY - 70 + "px")
.style("display", "inline-block")
.html("<b>Region " +(d.id) + "</b>: " + (d.perc_math_adequate) + "% achieved adequate scores in math" );
})
.on("mouseout", function(d){ tooltip.style("display", "none");})
.append("title")
.text(function(d) { return d.perc_math_adequate + "%"; });
/*
svg.append("path")
.datum(subunits)
.attr("d", path)
.attr("fill", function(d) {
return color(d.perc_math_adequate = map.get(d.id));
});
//to center -> http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object
*/
var b = path.bounds(projection),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection
.scale(s)
.translate(t);
};
</script>
</body>
</html>
Raw
regional-math-performance-10th.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 16 should actually have 3 columns, instead of 1 in line 15.
"id",perc_math_adequate,"name"
"I",17.9,"REGIÓN DE TARAPACÁ"
"II",18.7,"REGIÓN DE ANTOFAGASTA"
"III",13.3,"REGIÓN DE ATACAMA"
"IV",20.4,"REGIÓN DE COQUIMBO"
"V",21.3,"REGIÓN DE VALPARAÍSO"
"VI",19.1,"REGIÓN DEL LIBERTADOR GENERAL BERNARDO O'HIGGINS"
"VII",19.9,"REGIÓN DEL MAULE"
"VIII",18.8,"REGIÓN DEL BIOBÍO"
"IX",13.8,"REGIÓN DE LA ARAUCANÍA"
"X",16.2,"REGIÓN DE LOS LAGOS"
"XI",19.5,"REGIÓN DE AISÉN DEL GENERAL CARLOS IBÁÑEZ DEL CAMPO"
"XII",16.4,"REGIÓN DE MAGALLANES Y DE LA ANTÁRTICA CHILENA"
"RM",25.3,"REGIÓN METROPOLITANA"
"XIV",16,"REGIÓN DE LOS RÍOS"
<<<<<<< HEAD
"XV",18.8,"REGIÓN ARICA - PARINACOTA"
=======
"XV",18.8,"REGIÓN ARICA - PARINACOTA"
>>>>>>> 3a9c99de64bd439d23304da39275f1162e798514
Display the source blob
Display the rendered blob
Raw
simple-cl-id-topo.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment