Skip to content

Instantly share code, notes, and snippets.

@jeffersonrpn

jeffersonrpn/index.html

Last active August 12, 2019 18:59
Show Gist options
  • Save jeffersonrpn/9f89c8610eb18a482416fee44c6bb80e to your computer and use it in GitHub Desktop.
Save jeffersonrpn/9f89c8610eb18a482416fee44c6bb80e to your computer and use it in GitHub Desktop.
Download ZIP
Açude Epitácio Pessoa (Boqueirão) ano a ano
Raw
index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Açude de Boqueirão ao longo dos anos</title>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.js"></script>
<script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
<style media="screen">
html, body {
margin: 0;
padding: 0;
}
.dot {
/*fill: steelblue;*/
/*stroke: none;*/
stroke-width: 1.5px;
opacity: 1;
}
.line {
cursor: pointer;
}
.label {
font-family: sans-serif;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var
width = 700,
height = 350,
margin = { top: 20, bottom: 20, left: 40, right: 60 };
var
viewBox = {
width: width + margin.right + margin.left,
height: height + margin.left + margin.right
}
var svg = d3.select("#chart").append("svg")
.attr("viewBox", "0 0 "+viewBox.width+" "+viewBox.height)
.attr("width", "100%");
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var linesGroup = g.append("g").attr("class", "lines");
var
timeParse = d3.timeParse("%d/%m/%Y"),
x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0])
xAxis = d3.axisBottom(x)
.ticks(12)
.tickSize(height + 5)
.tickFormat(d3.timeFormat("%b"));
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.relativeDate); })
.y(function(d) { return y(d.gain); });
d3.json("https://apiteste.insa.gov.br/reservatorios/12172/monitoramento", function(error, data) {
if (error) throw error;
var volumes = data.volumes.map(function(d) {
return {
relativeDate: timeParse(d.DataInformacao.substring(0, d.DataInformacao.length - 4) + "1990"),
year: +d3.timeFormat("%Y")(timeParse(d.DataInformacao)),
volume: +d.Volume,
percent: +d.VolumePercentual
}
});
var series = d3.nest()
.key(function(d) { return d.year; })
.entries(volumes);
for (var key in series) {
if (series.hasOwnProperty(key)) {
var init = series[key].values[0].volume;
for (var k in series[key].values) {
if (series[key].values.hasOwnProperty(k)) {
series[key].values[k].gain = Math.round((series[key].values[k].volume - init) * 100) / 100;
}
}
}
}
x.domain(d3.extent(volumes, function(d) { return d.relativeDate }));
y.domain([-150, 320]);
g.append("g")
.attr("class", "axis axis--x")
.call(xAxis);
g.select(".domain").remove();
g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#bdc3c7").attr("stroke-dasharray", "5,2");
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Ganho/perda (hm³)");
// lines
var years = linesGroup.selectAll(".year")
.data(series)
.enter().append("g")
.attr("class", "serie");
years.append("path")
.attr("id", function(d) { return "line-" + d.key; })
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.attr("stroke", "#3498db")
.attr("fill", "none")
.attr("stroke-width", "2")
.attr("opacity", "0.2")
.on("mouseover", function(d) {
d3.select(this).attr("opacity", "1");
d3.select("#year-" + d.key).attr("opacity", "1");
})
.on("mouseout", function(d) {
d3.select(this).attr("opacity", "0.2");
d3.select("#year-" + d.key).attr("opacity", "0.1");
});
// labels
var labels = years.append("text")
.attr("id", function(d) { return "year-" + d.key; })
.attr("class", "label")
// .attr("x", function(d) { return x(d.values[d.values.length - 1].relativeDate) })
.attr("x", width)
.attr("y", function(d) { return y(d.values[d.values.length - 1].gain) })
.attr("dy", "5px")
.attr("fill", "#3498db")
.attr("opacity", "0.1")
.text(function(d) { return d.key; })
.on("mouseover", function(d) {
d3.select(this).attr("opacity", "1");
d3.select("#line-" + d.key).attr("opacity", "1");
})
.on("mouseout", function(d) {
d3.select(this).attr("opacity", "0.1");
d3.select("#line-" + d.key).attr("opacity", "0.2");
});
var zeroLine = g.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", y(0))
.attr("y2", y(0))
.attr("stroke", "#e74c3c");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment