Published
Edited
Jun 14, 2020
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("class", "chart-container")
.attr("viewBox", [0, 0, width, height])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("stroke-miterlimit", 1)
.style("padding-top", "20px")
.style("border-radius", "10px")
.style("background", "rgb(44, 44, 44)")

const gradient = DOM.uid();
svg.append("linearGradient")
.attr("id", gradient.id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", height)
.selectAll("stop")
.data([
{offset: 0, color: "steelblue"},
{offset: 1, color: "red"}
])
.join("stop")
.attr("offset", d => d.offset)
.attr("stop-color", d => d.color);
svg.append("g")
.call(xAxis)
.selectAll("text")
.attr("color", "gray")
.attr("font-size", 12);

svg.append("g")
.call(yAxis)
.selectAll("text")
.attr("color", "gray")
.attr("font-size", 18);

svg.append("path")
.attr("fill", "none")
.attr("stroke", gradient)
.attr("stroke-width", 5)
.attr("d", line(data));
if (!mutable lookup) mutable lookup = new Date(data[0].date);
const bar = svg
.append("line")
.attr("stroke", "#ccc")
.attr("stroke-width", 1.5)
.attr("y2", height)
.attr("x1", x(mutable lookup))
.attr("x2", x(mutable lookup));
const legend = svg
.append("text")
.style("font", "30px sans-serif")
.attr("fill", "#ccc")
.attr("x", 10)
.attr("y", 100);
const legendSaldo = svg
.append("text")
.style("font", "30px sans-serif")
.attr("fill", "#ccc")
.attr("x", 10)
.attr("y", 130);
svg.append("line")
.attr("stroke", "gray")
.attr("stroke-width", 5)
.attr("x1", x.range()[0])
.attr("x2", x.range()[1])
.attr("y1", y(model(dateNumScale(x.domain()[0]))))
.attr("y2", y(model(dateNumScale(x.domain()[1]))));
const formatTime = d3.utcFormat("%m/%Y");
function update(date) {
const i = bisect.right(data, date);
if (i < data.length && i > 0) {
legend.attr("x", (i > data.length/2)? x(mutable lookup)-110 : x(mutable lookup))
legendSaldo.attr("x", (i > data.length/2)? x(mutable lookup)-125 : x(mutable lookup))
legend.text(`${formatTime(data[i].date)}`)
legendSaldo.text(`saldo: ${data[i].saldo}`)
}
mutable lookup = new Date(date);
bar.attr("x1", x(mutable lookup)).attr("x2", x(mutable lookup));
}
svg.on("mousemove click touchmove", function() {
const m = d3.mouse(this);
update(x.invert(m[0]));
});
update(mutable lookup);
return svg.node();
}
Insert cell
mutable lookup = null
Insert cell
bisect = d3.bisector(d => d.date)
Insert cell
positiveColor = "steelblue" //#861657
Insert cell
negativeColor = "darkred"
Insert cell
model = ss.linearRegressionLine(ss.linearRegression(data.map(d => ([dateNumScale(d.date), d.saldo]))))
Insert cell
dataRaw = [
{
"date": "202001",
"admitidos": 246,
"desligados": 320,
"saldo": -74
},
{
"date": "202002",
"admitidos": 637,
"desligados": 354,
"saldo": 283
},
{
"date": "202003",
"admitidos": 450,
"desligados": 336,
"saldo": 114
},
{
"date": "202004",
"admitidos": 256,
"desligados": 226,
"saldo": 30
}
]
Insert cell
data = {
const data = dataRaw;
data.map(d => d.date = dateFormater(d.date));
return data;
}
Insert cell
dateFormater = d3.utcParse("%Y%m")
Insert cell
line = d3.line()
.x(d => x(d.date))
.y(d => y(d.saldo))
Insert cell
dateNumScale = d3.scaleUtc()
.domain(d3.extent(data, d => d.date))
.rangeRound([0, data.length])
Insert cell
x = d3.scaleUtc()
.domain(d3.extent(data, d => d.date))
.rangeRound([margin.left, width - margin.right])
Insert cell
y = d3.scaleLinear() //scaleLinear domain([-1, ]) //scaleLog() domain([1, ])
.domain([d3.min(data, d => d.saldo), d3.max(data, d => d.saldo)])
.rangeRound([height - margin.bottom, margin.top])
.clamp(true)
Insert cell
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 120).tickSizeOuter(0))
Insert cell
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickFormat(d => `${d}`))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.attr("id", "mobility-title")
.text(""))
.call(g => g.selectAll(".tick line")
.select(function() { return this.parentNode.appendChild(this.cloneNode()); })
.attr("stroke-opacity", 0.3)
.attr("stroke-dasharray", "10,10")
.attr("stroke-width", 1)
.attr("stroke", "#ccc")
.attr("x2", width - margin.left - margin.right))
Insert cell
height = 600
Insert cell
width = 600
Insert cell
margin = ({top: 20, right: 30, bottom: 30, left: 60})
Insert cell
d3.timeFormatDefaultLocale(locale);
Insert cell
Insert cell
ss = require("simple-statistics@6.0.0/dist/simple-statistics.min.js")
Insert cell
d3 = require("d3@5", "d3-array@^2.2")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more