Fork of Playing with D3 and Gantt

100%

Fork of Playing with D3 and Gantt

✓ Published0🌍 Public

Last edited Aug 3, 2022

Created on Aug 3, 2022

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.

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

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

83% match

Loading thumbnail…

Fork of D3 Starter

This bar chart displays country values using D3 v7, with each country represented as a vertical bar on an SVG canvas. The visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick rendering. Data comes from a static JavaScript array in `constants.js`. The chart includes rotated x-axis labels and an additional scrollbar implemented via a `foreignObject` element, though the scrollbar’s interaction is limited within the fixed-width SVG.

RRishav Nandi

75% match

Loading thumbnail…

Fork of Fork of PIE CHART

This example visualizes country-level data over time as a multi-line chart, with each line representing a country’s values across a series of years. The chart is rendered in SVG using D3 v7, fetching data from a CSV file via `d3.csv`. It employs `d3.scaleLinear` for both axes, `d3.line` to generate the paths, and `d3.axisBottom` and `d3.axisLeft` for tick marks, with rotated x-axis labels for readability. Each country’s line is colored using `d3.schemeCategory10`.

Mmukundakrishna.r@gmail.com

75% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example demonstrates an animated, reusable D3 scatter plot built with the reusable chart pattern. It visualizes country-level time series data, plotting each country's values for two different years on the x and y axes, with circles positioned using linear and band scales. The chart updates every two seconds by randomizing one country's data, triggering a re-render to illustrate dynamic data binding and transitions. Rendered as SVG with axes and circles, it emphasizes the modularity of D3's data-join and the flexibility of reusable chart components.

Mmukundakrishna.r@gmail.com

75% match

Loading thumbnail…

Fork of D3 Starter

A horizontal bar chart displays population figures for nine countries, sourced from an embedded CSV file. The bars render as SVG rectangles, with each country's population scaled linearly along the x-axis and country names positioned using a band scale on the y-axis. The code uses d3.csv to load the data, d3.scaleLinear for the width mapping, d3.scaleBand for categorical spacing, and d3.select to append the rectangles.

Mminaadel6600

75% match

Loading thumbnail…

Fork of GapMinder (CP341 Style)

This visualization presents a fork of the classic GapMinder chart, displaying country-level GDP per capita against average lifespan across time. The left panel shows a scatterplot of circles scaled by population, while the right panel traces each country’s lifespan trajectory over years. Users control the year via a slider and filter by continent through a dropdown. Built with React and D3 v6, the code uses `d3.scaleLog`, `d3.axisBottom`, and `lineGenerator` for SVG rendering. Data comes from a JSON file, with hover tooltips and historical annotations displayed via custom event handlers.

Kkaijavanzante@gmail.com

75% match

Loading thumbnail…

Fork of MedData - TimeLine TT

This fork of MedData displays a Gantt chart timeline for task scheduling, with colored bars representing task categories like development, coding, and promotion across a time scale. The visualization uses d3.timeScale and d3.timeFormat to map dates, while d3.scaleLinear with interpolateHcl generates the color gradient. The SVG rendering includes a grid background, task rectangles with rounded corners, and text labels positioned within each bar. A separate line chart component appears to be present in the code structure.

Ppplomith

75% match