Skip to content

Instantly share code, notes, and snippets.

@ayala-usma

ayala-usma/.block

Last active September 19, 2017 16:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ayala-usma/d2f3b89c84e4ed66e22d02affcdcab73 to your computer and use it in GitHub Desktop.
Save ayala-usma/d2f3b89c84e4ed66e22d02affcdcab73 to your computer and use it in GitHub Desktop.
Download ZIP
BarChart with Tooltips D3.v4
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<style>
body {
font-family: 'Open Sans', sans-serif;
}
#main2 {
width: 1000px;
}
.axis .domain {
display: none;
}
.toolTip {
pointer-events: none;
position: absolute;
display: none;
min-width: 50px;
height: auto;
background: none repeat scroll 0 0 #ffffff;
padding: 9px 14px 6px 14px;
border-radius: 4px;
text-align: left;
line-height: 1.3;
color: #5B6770;
box-shadow: 0px 3px 9px rgba(0, 0, 0, .15);
}
.toolTip:after {
content: "";
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid white;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -12px;
}
.toolTip span {
font-weight: 500;
color: #081F2C;
</style>
<div id="main2">
<svg width="1000" height="500"></svg>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
//Dimensiones del objeto SVG y consideraciones de márgenes para el caso particular.
var svg = d3.select("svg"),
margin = {top: 20, right: 300, bottom: 130, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Selección de la escala del eje x
var x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
// Selección de la escala del eje y
var y = d3.scaleLinear()
.rangeRound([height, 0]);
//Carga de los datos para la visualización. Son datos procesados derivados de los originales.
d3.csv("viz1.csv", function(error, data) {
if (error) throw error;
//Selección de las columnas del conjunto de datos que utilizaré, establecimiento de los rangos máximos y ordenamiento de los datos.
var maximumIRCAValue = 100;
data.sort(function(a, b) { return a.IRCAPromedio - b.IRCAPromedio});
x.domain(data.map(function(d) { return d.departamento; }));
y.domain([0, maximumIRCAValue]).nice();
//Establecer el eje X
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "rotate(45)")
.attr("text-anchor", "start")
.attr("font-size", "13");
//Definiciones del eje Y: Etiquetas, rótulo del eje y tamaño.
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Mediana del IRCA (%)")
.attr("font-size", 13)
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.attr("x", 0 - (height/2))
.attr("y", 7 - margin.left);
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "barra")
.attr("x", function(d) { return x(d.departamento); })
.attr("y", function(d) { return y(d.IRCAPromedio); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.IRCAPromedio); })
.attr("fill", function(d) { if (d.IRCAPromedio <= 5) {return "#ffffb2"} else if (d.IRCAPromedio <= 14) {return "#fecc5c"} else if (d.IRCAPromedio <= 35) {return "#fd8d3c"} else if (d.IRCAPromedio <= 70) {return "#f03b20"} else {return "#bd0026"} })
.on("mousemove", function(d){
d3.select(this).attr("fill", "#588C73");
tooltip
.style("left", d3.event.pageX - 50 + "px")
.style("top", d3.event.pageY - 70 + "px")
.style("display", "inline-block")
.html("Mediana del departamento: " + d3.format(".3")(d.IRCAPromedio) +"%" + "<br><span>" + "Municipio con mayor IRCA: " + (d.municipioIRCAAlto) + " (" + d3.format(".3")(d.IRCAMasAlto)+ "%)" +"</span>" + "<br><span>" + "Municipio con menor IRCA: " + (d.municipioIRCABajo) + " (" + d3.format(".3")(d.IRCAMasBajo)+ "%)" +"</span>");
})
.on("mouseout", function(d, i) { tooltip.style("display", "none");d3.select(this).attr("fill", function(d) {if (d.IRCAPromedio <= 5) {return "#ffffb2"} else if (d.IRCAPromedio <= 14) {return "#fecc5c"} else if (d.IRCAPromedio <= 35) {return "#fd8d3c"} else if (d.IRCAPromedio <= 70) {return "#f03b20"} else {return "#bd0026"}
});})
//Definiciones de las convenciones, fuente y posición
var riskRanks = [100, 70, 35, 14, 5]; //Datos de las convenciones
var z = d3.scaleOrdinal()
.range(["#bd0026","#f03b20","#fd8d3c","#fecc5c","#ffffb2"]);
var legend = g.append("g")
.attr("font-family", "helvetica")
.attr("font-size", 12)
.attr("text-anchor", "start")
.selectAll("g")
.data(riskRanks)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; });
legend.append("rect")
.attr("x", width + 15)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
//Nombrando las convenciones
legend.append("text")
.attr("x", width + 39)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) { t = ""; if(d > riskRanks[1]){ t = "Sanitariamente inviable"} else if (d > riskRanks[2]){ t = "Riesgo alto"} else if (d > riskRanks[3]){ t = "Riesgo medio"} else if (d > riskRanks[4]){ t = "Riesgo bajo"} else {t = "Sin riesgo"}; return t });
});
//Defino los tooltips
var tooltip = d3.select("body").append("div").attr("class", "toolTip");
</script>
Raw
viz1.csv
departamento municipiosDepartamento IRCAPromedio municipioIRCAAlto IRCAMasAlto municipioIRCABajo IRCAMasBajo
Antioquia 123 1.689285 Argelia 89.17461 Alejandría 0
Arauca 7 1.887804 Cravo Norte 8.328117 Saravena 0.444827
San Andrés y Providencia 2 25.9640425 Providencia 51.313333 San Andrés 0.614752
Atlántico 23 0.921428 Campo De La Cruz 77.764285 Manatí 0
Bogotá, D.C. 1 7.350314 Bogotá, D.C. 7.350314 Bogotá, D.C. 7.350314
Bolívar 45 40.970769 Norosí 91.3975 El Carmen De Bolívar 0
Boyacá 123 30.474285 Ráquira 61.516551 Cubará 0
Caldas 27 57.890467 Belalcázar 70.813162 La Dorada 14.779878
Caquetá 14 7.6465515 Morelia 89.047619 Belén De Los Andaquíes 0
Casanare 19 23.095384 Támara 56.252857 Maní 0
Cauca 40 7.4379925 Timbiquí 96.081739 El Tambo 0
Cesar 25 13.480769 Tamalameque 100 San Diego 0
Chocó 1 31.743333 Cértegui 31.743333 Cértegui 31.743333
Córdoba 24 11.6712495 Canalete 55.927142 Montería 0.030348
Cundinamarca 116 5.6860415 San Juan De Río Seco 45.8675 Fúquene 0
Guainía 2 35.442057 Barranco Minas 54.623333 Inírida 16.260781
Huila 37 47.989464 La Argentina 62.308 Palermo 22.51
La Guajira 15 13.792857 Dibulla 85.495652 Riohacha 2.470649
Magdalena 30 36.852258 Sitionuevo 94.609183 Sabanas De San Angel 2.818
Meta 28 27.225 El Castillo 84.036538 Restrepo 4.791388
Nariño 64 52.020481 Olaya Herrera 83.096969 Sandoná 6.440833
Norte de Santander 40 25.660833 Teorama 41.636666 Cúcuta 1.604516
Putumayo 13 53.362307 Orito 78.65 Leguízamo 9.791111
Quindío 12 4.7770515 Salento 12.002258 Armenia 0.355496
Risaralda 14 14.5505565 Pueblo Rico 30.514821 Pereira 6.920689
Santander 87 12.5875 Santa Helena Del Opón 65.76125 Charalá 0
Sucre 26 12.690793 Guaranda 67.628928 Coloso 0
Tolima 12 13.0662845 Villarrica 87.045714 Casabianca 0
Valle del Cauca 42 22.7740265 Vijes 70.704137 Cali 3.103437
Vaupés 3 14.927352 Taraira 52.9425 Caruru 1.48
Vichada 4 12.2531485 Cumaribo 55.95102 Santa Rosalía 9.008888
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment