pixel flipper, data sifter. trying to see what I can while I'm here
ranges = [
{ start: new Date("1985-10-06 12:01"), end: new Date("1994-12-31 12:01") },
{ start: new Date("1995-01-01 12:01"), end: new Date("2004-12-31 12:01") },
{ start: new Date("2005-01-01 12:01"), end: new Date("2014-12-31 12:01") },
{ start: new Date("2015-01-01 12:01"), end: new Date("2025-10-06 12:01") },
]
range = 3
start = ranges[range].start
end = ranges[range].end
enjaData = {
let days = msToDays(+end - +start)
return d3.range(days).map(function(d) {
let day = moment(start).add(d, 'days')
return {
"date": day.toDate(),
"value": day.date()
}
})
}
chart = {
const years = d3.nest()
.key(d => d.date.getUTCFullYear())
.entries(enjaData)
.reverse();
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height * years.length + years.length * cellSize * 1.5])
.attr("font-family", "sans-serif")
.attr("font-size", 10);
const year = svg.selectAll("g")
.data(years)
.join("g")
.attr("transform", (d, i) => `translate(40,${height * i + (i+1) * cellSize * 1.5 + 50})`);
// Year title
year.append("text")
.attr("x", 0)
.attr("y", -15)
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.style("font-size", 96)
.style("font-family", font)
.text(d => d.key);
/*
year.append("g")
.attr("text-anchor", "end")
.selectAll("text")
.data((weekday === "weekday" ? d3.range(2, 7) : d3.range(7)).map(i => new Date(1995, 0, i)))
.join("text")
.attr("x", -5)
.attr("y", d => (countDay(d) + 0.5) * cellSize)
.attr("dy", "0.31em")
.text(formatDay);
*/
year.append("g")
.selectAll("rect")
.data(d => d.values)
.join("rect")
.attr("width", cellSize - 1)
.attr("height", cellSize - 1)
.attr("x", d => timeWeek.count(d3.utcYear(d.date), d.date) * cellSize + 0.5)
.attr("y", d => countDay(d.date) * cellSize + 0.5)
// .attr("fill", d => color(d.value))
.attr("fill", fillColor)
.attr("stroke", strokeColor)
.style("stroke-width", 2)
.style("stroke-linejoin", "round")
.style("stroke-linecap", "round")
.append("title")
.text(d => `${formatDate(d.date)}: ${format(d.value)}`);
year.append("g")
.selectAll("text")
.data(d => d.values)
.join("text")
.text(d => d.value < 10 ? "0" + d.value : d.value)
.attr("x", d => timeWeek.count(d3.utcYear(d.date), d.date) * cellSize + 0.5 + cellSize / 2 - fontSize / 1.5)
.attr("y", d => countDay(d.date) * cellSize + fontSize/2.5 + cellSize/2 - 2)
// .attr("fill", d => color(d.value))
.attr("fill", strokeColor)
.attr("fill-opacity", 0.4)
.attr("font-size", fontSize)
.style("font-family", font)
const month = year.append("g")
.selectAll("g")
.data(d => d3.utcMonths(d3.utcMonth(d.values[0].date), d.values[d.values.length - 1].date))
.join("g");
month.filter((d, i) => i).append("path")
.attr("fill", "none")
// .attr("stroke", "#fff")
.attr("stroke", strokeColor)
.attr("stroke-width", 6)
.attr("d", pathMonth);
month.append("text")
.attr("x", d => timeWeek.count(d3.utcYear(d), timeWeek.ceil(d)) * cellSize + 1)
.attr("y", cellSize * 7.5)
.style("font-family", font)
.style("font-size", 24)
.text(formatMonth);
return svg.node();
}
font = "Roboto mono, Courier New"
fontSize = cellSize / 2
cellSize = height / 9
// cellSize = 17
height = 500 //cellSize * 9
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.
