D3 Examples - Industria manufacturera (redesign)

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
​
  <script src="https://d3js.org/d3.v3.min.js"></script>
​
  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet" type="text/css" />
  
  <meta charset="utf-8">
  <style>
    body {
      margin:20px;
    }
  </style>
<title>Industria</title>
</head>
<body>
  <h1>Industria manufacturera</h1>
  <h2>Utilización de la Capacidad Instalada en la Industria</h2>
  <h3>Período: [01/2016 .. 03/2017]</h3>
  <div id="chart"></div>
  <br>
  <p align="right">Datos generados con <a href="https://tabula.technology/">Tabula</a> a partir de <a href="https://www.indec.gob.ar/uploads/informesdeprensa/capacidad_05_17.pdf">este informe del INDEC (en formato PDF)</a></p>
​
<script>
var chart = c3.generate({
    data: {
      url: 'industria.csv',
        x: 'fecha',
        xFormat: '%Y-%m-%d'
  },
  tooltip: {
    grouped: false
  },
  color: { pattern: ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#000000','#b15928'] },
  axis: {
    y: {
      show: true,
      max: 90,
      min: 10,
    },
    x: {
      type: 'timeseries',
      tick: { format: '%Y-%m' }
    }
  }
});
</script>
​
</body>
</html>
    