Producción de Automotores

<!DOCTYPE html>
<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>

//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