{"id":20,"date":"2026-06-26T17:03:44","date_gmt":"2026-06-26T17:03:44","guid":{"rendered":"https:\/\/nehsjc.org\/eagle-eye\/?p=20"},"modified":"2026-06-26T17:06:06","modified_gmt":"2026-06-26T17:06:06","slug":"interactive-timeline-boston-americas-250th","status":"publish","type":"post","link":"https:\/\/nehsjc.org\/eagle-eye\/news\/interactive-timeline-boston-americas-250th\/","title":{"rendered":"Interactive Timeline: Boston &amp; America&#8217;s 250th"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">We created a timeline of key moments in Boston history that echo through modern culture &amp; society.<\/p>\n\n\n\n<style>\n  * { box-sizing: border-box; margin: 0; padding: 0; }\n  .page { background: #1a3a5c; font-family: var(--font-sans); min-height: 600px; }\n  .header { text-align: center; padding: 2rem 1rem 1rem; }\n  .header-eyebrow { color: #a8c8e8; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.5rem; }\n  .stars-top { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 0.5rem; }\n  .star { color: #f4c430; font-size: 12px; } .star.sm { font-size: 9px; }\n  .header h1 { color: #fff; font-size: 42px; font-weight: 700; line-height: 1.1; margin-bottom: 0.4rem; }\n  .header p { color: #c8dff0; font-size: 13px; font-style: italic; }\n .stars-bot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 0.6rem; }\n\n  .timeline-section { padding: 0.75rem 2rem 0.5rem; }\n  .explore-label { text-align: center; color: #a8c8e8; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.75rem; }\n  .timeline-wrap { position: relative; padding: 12px 0 28px; }\n  .timeline-track { position: relative; height: 3px; background: #fff; border-radius: 2px; cursor: pointer; }\n  .timeline-progress { position: absolute; left: 0; top: 0; height: 3px; background: #f4c430; border-radius: 2px; transition: width 0.3s; pointer-events: none; }\n  .timeline-thumb { position: absolute; top: -7px; width: 17px; height: 17px; background: #f4c430; border-radius: 50%; border: 2px solid #fff; transform: translateX(-50%); cursor: grab; transition: left 0.3s; z-index: 10; }\n  .timeline-thumb:active { cursor: grabbing; }\n  .event-markers { position: absolute; top: -5px; left: 0; right: 0; pointer-events: none; }\n  .event-marker { position: absolute; width: 3px; height: 13px; background: rgba(255,255,255,0.5); border-radius: 1px; transform: translateX(-50%); }\n  .event-marker.active { background: #f4c430; }\n  .timeline-labels { position: absolute; bottom: 0; left: 0; right: 0; }\n  .tl-label { position: absolute; transform: translateX(-50%); color: #fff; font-size: 9px; white-space: nowrap; }\n  .tl-label-start { position: absolute; left: 0; color: #fff; font-size: 9px; }\n  .tl-label-end { position: absolute; right: 0; color: #fff; font-size: 9px; }\n\n  .filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0.75rem 1rem; }\n  .filter-btn { border: 1px solid #6a9ec8; color: #c8dff0; background: transparent; padding: 4px 14px; border-radius: 20px; font-size: 12px; cursor: pointer; transition: all 0.2s; }\n  .filter-btn.active { background: #c0392b; border-color: #c0392b; color: #fff; }\n\n  .pagination { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0.25rem; }\n  .pag-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #6a9ec8; background: transparent; color: #c8dff0; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }\n  .pag-btn:disabled { opacity: 0.3; cursor: default; }\n  .dots { display: flex; gap: 5px; align-items: center; }\n  .dot { width: 7px; height: 7px; border-radius: 50%; background: #6a9ec8; cursor: pointer; transition: background 0.2s; }\n  .dot.active { background: #c0392b; }\n  .pag-count { color: #c8dff0; font-size: 12px; min-width: 36px; text-align: center; }\n\n  .event-card { margin: 0.5rem 1.5rem 1.5rem; background: #f5f0e8; border-radius: 8px; padding: 1.25rem 1.5rem; position: relative; border: 2px solid #c0392b; transition: opacity 0.2s; }\n  .event-year { color: #8a7a6a; font-size: 12px; margin-bottom: 0.4rem; }\n  .event-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 0.75rem; }\n  .event-dot { width: 36px; height: 36px; border-radius: 50%; background: #c0392b; border: 3px solid #8a1a0a; flex-shrink: 0; }\n  .event-title { color: #1a1a1a; font-size: 18px; font-weight: 700; }\n  .event-category { position: absolute; top: 1.25rem; right: 1.5rem; color: #2a6099; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }\n  .event-desc { color: #3a3a3a; font-size: 13px; line-height: 1.6; margin-bottom: 0.75rem; }\n  .why-box { background: #c0392b; border-radius: 6px; padding: 0.75rem 1rem; }\n  .why-label { color: #f5c0b0; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; margin-bottom: 0.25rem; }\n  .why-text { color: #fff; font-size: 13px; line-height: 1.5; }\n  .cat-badge { display: inline-block; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-bottom: 0.5rem; }\n<\/style>\n\n<div class=\"page\">\n  <div class=\"header\">\n    <div class=\"stars-top\">\n      <span class=\"star sm\">\u2605<\/span><span class=\"star sm\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star sm\">\u2605<\/span><span class=\"star sm\">\u2605<\/span>\n    <\/div>\n    <div class=\"header-eyebrow\">Boston &amp; America 250 \u00b7 1775\u20132026<\/div>\n    <h1>250 Years in Boston<\/h1>\n    <p>Key moments in Boston history that echo through modern culture &amp; society<\/p>\n    <div class=\"stars-bot\">\n      <span class=\"star sm\">\u2605<\/span><span class=\"star sm\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star sm\">\u2605<\/span><span class=\"star sm\">\u2605<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"timeline-section\">\n    <div class=\"explore-label\">Explore by year<\/div>\n    <div class=\"timeline-wrap\">\n      <div class=\"timeline-track\" id=\"track\">\n        <div class=\"timeline-progress\" id=\"progress\"><\/div>\n        <div class=\"event-markers\" id=\"markers\"><\/div>\n    \n        <div class=\"timeline-thumb\" id=\"thumb\"><\/div>\n      <\/div>\n      <div class=\"timeline-labels\" id=\"labels\"><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"filters\" id=\"filters\">\n    <button class=\"filter-btn active\" data-cat=\"all\">All events<\/button>\n    <button class=\"filter-btn\" data-cat=\"Revolution\">Revolution<\/button>\n    <button class=\"filter-btn\" data-cat=\"Civil rights\">Civil rights<\/button>\n    <button class=\"filter-btn\" data-cat=\"Immigration\">Immigration<\/button>\n    <button class=\"filter-btn\" data-cat=\"Urban change\">Urban change<\/button>\n    <button class=\"filter-btn\" data-cat=\"Labor\">Labor<\/button>\n    <button class=\"filter-btn\" data-cat=\"Resilience\">Resilience<\/button>\n    <button class=\"filter-btn\" data-cat=\"Founding\">Founding<\/button>\n  <\/div>\n\n  <div class=\"pagination\">\n    <button class=\"pag-btn\" id=\"prev\">\u2039<\/button>\n    <div class=\"dots\" id=\"dots\"><\/div>\n    <span class=\"pag-count\" id=\"pag-count\">1 \/ 15<\/span>\n    <button class=\"pag-btn\" id=\"next\">\u203a<\/button>\n  <\/div>\n\n  <div class=\"event-card\" id=\"event-card\">\n    <div class=\"event-year\" id=\"ev-year\"><\/div>\n    <div class=\"event-category\" id=\"ev-cat\"><\/div>\n    <div class=\"event-title-row\">\n      <div class=\"event-dot\"><\/div>\n      <div class=\"event-title\" id=\"ev-title\"><\/div>\n    <\/div>\n    <div class=\"event-desc\" id=\"ev-desc\"><\/div>\n    <div class=\"why-box\">\n      <div class=\"why-label\">Why it matters today<\/div>\n      <div class=\"why-text\" id=\"ev-why\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\nconst events = [\n  { year: 1775, title: \"The Lantern Signal at Old North Church\", cat: \"Revolution\", desc: \"Two lanterns hung in the steeple of Old North Church warned colonial militiamen that British troops were moving by sea toward Concord. Paul Revere's midnight ride followed, igniting the first battles of the American Revolution at Lexington and Concord.\", why: \"Boston's identity as the 'Cradle of Liberty,' heritage tourism, and civic pride all stem from this single night's signal.\" },\n  { year: 1776, title: \"Evacuation of British Forces\", cat: \"Revolution\", desc: \"After Washington fortified Dorchester Heights with artillery captured at Ticonderoga, British troops and loyalists evacuated Boston by sea on March 17, 1776 \u2014 a day still celebrated as Evacuation Day in Suffolk County.\", why: \"Evacuation Day remains a public holiday in Boston, blending civic history with St. Patrick's Day celebrations.\" },\n  { year: 1822, title: \"Boston Incorporated as a City\", cat: \"Founding\", desc: \"After decades as a town governed by open meetings, Boston was officially incorporated as a city with a mayor and aldermen. Josiah Quincy became its first effective mayor, transforming the waterfront with Quincy Market.\", why: \"The city's governmental structure and urban planning legacy trace directly to this founding moment.\" },\n  { year: 1831, title: \"The Liberator Founded\", cat: \"Civil rights\", desc: \"William Lloyd Garrison published the first issue of The Liberator from Boston, launching one of the most influential abolitionist newspapers in American history and making Boston a center of the anti-slavery movement.\", why: \"Boston's long tradition of civil rights activism and its role in social justice movements begins here.\" },\n  { year: 1845, title: \"Irish Famine Migration\", cat: \"Immigration\", desc: \"The Great Famine drove hundreds of thousands of Irish immigrants to Boston between 1845\u201355, transforming the city's demographics. East Boston and South Boston became Irish enclaves that shaped the city's culture for generations.\", why: \"Boston's Irish-American identity \u2014 from politics to St. Patrick's Day \u2014 descends from this wave of immigration.\" },\n  { year: 1872, title: \"The Great Boston Fire\", cat: \"Resilience\", desc: \"A massive fire destroyed 65 acres of downtown Boston, burning over 770 buildings. The city rebuilt rapidly, modernizing its building codes and infrastructure in ways that shaped the modern downtown grid.\", why: \"Boston's capacity for reinvention after disaster became a template for urban resilience nationwide.\" },\n  { year: 1897, title: \"First Boston Marathon\", cat: \"Resilience\", desc: \"The Boston Athletic Association held the first Boston Marathon, inspired by the revival of the Olympic Games. It is now the world's oldest annual marathon and a defining civic ritual for the city.\", why: \"The marathon became a symbol of Boston's spirit \u2014 most powerfully after the 2013 bombing and the 'Boston Strong' response.\" },\n  { year: 1918, title: \"Red Sox Win the World Series\", cat: \"Resilience\", desc: \"The Boston Red Sox won the World Series, their fifth championship \u2014 then went 86 years without another title, giving rise to the legend of the 'Curse of the Bambino' after Babe Ruth was sold to the Yankees.\", why: \"The Sox's 2004 comeback and championship ended the curse, uniting generations of Boston fans in one of sports history's great moments.\" },\n  { year: 1919, title: \"Boston Police Strike\", cat: \"Labor\", desc: \"Boston police officers went on strike over wages and union recognition, leading to riots and looting. Governor Calvin Coolidge's firm response \u2014 'There is no right to strike against the public safety' \u2014 propelled him to national prominence.\", why: \"The strike set precedents for public employee labor relations and launched a presidency that shaped 1920s America.\" },\n  { year: 1935, title: \"Rise of the Boston Political Machine\", cat: \"Founding\", desc: \"James Michael Curley's colorful, populist tenure as mayor defined Boston machine politics for decades, championing working-class Irish Catholics against the Brahmin establishment and building lasting public works.\", why: \"Boston's fiercely neighborhood-based political culture and distrust of elite institutions trace to this era.\" },\n  { year: 1958, title: \"Urban Renewal and the West End Demolition\", cat: \"Urban change\", desc: \"The city demolished the tight-knit West End neighborhood, displacing thousands of residents to build the Government Center complex. The episode became a national case study in the failures of mid-century urban renewal.\", why: \"Boston's vigilant neighborhood preservation movement and community activism were born directly from this trauma.\" },\n  { year: 1966, title: \"Edward Brooke Elected to Senate\", cat: \"Civil rights\", desc: \"Massachusetts elected Edward Brooke to the U.S. Senate, making him the first Black American popularly elected to that body. His election signaled a shift in the politics of a state still wrestling with its racial contradictions.\", why: \"Brooke's career helped open pathways for Black political leadership in Massachusetts and nationally.\" },\n  { year: 1974, title: \"School Desegregation and Busing Crisis\", cat: \"Civil rights\", desc: \"Federal Judge Arthur Garrity ordered busing to desegregate Boston's public schools, triggering violent protests, particularly in South Boston and Charlestown. The crisis exposed deep racial fault lines in a supposedly liberal city.\", why: \"Boston's complex relationship with race, class, and neighborhood identity was fundamentally shaped by this painful chapter.\" },\n  { year: 2004, title: \"Red Sox Break the Curse\", cat: \"Resilience\", desc: \"The Boston Red Sox came back from 3\u20130 down against the Yankees in the ALCS and went on to sweep the World Series \u2014 their first championship in 86 years. The city erupted in celebration that unified generations.\", why: \"The 2004 championship became a touchstone for what it means to be a Boston fan, and a story of collective perseverance.\" },\n  { year: 2013, title: \"Boston Marathon Bombing and Boston Strong\", cat: \"Resilience\", desc: \"Two bombs near the finish line of the Boston Marathon killed three people and injured hundreds. The city's response \u2014 the rapid capture of the suspects and the rallying cry 'Boston Strong' \u2014 became a model for community resilience.\", why: \"Boston Strong transcended the city, becoming a national symbol of defiance and community solidarity in the face of terrorism.\" }\n];\n\nconst MIN_YEAR = 1775, MAX_YEAR = 2026;\nlet currentIndex = 0;\nlet activeFilter = 'all';\nlet filtered = [...events];\n\nfunction yearToPercent(y) { return (y - MIN_YEAR) \/ (MAX_YEAR - MIN_YEAR) * 100; }\nfunction percentToYear(p) { return Math.round(MIN_YEAR + p \/ 100 * (MAX_YEAR - MIN_YEAR)); }\n\nfunction buildMarkers() {\n  const m = document.getElementById('markers');\n  m.innerHTML = '';\n  events.forEach(e => {\n    const d = document.createElement('div');\n    d.className = 'event-marker';\n    d.style.left = yearToPercent(e.year) + '%';\n    m.appendChild(d);\n  });\n}\n\nfunction buildLabels() {\n  const lbl = document.getElementById('labels');\n  lbl.innerHTML = '';\n  const keyYears = [1775, 1832, 1872, 1919, 1958, 2004, 2026];\n  keyYears.forEach(y => {\n    const span = document.createElement('span');\n    span.className = 'tl-label';\n    span.style.left = yearToPercent(y) + '%';\n    span.textContent = y;\n    lbl.appendChild(span);\n  });\n}\n\nfunction updateThumb(idx) {\n  const ev = filtered[idx];\n  if (!ev) return;\n  const pct = yearToPercent(ev.year);\n  document.getElementById('thumb').style.left = pct + '%';\n  document.getElementById('progress').style.width = pct + '%';\n  document.querySelectorAll('.event-marker').forEach((m, i) => {\n    m.classList.toggle('active', events[i].year <= ev.year);\n  });\n}\n\nfunction renderEvent() {\n  const ev = filtered[currentIndex];\n  if (!ev) return;\n  document.getElementById('ev-year').textContent = ev.year;\n  document.getElementById('ev-cat').textContent = ev.cat;\n  document.getElementById('ev-title').textContent = ev.title;\n  document.getElementById('ev-desc').textContent = ev.desc;\n  document.getElementById('ev-why').textContent = ev.why;\n  updateThumb(currentIndex);\n  renderDots();\n  document.getElementById('pag-count').textContent = (currentIndex + 1) + ' \/ ' + filtered.length;\n  document.getElementById('prev').disabled = currentIndex === 0;\n  document.getElementById('next').disabled = currentIndex === filtered.length - 1;\n}\n\nfunction renderDots() {\n  const container = document.getElementById('dots');\n  container.innerHTML = '';\n  const max = Math.min(filtered.length, 13);\n  for (let i = 0; i < max; i++) {\n    const d = document.createElement('div');\n    d.className = 'dot' + (i === currentIndex ? ' active' : '');\n    d.addEventListener('click', () => { currentIndex = i; renderEvent(); });\n    container.appendChild(d);\n  }\n}\n\nfunction applyFilter(cat) {\n  activeFilter = cat;\n  filtered = cat === 'all' ? [...events] : events.filter(e => e.cat === cat);\n  currentIndex = 0;\n  renderEvent();\n}\n\ndocument.getElementById('filters').addEventListener('click', e => {\n  const btn = e.target.closest('.filter-btn');\n  if (!btn) return;\n  document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\n  btn.classList.add('active');\n  applyFilter(btn.dataset.cat);\n});\n\ndocument.getElementById('prev').addEventListener('click', () => { if (currentIndex > 0) { currentIndex--; renderEvent(); } });\ndocument.getElementById('next').addEventListener('click', () => { if (currentIndex < filtered.length - 1) { currentIndex++; renderEvent(); } });\n\nconst track = document.getElementById('track');\nconst thumb = document.getElementById('thumb');\nlet dragging = false;\n\nfunction getPercent(clientX) {\n  const rect = track.getBoundingClientRect();\n  return Math.max(0, Math.min(100, (clientX - rect.left) \/ rect.width * 100));\n}\n\nfunction seekToPercent(pct) {\n  const year = percentToYear(pct);\n  let closest = 0;\n  let minDist = Infinity;\n  filtered.forEach((e, i) => {\n    const d = Math.abs(e.year - year);\n    if (d < minDist) { minDist = d; closest = i; }\n  });\n  if (closest !== currentIndex) { currentIndex = closest; renderEvent(); }\n}\n\ntrack.addEventListener('click', e => { seekToPercent(getPercent(e.clientX)); });\nthumb.addEventListener('mousedown', e => { dragging = true; e.preventDefault(); });\ndocument.addEventListener('mousemove', e => { if (dragging) seekToPercent(getPercent(e.clientX)); });\ndocument.addEventListener('mouseup', () => { dragging = false; });\nthumb.addEventListener('touchstart', e => { dragging = true; });\ndocument.addEventListener('touchmove', e => { if (dragging) seekToPercent(getPercent(e.touches[0].clientX)); });\ndocument.addEventListener('touchend', () => { dragging = false; });\n\nbuildMarkers();\nbuildLabels();\nrenderEvent();\n<\/script>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\"><em>(Produced by: Audrey Owusu-Aikins, Jia Jing Zheng, Kat Lacourciere, Lillian Paige, and Shianne Charette. AI-generated by Claude)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We created a timeline of key moments in Boston history that echo through modern culture &amp; society. \u2605\u2605\u2605\u2605\u2605\u2605\u2605\u2605\u2605\u2605\u2605 Boston &amp; America 250 \u00b7 1775\u20132026 250 Years in Boston Key moments&hellip;<\/p>\n","protected":false},"author":1,"featured_media":121,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"_links":{"self":[{"href":"https:\/\/nehsjc.org\/eagle-eye\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nehsjc.org\/eagle-eye\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nehsjc.org\/eagle-eye\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nehsjc.org\/eagle-eye\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nehsjc.org\/eagle-eye\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":8,"href":"https:\/\/nehsjc.org\/eagle-eye\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/nehsjc.org\/eagle-eye\/wp-json\/wp\/v2\/posts\/20\/revisions\/123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nehsjc.org\/eagle-eye\/wp-json\/wp\/v2\/media\/121"}],"wp:attachment":[{"href":"https:\/\/nehsjc.org\/eagle-eye\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nehsjc.org\/eagle-eye\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nehsjc.org\/eagle-eye\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}