Built with blockbuilder.org
forked from vickygisel's block: Bar chart with negative values
license: mit |
Built with blockbuilder.org
forked from vickygisel's block: Bar chart with negative values
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
h1 { | |
text-align: center; | |
font-size: 20px; | |
font-weight: 600; | |
font-family: "Open Sans", sans-serif; | |
} | |
h2 { | |
text-align: left; | |
margin-left: 165; | |
margin-bottom: -10; | |
font-size: 16px; | |
font-weight: 400; | |
font-family: "Open Sans", sans-serif; | |
color: gray; | |
} | |
#explanation { | |
font-size: 12px; | |
font-family: "Open Sans", sans-serif; | |
max-width: 620px; | |
margin: -30 auto; | |
padding-top: 0px; | |
color: gray; | |
font-weight: 400; | |
} | |
.bar--positive { | |
fill: #2c7fb8; | |
} | |
.bar--negative { | |
fill: #7fcdbb; | |
} | |
.bar:hover { | |
fill: #e1ef1f; | |
fill-opacity: .8; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: none; | |
shape-rendering: crispEdges; | |
} | |
text { | |
font-family: "Open Sans", sans-serif; | |
font-weight: 400; | |
font-size: 12px; | |
color: black; | |
} | |
.d3-tip { | |
line-height: 1; | |
font-size: 11px; | |
font-weight: bold; | |
font-family: "Open Sans", sans-serif; | |
padding: 12px; | |
background: rgba(0, 0, 0, 0.8); | |
color: #fff; | |
border-radius: 2px; | |
} | |
/* Creates a small triangle extender for the tooltip */ | |
.d3-tip:after { | |
box-sizing: border-box; | |
display: inline; | |
font-size: 12px; | |
width: 100%; | |
line-height: 1; | |
color: rgba(0, 0, 0, 0.8); | |
content: "\25BC"; | |
position: absolute; | |
text-align: center; | |
} | |
/* Style northward tooltips differently */ | |
.d3-tip.n:after { | |
margin: -1px 0 0 0; | |
top: 100%; | |
left: 0; | |
} | |
</style> | |
<body> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet"> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
<h1>Índice de hacinamiento en sala de 2 años</h1> | |
<h2>Región 1</h2> | |
<div id="chart"></div> | |
<script> | |
var margin = {top: 20, right: 30, bottom: 40, left: 30}, | |
width = 300 - margin.left - margin.right, | |
height = 400 - margin.top - margin.bottom; | |
var x = d3.scale.linear() | |
.range([0, width]); | |
var y = d3.scale.ordinal() | |
.rangeRoundBands([0, height], 0.1); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
.tickSize(0) | |
.tickPadding(6); | |
var tip = d3.tip() | |
.attr('class', 'd3-tip') | |
.offset([-10, 0]) | |
.html(function(d) { | |
return "<strong>Establecimiento:</strong> <span style='color:#e1ef1f'>" + d.name + "</span>"; | |
}) | |
var svg = d3.select("#chart").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 + ")"); | |
svg.call(tip); | |
d3.tsv("indice_de_hacinamiento_test_data.tsv", type, function(error, data) { | |
data.sort(function(a,b) {return b.value-a.value;}); | |
x.domain(d3.extent(data, function(d) { return d.value; })).nice(); | |
y.domain(data.map(function(d) { return d.name; })); | |
max = d3.max(data, function(d) { return d.value; }); | |
bar = svg.selectAll("g") | |
.data(data) | |
.enter(); | |
bar.append("rect") | |
.attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); }) | |
.attr("x", function(d) { return x(Math.min(0, d.value)); }) | |
.attr("y", function(d) { return y(d.name); }) | |
.attr("width", function(d) { return Math.abs(x(d.value) - x(0)); }) | |
.attr("height", y.rangeBand()) | |
.on('mouseover', tip.show) | |
.on('mouseout', tip.hide); | |
bar.append("text") | |
.text(function(d) { | |
return d.value; | |
}) | |
.attr("x", function(d) { return Math.abs(x(d.value)); }) | |
.attr("y", function(d) { return y(d.name); }) | |
.attr("dx", function(d) { return (d.value < 0 ? "-2.5em" : "0.5em"); }) | |
.attr("dy", "1em") //vertical align middle | |
}); | |
function type(d) { | |
d.value = +d.value; | |
return d; | |
} | |
</script> |
name | value | |
---|---|---|
0001JI0901 | 0.13 | |
0001JI0902 | -0.42 | |
0001JI0903 | 0.14 | |
0001JI0904 | 0 | |
0001JI0905 | -0.02 | |
0001JI0906 | 0.06 | |
0001JI0907 | 0.09 | |
0001JI0908 | -0.2 | |
0001JI0909 | -0.3 | |
0001JI0910 | 0.02 | |
0001JI0911 | 0 | |
0001JI0912 | 0.05 | |
0001JI0913 | -0.39 | |
0001JI0914 | -0.45 | |
0001JI0915 | 0.1 | |
0001JI0916 | -0.12 | |
0001JI0917 | -0.49 | |
0001JI0918 | 0.14 | |
0001JI0919 | -0.18 | |
0001JI0920 | 0.06 |