Public
Edited
Jan 13, 2023
data = [
{
align: 1,
date: '18 Apr 1775',
eventName: "Paul Revere's Midnight Ride",
eventDescription: "Paul Revere rode from Charlestown (Boston) to Lexington, MA, to warn of British troop movement. Americans believed the British had orders to arrest John Hancock and Samuel Adams. The British planned to march to Concord, MA, to seize an arms stockpile."
},
{
align: -1,
date: '19 Apr 1775',
eventName: "The Shot Heard Round the World",
eventDescription: "British troops met American militia around Lexington, MA. The American militia started to disperse. A shot was fired, and though it was unclear who fired the shot or whether it was intentional, the two sides started fighting."
},
{
align: 1,
date: '22 Jun 1775',
eventName: "George Washington Appointed General",
eventDescription: "George Washington was appointed General of the American army by the Continental Congress. He was to immediately take over the siege of Boston."
},
{
align: -1,
date: '10 Jan 1776',
eventName: "Common Sense",
eventDescription: "Common Sense (Thomas Paine) was published anonymously. It was widely read, and is credited for spreading support for the independence movement."
},
{
align: 1,
date: '17 Mar 1776',
eventName: "End of the Siege of Boston",
eventDescription: "British troops withdrew from Boston by sea."
},
{
align: -1,
date: '2 Jul 1776',
eventName: "British Arrive in New York",
eventDescription: "British troops landed on Staten Island. After fleeing Boston, they sailed to Halifax, Nova Scotia, then to New York."
},
{
align: 1,
date: '4 Jul 1776',
eventName: "Declaration of Independence",
eventDescription: "The declaration of independence was signed."
},
{
align: -1,
date: '9 Jul 1776',
eventName: "Toppling of the King George III Statue",
eventDescription: "General George Washington had the Declaration of Independence read to the Continental Army defending New York City. They reportedly got so excited they tore down a statue of King George III and melted the statue to make bullets."
},
{
align: 1,
date: '25 Nov 1783',
eventName: "British Withdrawal from New York City",
eventDescription: "British troops withdraw from New York City, while George Washington and a small contingent of soldiers entered the city and changed the flags.",
},
]
timeParser = d3.timeParse('%d %b %Y %I:%M%p');
parseTime = (date) => timeParser(`${date} 06:00AM`)
wrangled = data.map((d) => ({
...d,
date: parseTime(d.date)
}));
yearRange = d3
.extent(wrangled.map(({ date }) => date))
.map(d => d.getFullYear())
yearsToMark = [...Array((yearRange[1] + 2) - (yearRange[0] - 1))]
.reduce((acc, cv, i) => {
if (acc.length === 0) {
acc.push(yearRange[0]);
return acc;
}
acc.push(acc[i - 1] + 1);
return acc
}, [])
.map(y => ({
date: new Date(y, 0, 1, 6, 0, 0, 0),
year: `${y}`
}));
Plot.plot({
marks: [
Plot.dot(yearsToMark, { y: 'date', fill: '#5598E2', r: 15 }),
Plot.text(yearsToMark, { y: 'date', text: 'year', fill: 'white', fontWeight: 'bold' }),
Plot.dot(wrangled, { y: 'date', fill: '#c28080', r: 3 }),
Plot.text(wrangled, { y: 'date', text: 'eventName', dx: 10, textAnchor: 'start', filter: d => d.align > 0}),
Plot.text(wrangled, { y: 'date', text: 'eventName', dx: -10, textAnchor: 'end', filter: d => d.align < 0}),
],
y: {
axis: null,
reverse: true
},
x: {
axis: null
},
width,
height: width * 2,
marginTop: 30,
marginBottom: 20
});
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.