Skip to content

Instantly share code, notes, and snippets.

@murtra

murtra/index.html

Last active November 9, 2015 21:34
Show Gist options
  • Save murtra/6b7f2bd3ca1a7f45a6c9 to your computer and use it in GitHub Desktop.
Save murtra/6b7f2bd3ca1a7f45a6c9 to your computer and use it in GitHub Desktop.
Download ZIP
module2project: Stacked bar chart
Raw
index.html
<!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