Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
NNita
Last edited Jun 19, 2025
Created on Jun 19, 2025
Forked from HTML Starter

This interactive visualization depicts a chronological timeline of events from the June 2025 Gaza crisis, sourced from a CSV file of reported incidents. It combines an upper scrollable overview with a detailed lower timeline, using color-coded, clickable elements to explore event specifics like actors, descriptions, and impact. Built with D3.js v7, the visualization employs DOM manipulation and event handlers to assign lanes, manage tooltips, and synchronize selections between the two views, updating a details panel upon user interaction.

AI-generated description

Gaza Crisis Timeline

This interactive visualization presents a timeline of events during the Gaza crisis in June 2025.

Features

  • Top timeline showing all events in a compact, scrollable view
  • Interactive timeline showing major events
  • Detailed event information on click
  • Color-coded events based on event type
  • Tooltip previews for easy navigation

Data Source

The data comes from a collection of reported events during the Gaza crisis in June 2025.

How to Use

  1. Click on any event in either the top timeline or the main timeline to view details
  2. Hover over events to see titles
  3. Scroll through the detailed information below the timeline
  4. Use the top scrollable timeline for quick navigation between dates

Technologies Used

  • D3.js for data visualization
  • HTML/CSS/JavaScript
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This interactive D3.js timeline visualizes key events in the Israel-Hamas conflict from October 2023 onward, plotting color-coded markers along a chronological axis. The visualization categorizes events into attacks, ceasefires, humanitarian incidents, military operations, and political developments, using `d3.scaleOrdinal` for color mapping and `d3.scaleTime` for the date axis. Users can hover to highlight markers and click to view detailed event information drawn from the accompanying CSV data. The code leverages d3.csv for data loading and d3.select for DOM manipulation within the HTML/CSS interface.

NNita
90% match
Loading thumbnail…

Fork of Fork of Gaza-Israel Conflict Timeline

This interactive timeline visualization presents a chronological series of Gaza-Israel conflict events, initially filtered to June 2025 and sortable by date order. Text-based search filters events by name, actors, or description, while a toggle expands the view to display the complete timeline. The code uses D3.js v7’s `d3.csv` to parse data into JavaScript objects, computes an impact score from text keywords, and dynamically generates styled DOM elements using `selectAll` and `enter()`. A CSS vertical line, nodes, and hover animations provide the visual timeline structure.

NNita
86% match
Loading thumbnail…

Fork of Gaza-Israel Conflict Timeline

This example shows a subset of a larger Gaza-Israel conflict timeline, filtering the loaded CSV data to display only events from June 2025 in reverse chronological order. It renders a vertical, D3.js-driven card layout where each entry lists the formatted date, event title, key actors, and description as static text blocks. The code uses `d3.csv` to parse the data, `d3.select` to bind the filtered array to DOM elements, and appends styled `div` elements for each field within a timeline container.

NNita
84% match
Loading thumbnail…

Fork of Fork of Fork of Gaza-Israel Conflict Timeline

This interactive timeline visualizes significant Gaza-Israel conflict events from June 2025, using a vertical scrollable list of cards. Each card displays the event date, title, key actors, description, reported deaths, and impact, with high-impact events highlighted in red. The visualization loads CSV data with `d3.csv`, applies search filtering and date sorting via JavaScript, and uses D3.js enter-update-exit pattern with CSS transitions for animations. The implementation includes a dynamic impact score calculation based on severe terms and casualty counts.

NNita
84% match
Loading thumbnail…

Fork of Fork of Fork of Israel-Hamas Conflict Timeline

This interactive vertical timeline visualizes major events in the Israel-Hamas conflict from October 2023 through mid-2025, using a linear layout from bottom to top where newer events appear lower. Event markers are color-coded by category—attacks, ceasefires, humanitarian events, military operations, and political events—with 2025 events emphasized with larger, gold-stroked circles. Built with D3 v7, the visualization uses `d3.scaleTime`, `d3.axisLeft`, and `d3.csvParse` to process CSV data, with hover tooltips, a details panel, and responsive resizing. The timeline highlights the 2025 and June 2025 time periods with background shading to draw attention to recent escalations.

NNita
84% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Israel-Hamas Conflict Timeline

This interactive visualization presents a vertical, animated timeline of major Israel-Hamas conflict events from October 2023 through June 2025, using D3.js v7 to render SVG circles and labels along a time axis. Coded events are color-coded by category (attacks, ceasefires, humanitarian, military, political), with 2025 events highlighted with gold strokes and larger markers, while June 2025 events receive red-orange emphasis. The chart uses a d3.scaleTime y-axis with weekly ticks, d3.csvParse to load the data file, and tooltip interactions on hover. Clicking any event marker displays its full description in the details panel below.

NNita
83% match
Loading thumbnail…

Fork of Fork of Israel-Hamas Conflict Timeline

An interactive snake-like timeline charts the Israel-Hamas conflict from October 2023 onward, with color-coded event markers grouped into attack, ceasefire, humanitarian, military, and political categories. Clicking a marker reveals detailed event information in a side panel. Built with D3.js v7, the visualization positions markers along a sinusoidal curved path using `d3.line` and `d3.curveCardinal`, with data loaded from CSV and interactivity powered by SVG event handlers and transitions.

NNita
82% match
Loading thumbnail…

Fork of HTML Starter

This timeline presents a chronological history of the Israel-Hamas conflict from 1987 to the present, organizing events into pre- and post-2007 periods. Each conflict includes context, events, and impact. The interactive implementation uses HTML, CSS, and vanilla JavaScript to enable expandable conflict sections, with click handlers toggling an `expanded` class and appending expand/collapse indicators. Smooth scrolling is enabled for anchor links, while responsive styling adjusts layout for smaller screens.

NNita
82% match