module2project: Stacked bar chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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