module2project: Stacked bar chart
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Alternative pedagogy schools in Spain, by autonomy and pedagogy</title> | |
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<style type="text/css"> | |
body { | |
margin: 0; | |
background-color: lightGray; | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
#container { | |
width: 700px; | |
margin-left: auto; | |
margin-right: auto; | |
margin-top: 50px; | |
padding: 50px; | |
background-color: white; | |
box-shadow: 3px 3px 5px 6px #ccc; | |
} | |
h1 { | |
font-size: 24px; | |
margin: 0; | |
} | |
p { | |
font-size: 14px; | |
margin: 15px 0 10px 0; | |
} | |
a:link { | |
text-decoration: none; | |
color: gray; | |
} | |
a:hover { | |
text-decoration: underline; | |
} | |
a:visited { | |
color: gray; | |
} | |
a:active { | |
color: steelBlue; | |
} | |
svg { | |
background-color: white; | |
} | |
g.bar text { | |
fill: #333; | |
font-size: 12px; | |
text-anchor: end; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #333; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 13px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container" style="position: relative"> | |
<h1>Alternative pedagogies in Spain, by autonomies</h1> | |
<p>Free education is the leader alternative pedagogy in almost all autonomies. <strong>Source:</strong> <a href="http://ludus.org.es/es/stats">Ludus</a>, 2015</p> | |
</div> | |
<script type="text/javascript"> | |
var dataset = [ | |
{ | |
data: [ | |
{autonomy: 'Andalucía', | |
count: 33}, | |
{autonomy: 'Aragón', | |
count: 12}, | |
{autonomy: 'Canarias', | |
count: 9}, | |
{autonomy: 'Cantabria', | |
count: 0}, | |
{autonomy: 'Castilla - La Mancha', | |
count: 6}, | |
{autonomy: 'Castilla y León', | |
count: 10}, | |
{autonomy: 'Cataluña / Catalunya', | |
count: 75}, | |
{autonomy: 'Comunidad F. Navarra', | |
count: 3}, | |
{autonomy: 'Comunidad de Madrid', | |
count: 78}, | |
{autonomy: 'Extremadura', | |
count: 7}, | |
{autonomy: 'Galicia', | |
count: 8}, | |
{autonomy: 'Illes Balears', | |
count: 10}, | |
{autonomy: 'La Rioja', | |
count: 1}, | |
{autonomy: 'País Vasco / Euskadi', | |
count: 3}, | |
{autonomy: 'Principado de Asturias', | |
count: 6}, | |
{autonomy: 'Región de Murcia', | |
count: 8}, | |
{autonomy: 'Valencia', | |
count: 40}, | |
], | |
name: 'Free', | |
}, | |
{ | |
data: [ | |
{autonomy: 'Andalucía', | |
count: 11}, | |
{autonomy: 'Aragón', | |
count: 1}, | |
{autonomy: 'Canarias', | |
count: 12}, | |
{autonomy: 'Cantabria', | |
count: 2}, | |
{autonomy: 'Castilla - La Mancha', | |
count: 6}, | |
{autonomy: 'Castilla y León', | |
count: 3}, | |
{autonomy: 'Cataluña / Catalunya', | |
count: 17}, | |
{autonomy: 'Comunidad F. Navarra', | |
count: 2}, | |
{autonomy: 'Comunidad de Madrid', | |
count: 19}, | |
{autonomy: 'Extremadura', | |
count: 0}, | |
{autonomy: 'Galicia', | |
count: 3}, | |
{autonomy: 'Illes Balears', | |
count: 2}, | |
{autonomy: 'La Rioja', | |
count: 0}, | |
{autonomy: 'País Vasco / Euskadi', | |
count: 2}, | |
{autonomy: 'Principado de Asturias', | |
count: 0}, | |
{autonomy: 'Región de Murcia', | |
count: 2}, | |
{autonomy: 'Valencia', | |
count: 7}, | |
], | |
name: 'Waldorf', | |
}, | |
{ | |
data: [ | |
{autonomy: 'Andalucía', | |
count: 21}, | |
{autonomy: 'Aragón', | |
count: 2}, | |
{autonomy: 'Canarias', | |
count: 6}, | |
{autonomy: 'Cantabria', | |
count: 1}, | |
{autonomy: 'Castilla - La Mancha', | |
count: 2}, | |
{autonomy: 'Castilla y León', | |
count: 1}, | |
{autonomy: 'Cataluña / Catalunya', | |
count: 12}, | |
{autonomy: 'Comunidad F. Navarra', | |
count: 2}, | |
{autonomy: 'Comunidad de Madrid', | |
count: 15}, | |
{autonomy: 'Extremadura', | |
count: 3}, | |
{autonomy: 'Galicia', | |
count: 2}, | |
{autonomy: 'Illes Balears', | |
count: 0}, | |
{autonomy: 'La Rioja', | |
count: 0}, | |
{autonomy: 'País Vasco / Euskadi', | |
count: 1}, | |
{autonomy: 'Principado de Asturias', | |
count: 0}, | |
{autonomy: 'Región de Murcia', | |
count: 4}, | |
{autonomy: 'Valencia', | |
count: 6}, | |
], | |
name: 'Montessori', | |
}, | |
{ | |
data: [ | |
{autonomy: 'Andalucía', | |
count: 30}, | |
{autonomy: 'Aragón', | |
count: 6}, | |
{autonomy: 'Canarias', | |
count: 7}, | |
{autonomy: 'Cantabria', | |
count: 7}, | |
{autonomy: 'Castilla - La Mancha', | |
count: 2}, | |
{autonomy: 'Castilla y León', | |
count: 6}, | |
{autonomy: 'Cataluña / Catalunya', | |
count: 68}, | |
{autonomy: 'Comunidad F. Navarra', | |
count: 2}, | |
{autonomy: 'Comunidad de Madrid', | |
count: 75}, | |
{autonomy: 'Extremadura', | |
count: 3}, | |
{autonomy: 'Galicia', | |
count: 5}, | |
{autonomy: 'Illes Balears', | |
count: 5}, | |
{autonomy: 'La Rioja', | |
count: 0}, | |
{autonomy: 'País Vasco / Euskadi', | |
count: 9}, | |
{autonomy: 'Principado de Asturias', | |
count: 5}, | |
{autonomy: 'Región de Murcia', | |
count: 5}, | |
{autonomy: 'Valencia', | |
count: 19}, | |
], | |
name: 'Other', | |
}, | |
] | |
var margins = { | |
top: 20, | |
left: 130, | |
right: 130, | |
bottom: 20 | |
}, | |
ini_width = 700, | |
ini_height = 500, | |
width = ini_width - margins.left - margins.right, | |
height = ini_height - margins.top - margins.bottom, | |
pedagogies = dataset.map(function (d) { | |
return d.name; | |
}), | |
dataset = dataset.map(function (d) { | |
return d.data.map(function (o, i) { | |
// Structure it so that your numeric | |
// axis (the stacked amount) is y | |
return { | |
y: o.count, | |
x: o.autonomy | |
}; | |
}); | |
}), | |
stack = d3.layout.stack(); | |
stack(dataset); | |
var dataset = dataset.map(function (group) { | |
return group.map(function (d) { | |
// Invert the x and y values, and y0 becomes x0 | |
return { | |
x: d.y, | |
y: d.x, | |
x0: d.y0 | |
}; | |
}); | |
}), | |
svg = d3.select('#container') | |
.append('svg') | |
.attr('width', width + margins.left + margins.right) | |
.attr('height', height + margins.top + margins.bottom) | |
.append('g') | |
.attr("class", "bar") | |
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'), | |
xMax = d3.max(dataset, function (group) { | |
return d3.max(group, function (d) { | |
return d.x + d.x0; | |
}); | |
}), | |
xScale = d3.scale.linear() | |
.domain([0, xMax]) | |
.range([0, width]), | |
autonomies = dataset[0].map(function (d) { | |
return d.y; | |
}), | |
_ =console.log(autonomies), | |
yScale = d3.scale.ordinal() | |
.domain(autonomies) | |
.rangeRoundBands([0, height], .1), | |
xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient('bottom'), | |
yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient('left'), | |
colors = ['#75C773', '#FD8E2D', '#BC42C1', '#CCCCCC'], | |
groups = svg.selectAll('g') | |
.data(dataset) | |
.enter() | |
.append('g') | |
.style('fill', function (d, i) { | |
return colors[i]; | |
}), | |
rects = groups.selectAll('rect') | |
.data(function (d) { | |
return d; | |
}) | |
.enter() | |
.append('rect') | |
.attr('x', function (d) { | |
return xScale(d.x0); | |
}) | |
.attr('y', function (d, i) { | |
return yScale(d.y); | |
}) | |
.attr('height', function (d) { | |
return yScale.rangeBand(); | |
}) | |
.attr('width', function (d) { | |
return xScale(d.x); | |
}) | |
.on("mouseover", function() { tooltip.style("display", null); }) | |
.on("mouseout", function() { tooltip.style("display", "none"); }) | |
.on("mousemove", function(d) { | |
var xPosition = d3.mouse(this)[0] - 15; | |
var yPosition = d3.mouse(this)[1] - 25; | |
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")"); | |
tooltip.select("text").text(d.x); | |
}); | |
svg.append('g') | |
.attr('class', 'axis') | |
.attr('transform', 'translate(0,' + height + ')') | |
.call(xAxis); | |
svg.append('g') | |
.attr('class', 'axis') | |
.call(yAxis); | |
pedagogies.forEach(function (s, i) { | |
svg.append('text') | |
.attr('fill', 'black') | |
.attr('x', width + 90) | |
.attr('y', i * 24 + 24) | |
.text(s); | |
svg.append('rect') | |
.attr('fill', colors[i]) | |
.attr('width', 20) | |
.attr('height', 20) | |
.attr('x', width + 100) | |
.attr('y', i * 24 + 6); | |
}); | |
// Create tooltip, initial display is hidden - http://bl.ocks.org/uafrazier/833042ec4d3381a15c67 | |
var tooltip = svg.append("g") | |
.attr("class", "tooltip") | |
.style("display", "none"); | |
tooltip.append("rect") | |
.attr("width", 30) | |
.attr("height", 20) | |
.attr("fill", "white") | |
.style("opacity", 0.5); | |
tooltip.append("text") | |
.attr("x", 15) | |
.attr("dy", "1.2em") | |
.style("text-anchor", "middle") | |
.attr("font-size", "12px") | |
.attr("font-weight", "bold"); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment