Published
Edited
Jun 17, 2020
chart = draw()
dataAll = d3.csv(
"https://raw.githubusercontent.com/statistikZH/economy_SHAB/master/Economy_SHAB.csv?token=ALJEHNRXJP32QSN53TQQDKC66LTXK"
)
cantons = getDistinct(dataAll, "location")
function getDistinct(data, value) {
let retData = [];
let flags = [];
for(let i=0; i<data.length; i++) {
if( flags[data[i][value]]) continue;
flags[data[i][value]] = true;
retData.push(data[i][value]);
}
return retData;
}
filteredData = Object.assign(
d3
.csvParse(await FileAttachment("Economy_SHAB.csv").text(), d3.autoType)
.map(({ date, location, value }) => ({
date,
location,
value
})),
{ y: "Anzahl" }
)
height = 500
margin = ({top: 20, right: 30, bottom: 30, left: 40})
lineColor = "#fdc032"
areaColor = "#fff3d6"
lineWidth = 1.5
lineCurve = "curveStepAfter"
circleRadius = 5
d3 = require("d3@5", "d3-array@^2.2")
x = d3
.scaleTime()
.domain(d3.extent(cumulativeByDate, d => d.date))
.range([margin, width - margin])
y = d3
.scaleLinear()
.domain([0, filteredData.length])
.range([height - margin, margin])
line = d3
.line()
.x(d => x(d.date))
.y(d => y(d.value))
.curve(d3[lineCurve])
area = d3.area()
.x(d => x(d.date))
.y1(d => y(d.value))
.y0(d => y(0))
.curve(d3[lineCurve])
xAxis = g => g
.attr("transform", `translate(0,${height - margin})`)
.call(d3.axisBottom(x))
yAxis = g => g
.attr("transform", `translate(${margin},0)`)
.call(d3.axisLeft(y))
function draw() {
// Create a blank SVG object
const svg = d3.select(DOM.svg(width, height));
// Draw an area plot
svg.append("path")
.datum(cumulativeByDate)
.attr("fill", areaColor)
.attr("d", area);
// Draw a line on top of the area p lot
svg.append("path")
.datum(cumulativeByDate)
.attr("fill", "none")
.attr("stroke", lineColor)
.attr("stroke-width", lineWidth)
.attr("d", line);
// Plot a circle marking the final tweet
svg.append("circle")
.attr("cx", x(filteredData.endDate))
.attr("cy", y(filteredData.length))
.attr("fill", lineColor)
.attr("r", circleRadius);
// Draw the x axis
svg.append("g")
.call(xAxis);
// Draw the y axis
svg.append("g")
.call(yAxis);
// Return the chart for rendering
return svg.node();
}
groupByDate = d3
.nest()
.key(d => dateFormatter(d.date)) // Groups on day
.rollup(d => d.length) // Counts how many records are in each date group
.entries(filteredData) // Passes in the current tweet list for grouping and counting
groupByLocation = d3.group(filteredData, d => d.location)
dateLookup = groupByDate.reduce(
(lookup, date) => ((lookup[date.key] = date.value), lookup),
{}
)
dateFormatter = d3.timeFormat("%Y-%m-%d")
cumulativeByDate = {
// Start the running count at zero.
let runningCount = 0;
// Loop through all the dates in the current filtered Tweet list
return filteredData.dateRange.map(d => {
// Use the lookup and the date formatter to pull the count for each day.
let dateCount = dateLookup[dateFormatter(d)] || 0; // <-- If it isn't in the lookup, set it to zero.
// Add each day's tally to the running count
runningCount += dateCount;
// Return a new datum for this date with the cumulative tally instead of that day's count.
return { date: d, value: runningCount };
});
}
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.
