Created
April 27, 2015 00:49
-
-
Save a2q/bf8ffa8b9bf7e8f3a875 to your computer and use it in GitHub Desktop.
Producción de Automotores
This file contains hidden or 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
| Tipo | 1/01/2013 | 1/02/2013 | 1/03/2013 | 1/04/2013 | 1/05/2013 | 1/06/2013 | 1/07/2013 | 1/08/2013 | 1/09/2013 | 1/10/2013 | 1/11/2013 | 1/12/2013 | 1/01/2014 | 1/02/2014 | 1/03/2014 | 1/04/2014 | 1/05/2014 | 1/06/2014 | 1/07/2014 | 1/08/2014 | 01/09/2014 | 01/10/2014 | 01/11/2014 | 01/12/2014 | 1/01/2015 | 1/02/2015 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Autos | 33456 | 32888 | 54033 | 49331 | 51728 | 40421 | 46411 | 43140 | 45215 | 47315 | 37218 | 25374 | 25761 | 29825 | 37482 | 36951 | 29756 | 29045 | 29812 | 25273 | 31722 | 34349 | 31450 | 22285 | 16231 | 25394 | |
| Utilitarios | 10227 | 18189 | 22473 | 23761 | 25211 | 20850 | 23110 | 24003 | 24227 | 25672 | 22505 | 17394 | 9755 | 20904 | 18663 | 20123 | 19274 | 19979 | 17478 | 19181 | 24565 | 24533 | 21376 | 17209 | 8982 | 18770 | |
| Carga | 335 | 1602 | 2178 | 2105 | 2291 | 1887 | 1998 | 2433 | 2156 | 2777 | 2196 | 1917 | 576 | 1981 | 2049 | 1987 | 1782 | 1693 | 1765 | 1192 | 1180 | 1 | 1469 | 950 | 364 | 1285 | |
| Pasajeros | 34 | 232 | 347 | 299 | 360 | 303 | 376 | 346 | 330 | 340 | 267 | 237 | 64 | 231 | 125 | 104 | 126 | 187 | 269 | 141 | 199 | 363 | 262 | 192 | 48 | 156 |
This file contains hidden or 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>Producción de Automotores</title> | |
| <script type="text/javascript" src="http://d3js.org./d3.v3.js"></script> | |
| <style type="text/css"> | |
| body { | |
| background-color: white; | |
| font-family:'Merriweather', serif; | |
| } | |
| #main{ | |
| width:800px; | |
| margin:auto; | |
| border:1px solid rgb(150,150,150); | |
| padding: 20px 30px; | |
| } | |
| h1 { | |
| font-size: 24px; | |
| margin: 0; | |
| } | |
| /* | |
| p { | |
| font-size: 14px; | |
| margin: 10px 0 0 0; | |
| } | |
| */ p { | |
| font-size: 15px; | |
| margin: 10px 0 0 0; | |
| color:rgb(90,90,90); | |
| } | |
| a { | |
| text-decoration:none; | |
| color: rgb(94, 182, 239); | |
| } | |
| svg { | |
| background-color: white; | |
| } | |
| circle:hover { | |
| fill: orange; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family:'Merriweather', serif; | |
| font-size: 11px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="main"> | |
| <h1>Evolución de la Producción de Automotores en Argentina</h1> | |
| <p>La evolución mensual de la producción de automotores según informa la Asociación de Fabricas de Automotores detallado por categorías, la serie no va más allá de dos años atrás pero se llega a apreciar cierta tendencia en la misma.</br>Fuente: <a href="http://www.adefa.com.ar/v2/index.php?option=com_content&view=article&id=81&Itemid=114&lang=es">ADEFA</a>.</p> | |
| </br> | |
| <script type="text/javascript"> | |
| //Dimensions and padding | |
| var w = 450; | |
| var h = 350; | |
| var padding = [ 20, 10, 30, 50 ]; //Top, right, bottom, left | |
| //Set up date formatting and years | |
| var dateFormat = d3.time.format("%d/%m/%Y"); | |
| //Set up scales | |
| var xScale = d3.time.scale() | |
| .range([ padding[3], w - padding[1] - padding[3] ]); | |
| var yScale = d3.scale.linear() | |
| .range([ padding[0], h - padding[2] ]); | |
| var tiempoSalida=d3.time.format("%m/%Y"); | |
| //Configure axis generators | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .tickFormat(tiempoSalida); | |
| var prod=[10000, 20000, 30000, 40000, 50000]; | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .tickValues(prod); | |
| //Configure line generator | |
| var line = d3.svg.line() | |
| .x(function(d) { | |
| return xScale(dateFormat.parse(d.periodo)); | |
| }) | |
| .y(function(d) { | |
| return yScale(+d.cantidad); | |
| }); | |
| //Create the empty SVG image | |
| var svg = d3.select("#main") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //Load data | |
| d3.csv("Dataset.csv", function(data) { | |
| var periodos=["1/01/2013","1/02/2013","1/03/2013","1/04/2013","1/05/2013","1/06/2013","1/07/2013", | |
| "1/08/2013","1/09/2013","1/10/2013","1/11/2013","1/12/2013","1/01/2014","1/02/2014", | |
| "1/03/2014","1/04/2014","1/05/2014","1/06/2014","1/07/2014","1/08/2014","1/09/2014", | |
| "1/10/2014","1/11/2014","1/12/2014","1/01/2015","1/02/2015"]; | |
| var dataset = []; | |
| for (var i = 0; i < data.length; i++) { | |
| dataset[i] = { | |
| tipo: data[i].Tipo, | |
| producciones: [] | |
| }; | |
| //Loop through all the years | |
| for (var j = 0; j < periodos.length; j++) { | |
| // If value is not empty | |
| if (data[i][periodos[j]]) { | |
| dataset[i].producciones.push({ | |
| periodo: periodos[j], | |
| cantidad: data[i][periodos[j]] | |
| }); | |
| } | |
| } | |
| } | |
| //periodos | |
| //console.log(data[1][periodos[2]]); | |
| xScale.domain([ | |
| d3.min(periodos, function(d) { | |
| return dateFormat.parse(d); | |
| }), | |
| d3.max(periodos, function(d) { | |
| return dateFormat.parse(d); | |
| }) | |
| ]); | |
| yScale.domain([ | |
| d3.max(dataset, function(d) { | |
| return d3.max(d.producciones, function(d) { | |
| return +d.cantidad; | |
| }); | |
| }), | |
| 0 | |
| ]); | |
| var groups = svg.selectAll("g") | |
| .data(dataset) | |
| .enter() | |
| .append("g"); | |
| groups.append("title") | |
| .text(function(d) { | |
| return d.tipo; | |
| }); | |
| //Within each group, create a new line/path, | |
| //binding just the emissions data to each one | |
| groups.selectAll("path") | |
| .data(function(d) { | |
| return [ d.producciones ]; | |
| }) | |
| .enter() | |
| .append("path") | |
| .attr("class", "line") | |
| .attr("d", line) | |
| .attr("fill", "none") | |
| .attr("stroke", "steelblue") | |
| .attr("stroke-width", 2); | |
| //Axes | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + (h - padding[2]) + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + (padding[3]) + ",0)") | |
| .call(yAxis); | |
| }); | |
| </script> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment