Playing with D3 and Gantt

100%

Playing with D3 and Gantt

✓ Published2🌍 Public

Last edited Apr 29, 2021

Created on Apr 25, 2021

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.

AI-generated description

Studing D3 trying to build a Gantt Graph with Brush in Vizhub <br>

References:<br>

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Playing with D3 and Gantt

This interactive Gantt chart visualizes time intervals for a list of countries across a shared timeline. It displays each country as a horizontal lane with bars representing its start and end dates, alongside a smaller overview chart for navigation. The visualization uses D3 v6 with SVG rendering and includes a brush component for selecting time ranges, which updates the main chart’s visible extent. Data is hardcoded in the `getData.js` module, and the implementation relies on D3 scales, axes, and transition-based animations.

Ffilipwydra

83% match

Loading thumbnail…

Fork of Playing with D3 and Gantt

This fork of “Playing with D3 and Gantt” presents an interactive Gantt chart tracking date ranges for a list of countries. It displays horizontal bars on a timeline, with a brushed mini-map below for zooming and a vertical current-line indicator. The visualization uses D3 v6 APIs including `scaleTime`, `scaleLinear`, `brushX`, `axisBottom`, and SVG transitions. Country data is hardcoded in a separate module, and the chart responds to window resizing while supporting mouseover tooltips via appended HTML divs.

Mmxd

80% 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

79% match

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

78% 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

77% match

Loading thumbnail…

D3.js v7+ Example

This dashboard visualizes COVID-19 data across multiple countries using linked SVG charts, including a world choropleth map with zoom and tooltips, bar charts for latest case counts, a ranked list of the top six infected nations, and a multi-line time-series graph with a brushable context view. Built with D3 v7, it employs d3.geoPath, d3.geoMercator, d3.scaleThreshold, d3.brushX, and d3.zoom for interactive exploration. Data is loaded from local TSV/CSV files, with animations and transitions updating the visualizations dynamically.

FFarhaan Qazi

76% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for ten countries, sorted from highest (USA) to lowest (Argentina). The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. Custom axis formatting converts large numbers using the `format` function, replacing 'G' with 'B' for billions. The bars and tick labels are styled with linear gradients defined in SVG defs, while the x-axis includes a custom label and tick marks that extend across the plot area. Data comes from a CSV file loaded via `d3.csv`.

Ttolik518

76% match

Loading thumbnail…

3D chart

This 3D bar chart visualizes the top 10 countries most affected by COVID-19, with each country’s total case count represented as a vertical bar. The example uses D3 v5 alongside the d3-3d and d3-x3d libraries to generate the interactive scene, which is rendered through X3DOM in the browser. Data is loaded asynchronously from a CSV file, then parsed and passed to a `d3.x3d.chart.barChartMultiSeries()` component attached to a chart holder div. The page includes custom CSS styling for the heading and body layout.

Bbhargavarathod

76% match