JSFiddle - React, Tailwind, and code Playground

by Daniel Ayala

HTML

<script src="&lt;script src=&quot;https://d3js.org/d3.v4.min.js&quot;&gt;&lt;/script&gt;"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Homicidios en Colombia Año 2015</title>
<style type="text/css">
	h2 {
	  font: 26px sans-serif;
	  font-weight: bold;
	}	
	h3 {
	  font: 20px sans-serif;
	  font-weight: bold;
	}
	p {
	  font: 17px sans-serif;
	}
</style>
</head>
<body>

<h2 align="center">Insight: Vender chalecos antibalas: una oportunidad de negocio con gran mercado!!!</h2>
<br></br>
<p>Analizando los resultados arrojados por el set de datos abiertos del Grupo Información de Criminalidad (GICRI) - DIJIN, el índice de homicidios con arma de fuego casi doblega a la suma de los otros tipos de medios utilizados para cometer homicidios en Colombia, de acuerdo a las cifras arrojadas para el año 2015</p>
<p>Esta tendencia en los homicidios muestra que la venta de chalecos antibalas, y otros accesorios de seguridad como vehículos blindados, cascos blindados, constituyen un modelo de negocio interesante en un país donde los homicidios por arma de fuego son casi el denominador común. Las cifras arrojadas así lo demuestran:</p>

<script src="https://d3js.org/d3.v4.min.js"></script>

<script>

CSS

svg {
    font: 10px sans-serif;
    shape-rendering: crispEdges;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;

JavaScript

var margin = {top: 20, right: 160, bottom: 35, left: 30};

var width = 650 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


/* Data in strings like it would be if imported from a csv */

var data = [
  { mes: "Jan", FUEGO: "839", BLANCA: "221", CONTUNDENTES: "35", OTROS: "18" },
  { mes: "Feb", FUEGO: "598", BLANCA: "177", CONTUNDENTES: "42", OTROS: "18" },
  { mes: "Mar", FUEGO: "760", BLANCA: "241", CONTUNDENTES: "29", OTROS: "23" },
  { mes: "Apr", FUEGO: "728", BLANCA: "190", CONTUNDENTES: "29", OTROS: "25" },
  { mes: "May", FUEGO: "783", BLANCA: "245", CONTUNDENTES: "37", OTROS: "17" },
  { mes: "Jun", FUEGO: "792", BLANCA: "248", CONTUNDENTES: "33", OTROS: "22" }, 
  { mes: "Jul", FUEGO: "804", BLANCA: "218", CONTUNDENTES: "35", OTROS: "8" },
  { mes: "Aug", FUEGO: "714", BLANCA: "238", CONTUNDENTES: "29", OTROS: "22" },
  { mes: "Sep", FUEGO: "684", BLANCA: "214", CONTUNDENTES: "36", OTROS: "19" },
  { mes: "Oct", FUEGO: "668", BLANCA: "224", CONTUNDENTES: "26", OTROS: "13" },
  { mes: "Nov", FUEGO: "772", BLANCA: "279", CONTUNDENTES: "42", OTROS: "17" },
  { mes: "Dec", FUEGO: "865", BLANCA: "303", CONTUNDENTES: "43", OTROS: "16" }, 
];

var parse = d3.time.format("%b").parse;


// Transpose the data into layers
var dataset = d3.layout.stack()(["FUEGO", "BLANCA","CONTUNDENTES", "OTROS"].map(function(Arma) {
  return data.map(function(d) {
    return {x: parse(d.mes), y: +d[Arma]};
  });
}));


// Set x, y and colors
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) { return d.x; }))
  .rangeRoundBands([10, width-10], 0.15);
  

var y = d3.scale.linear()
  .domain([0, d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  })])
  .range([height,...