Progress Map ES6

100%

Progress Map ES6

✓ Published0🌍 Public

Last edited Oct 3, 2020

Created on Aug 19, 2020

This interactive visualization displays the assembly progress of an aircraft, where each component is colored on a red-yellow-green scale based on its percentage of completion. Users can manually adjust each part’s progress through sliders or text inputs, or randomize all values, while a legend maps colors to percentages. Built with D3 v5, it renders the aircraft as SVG paths from a structured data file, includes zoom and pan via `d3.zoom`, and animates updates with `transition().duration()`. The color scale uses `d3.interpolateRdYlGn`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Dashboard ES6

A dashboard with KPI cards and an animated multi-line chart, rendered in SVG with D3 v5. Users filter KPIs and select projects from dropdowns, triggering updates to the card displays and the line series (planned, earned, and actual values). The chart uses D3 scales, axes, and transitions, with a legend, and Bootstrap styles the interface, while Font Awesome provides icons.

Mmaxime-plantard

68% match

Loading thumbnail…

Fork of Fork of Main Viz | Protype Dev

This example presents a prototype visualization with a central radar chart surrounded by quadrant-based annotations and interactive elements. Using D3.js v5, it renders SVG graphics with linear scales for coordinate mapping, arc generators for circular segments, and custom gradient definitions to color each quadrant. The data is loaded from a CSV file of car productions, while the layout incorporates multiple side panels for supplementary content. The visualization demonstrates advanced SVG manipulation, including axis removal, custom path generation, and gradient styling through D3's selection and data-binding methods.

EErik L

67% match

Loading thumbnail…

Average Circle

The visualization shows failure times for air-conditioning equipment in two aircraft, presented as concentric circles radiating from the center of an SVG canvas. A dropdown menu lets viewers switch between the first and second aircraft datasets, triggering animated transitions where each circle’s radius scales proportionally to the square root of its value. A persistent yellow circle highlights the mean failure time, while white circles represent individual data points. Built with D3 v5, the code uses `scaleLinear`, `transition`, and custom `dropDownMenu` logic to handle the interactive updates. Data comes from Proschan (1993) as cited in Davison and Hinkley (1997).

RRubens

67% match

Loading thumbnail…

Progress Events

This example visualizes the progress of an asynchronous request as a circular gauge with a dark foreground arc filling a gray background track, alongside a percentage label. The data is fetched from a GitHub API endpoint, and the gauge animates smoothly by interpolating progress values. The code uses `d3.json` to create a request object, registers a "progress" event listener with `.on`, and updates the arc by setting its end angle through `arc.endAngle`. The process runs in SVG, with animation handled via `d3.transition` and `d3.interpolate`. Once the request completes, the gauge scales down via a transition.

Mmbostock

67% match

Loading thumbnail…

Visualizing Percentages

Three SVG progress indicators—a rounded bar, a donut, and a gauge—display the same 35% value in a React-based dashboard. The bar’s fill width and the donut’s arc length are computed by multiplying the total width or circumference by `progress`. The gauge uses a d3 `arc` generator with start and end angles mapped to the progress fraction. All indicators use a shared `VizContainer` SVG wrapper, with D3’s `timeFormat` computing the current day of the year.

IIan Newby

67% match

Loading thumbnail…

Fork of Flight Map

This visualization presents a world map with animated flight paths between continents, using a Mercator projection created with `d3.geoMercator()`. The map is rendered as SVG paths via `d3.geoPath()`, with each intercontinental link colored differently and its stroke width proportional to monthly passenger counts. A slider allows users to select a month (1–12), updating the path widths accordingly from CSV data files. Hovering over a path reveals its exact value via a tooltip, and the map itself uses `d3.json()` to load world GeoJSON data. The code relies on D3 v4 APIs including `d3.select`, `d3.transition`, and `d3.event` for interaction, with styling applied through CSS.

RRudi Poepsel Lemaitre

66% match

Loading thumbnail…

Table of Progress

Rows of hexadecimal identifiers appear in a table-like list, each with a progress bar that fills from left to right over a random duration before the row collapses and is removed. New rows are created asynchronously, simulating a dynamic queue of tasks. The visualization uses D3.js v3 with chained transitions: `transition().duration().ease("linear")` animates the bar’s width, while a second transition delays the row’s height collapse and removal. Data is generated procedurally via `Math.random()` for durations and creation intervals, with no external dataset.

Mmbostock

66% match

Loading thumbnail…

customized Scatter plot

This interactive scatter plot visualizes the relationship between maximum velocity (Vmax) and range for a dataset of airplanes, using SVG circles to represent individual aircraft. The chart is built with React and D3 v5, employing `scaleLinear` for both axes and custom `AxisBottom` and `AxisLeft` components to render ticks. Hovering over a circle reveals its precise Vmax value via a native SVG `<title>` tooltip. The visualization reads from a CSV file fetched through D3’s `csv` loader, with styled axis labels and a clean, minimal aesthetic defined through CSS classes.

Rrsulli4

66% match