data = {
let options = {
"Cumulative": cumulativeData,
"Count": countData
}
return options[chartType];
}
line = d3.line()
.x(d => x(d.date))
.y(d => y(d.value))
.curve(d3.curveStepAfter)
area = d3.area()
.x(d => x(d.date))
.y1(d => y(d.value))
.y0(d => y(0))
.curve(d3.curveStepAfter)
x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([margin, width - margin])
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([height - margin, margin])
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))
cumulativeData = {
let runningCount = 0;
let cumulativeByDate = [];
dateRange.forEach(function(date) {
let dateCount = dateLookup[dateFormatter(date)] || 0;
runningCount += dateCount;
let dateObj = {date: date, value: runningCount}
cumulativeByDate.push(dateObj);
});
return cumulativeByDate;
}
countData = {
let countByDate = [];
dateRange.forEach(function(date) {
let dateCount = dateLookup[dateFormatter(date)] || 0;
let dateObj = {date: date, value: dateCount}
countByDate.push(dateObj);
});
return countByDate;
}
dateFormatter = d3.timeFormat("%Y-%m-%d")
dateRange = filteredTweets.dateRange
dateLookup = groupbyDate.reduce((lookup, date) => (lookup[date.key] = date.value, lookup), {})
groupbyDate = d3.nest()
.key(d => d.dateString)
.rollup(d => d.length)
.entries(filteredTweets)
totalTweets = filteredTweets.length
filteredTweets = filter.length > 3 ? tweets.filter(t => t.contains(filter)) : tweets
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.
