/index.html
Last active Nov 9, 2015
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