xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Producción de Automotores</title> <script type="text/javascript" src="https://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="https://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> Modified http://d3js.org./d3.v3.js to a secure url
https://d3js.org./d3.v3.js