Published
Edited
Apr 13, 2021
2 forks
Insert cell
Insert cell
Insert cell
svg = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

const g = svg
.append("g")
.attr("class", "gDrawing")
.attr("transform", `translate(${margin.left}, ${margin.top})`);

g.append("g")
.attr("class", "x--axis")

.attr("transform", `translate(0, ${height - margin.top - margin.bottom})`)
.call(axis =>
axis
.append("text")
.text(xAttr)
.style("fill", "black")
.attr("transform", `translate( ${iwidth}, -10)`)
.style("text-anchor", "end")
);
g.append("g")
.attr("class", "y--axis")
.call(axis =>
axis
.append("text")
.text(yAttr)
.style("fill", "black")
.style("text-anchor", "middle")
.attr("y", -15)
);

return svg.node();
}
Insert cell
update = {
const g = d3.select(svg).select(".gDrawing");

const setBarAttribs = bar =>
bar
.attr("x", d => x(d[xAttr]) - barWidth / 2)
.attr("width", barWidth)
.attr("height", d => iheight - y(d[yAttr]))
.attr("y", d => y(d[yAttr]))
.style("fill", "steelblue");

const t = g.transition().duration(750);

g.select(".x--axis")
.transition(t)
.call(d3.axisBottom(x));
g.select(".y--axis")
.transition(t)
.call(d3.axisLeft(y));

// Your marks here
g.selectAll(".bar")
.data(filteredData)
.join(enter =>
enter
.append("rect")
.call(setBarAttribs)
.attr("height", 0)
.attr("y", iheight)
)
.attr("class", "bar")
.transition(t)
.call(setBarAttribs);
}
Insert cell
barWidth = iwidth / keys.length
Insert cell
keys = Array.from(new Set(data.map(d => +d.fecha_historica)).values()).map(
d => new Date(d)
)
Insert cell
currDate
Insert cell
filteredData = data.filter(d => +d.fecha_historica === +currDate)
Insert cell
iwidth = width - margin.left - margin.right
Insert cell
iheight = height - margin.top - margin.bottom
Insert cell
xAttr = "key"
Insert cell
yAttr = "fis"
Insert cell
x = d3
.scaleTime()
.domain(d3.extent(data, d => d[xAttr]))
.range([0, iwidth])
Insert cell
y = d3
.scaleLinear()
.domain([0, d3.max(filteredData, d => d[yAttr])])
.range([iheight, 0])
.nice()
Insert cell
height = 400
Insert cell
margin = ({ left: 50, top: 30, right: 20, bottom: 20 })
Insert cell
data = {
const data = await FileAttachment("allCountsByDate_8b.csv").csv();
data.forEach(d => {
d.key = parse(d.key);
d.fis = +d.fis;
d.fecha_historica = parse(d.fecha_historica);
});

return data;
}
Insert cell
parse = d3.timeParse("%Y-%m-%d")
Insert cell
d3 = require("d3@6")
Insert cell
import {Scrubber} from "@mbostock/scrubber"
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