Trump's Twitter TerminologyInteractive line chart of Trump tweetsFilter Trump tweetsRandom Trump tweetTrump tweets
Cumulative line chart of Trump tweets
chart = draw()
filteredTweets = tweets
margin = 40
height = 500
lineColor = "#fdc032"
areaColor = "#fff3d6"
lineWidth = 1.5
lineCurve = "curveStepAfter"
circleRadius = 5
d3 = require("d3@5")
x = d3.scaleTime()
.domain(d3.extent(cumulativeByDate, d => d.date))
.range([margin, width - margin])
y = d3.scaleLinear()
.domain([0, filteredTweets.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(filteredTweets.endDate))
.attr("cy", y(filteredTweets.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();
}
import {tweets} from "@palewire/trump-tweets"
groupByDate = d3.nest()
.key(d => d.dateString) // Groups on day
.rollup(d => d.length) // Counts how many records are in each date group
.entries(filteredTweets) // Passes in the current tweet list for grouping and counting
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 filteredTweets.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.
