Skip to main content
SimilarExport ZIP
100%

Lockdown Timeline

✓ Published0🌍 Public
Kkfhujosefsson@dons.usfca.edu
Last edited Apr 24, 2025
Created on Apr 24, 2025

This visualization displays a timeline of three pandemic lockdown events, using a horizontal axis to mark dates in March and December 2020. It encodes each event as a point on the timeline, with annotations providing the location and nature of the lockdown. The SVG is constructed with D3.js v7, using `d3.scaleTime` for the time axis, `d3.axisBottom` with custom tick values and formatting, and `d3.timeParse` to convert date strings. Annotations appear via appended SVG groups at calculated positions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

COVID-19

This interactive D3.js visualization displays COVID-19 metrics over time for selected countries, allowing viewers to toggle between confirmed cases, deaths, and recoveries via two dropdown menus. The line chart uses a time-based x-axis and a linear y-axis, with a single red, blue, or green line rendered per selection. Data is loaded from a CSV file, processed by nesting and grouping entries by date, and filtered by country. The visualization uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for smooth curves.

WW9183907
71% match
Loading thumbnail…

Playing with D3 and Gantt

This interactive Gantt chart visualizes the timeline of COVID-19-related events across American countries, using a horizontal bar layout to show each nation’s start and end dates. The view includes a main chart with labeled lanes and a mini overview, linked by a brushX selection tool that filters the time range, while a vertical line marks the current date. Built with D3 v6, the example uses scaleTime, scaleLinear, axisBottom, and brushX APIs, rendering as SVG with animated updates and tooltips. Data is hardcoded in a JavaScript module, with countries like Argentina and Brazil having distinct intervals.

FFelipe Maion
70% match
Loading thumbnail…

Covid-19 Time Series(I Forked)

This example shows the global spread of confirmed COVID-19 cases across countries from January 22, 2020, to the present day. A date slider lets viewers scrub through time, updating the size of orange circles on a world map to reflect the reported case count per location, with hover tooltips showing country-level details. The visualization uses D3.js for map rendering with `d3.geoPath` and `geoMercator`, `d3.scaleSqrt` for circle sizing, and `d3-zoom` for interaction. Data comes from Johns Hopkins University, loaded via CSV, with countries drawn from TopoJSON and animated transitions between dates.

AAdrianTNare
70% match
Loading thumbnail…

COVID-19

This D3.js visualization shows the progression of COVID-19 cases, deaths, and recoveries over time for a selected country. Users choose a status metric and country via dropdown menus, and the chart displays a smooth line chart of that metric against observation dates. The code uses D3 v5 methods like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. Data is loaded from a CSV file and aggregated by country and day using `nest` and a custom `groupByDay` function.

WW9183907
70% match
Loading thumbnail…

Visualization Labels

This visualization displays global COVID-19 death totals over time as a line chart, using a logarithmic y-axis to accommodate the wide range of values. Built with React and D3 v7, it renders SVG elements including an axis with gridlines and a labeled path. The chart includes descriptive text labels for the title, x-axis, and y-axis, with data sourced from the CSSE COVID-19 time series dataset. The code uses D3’s `scaleTime`, `scaleLog`, `line`, and `axisBottom`/`axisLeft` APIs to construct the visualization.

BBen Brophy
69% match
Loading thumbnail…

d3 choropleth map

This interactive choropleth map visualizes the spread of COVID-19 cases across countries over time, using an animated timeline that cycles through daily data from January to July 2020. The map renders world country boundaries as SVG paths using the Eckert5 projection, with each country’s fill color dynamically updated based on its reported case count for the currently displayed date. Built with D3 v3, it leverages `d3.geo.path`, `d3.geo.eckert5`, `d3.geo.graticule`, TopoJSON for geographic data, and a CSV dataset, while a play button and date label drive the sequential animation.

Aashpradhan01123
69% match
Loading thumbnail…

Zoomable Timeline

This zoomable timeline visualizes time-series data across multiple scales, allowing users to explore yearly, weekly, and daily granularities. Built with D3 version 6, it uses axis utilities like `d3.axisTop` and `d3.utcTime` intervals to dynamically adjust tick density based on zoom level. The example provides a reset button and a slider to control the number of years displayed, with the SVG chart updating through a custom timeline function that manages grid lines and formatted labels.

CClaudioTM
69% match
Loading thumbnail…

Working with Time

This scatter plot visualizes COVID-19 data, showing the daily increase in positive cases (y-axis) against time (x-axis) as a series of circular marks. The visualization uses React to render SVG elements, with D3 v5 scales including `scaleTime` and `scaleLinear` to map data to coordinates. The code employs `d3.csv` for data loading from a GitHub-hosted CSV file, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Each circle includes a native SVG `<title>` element for tooltips displaying formatted dates, and the chart is styled with the Poppins font.

Aanduskong
69% match