Skip to main content
SimilarExport ZIP
100%

ghantt chart

✓ Published0🌍 Public
Ssannihitha.k23@gmail.com
Last edited Apr 25, 2024
Created on Apr 25, 2024
Forked from Hello VizHub

This donut chart visualizes the distribution of orders by state, using a pie chart where each slice represents a state's count. The chart is rendered with SVG and uses D3’s `pie` and `arc` functions to create the donut shape. Interactive tooltips appear on mouseover, displaying the state name and count. A legend on the right maps colors to states. Data is loaded from a remote CSV file via `d3.csv` and grouped using `d3.rollup`.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

DONUT CHART

This donut chart visualizes the distribution of orders by state, offering interactive tooltips for state-specific counts and a color-coded legend. It loads data from a remote CSV file, grouping rows by state using d3.rollup. The visualization uses d3.pie and d3.arc to generate SVG path slices, with mouseover and mouseout events to control an HTML tooltip. A d3.scaleOrdinal with the schemeCategory10 palette assigns colors, while d3.csv with d3.autoType handles data parsing, and the legend is constructed with SVG rect and text elements.

Ssannihitha.k23@gmail.com
89% match
Loading thumbnail…

Fork of Pie Chart (with labels) with d3

This example visualizes the top 10 US states by GDP as a donut chart with interactive tooltips. The visualization uses d3.arc and d3.pie to generate SVG paths, while d3.scaleOrdinal assigns categorical colors. Hovering over a segment highlights it and displays a tooltip showing the state name and value. Data is loaded from a CSV file using d3.csv, with the top ten rows selected for display in a React component using hooks.

SSweetierams
76% match
Loading thumbnail…

Donut Chart v2

A donut chart displays country-level aggregated values, ranking the United States highest, followed by the United Kingdom and Germany, with each slice labeled and connected via polylines. Built with D3 v4 and SVG, it uses `d3.pie()` for slice generation, `d3.arc()` for inner and outer radii, and `d3.scaleOrdinal()` for colors. Data is loaded from `data.json` via `d3.json()`, and labels are positioned dynamically based on slice angles.

MMaeva B
76% match
Loading thumbnail…

Untitled

This example uses d3.pie and d3.arc to render a matrix of donut charts, one per U.S. state, with each donut’s area scaled via d3.scaleSqrt to reflect the state’s total population. The arcs within each donut represent age brackets, colored using d3.scaleOrdinal. Data is loaded from a CSV with d3.csv, and the `selection.each` method provides simultaneous access to parent state data and child age data. The SVG charts are sized dynamically based on each state’s population sum.

VVito
76% match
Loading thumbnail…

Donut Multiples

Donut multiples display age-group population proportions for each U.S. state as small pie charts, with a legend mapping seven age brackets to distinct colors. The charts are generated from a CSV file parsed via d3.csv, with d3.scale.ordinal assigning colors, d3.layout.pie computing arc angles, and d3.svg.arc rendering the donut segments as SVG paths. Each state’s label appears centered within its donut, highlighting proportional differences across regions.

Mmbostock
76% match
Loading thumbnail…

chart

This bar chart visualizes order totals by state, with data loaded from a CSV file. It sorts the states descending by total value and displays each state's total directly above its bar. Built with D3 v7, the visualization uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.axisBottom` and `d3.axisLeft` for the tick marks. The chart labels the axes "State" and "Total" and includes a title.

Ssannihitha.k23@gmail.com
76% match
Loading thumbnail…

Pie Chart

This pie chart visualizes the population distribution across U.S. states, using a categorical color scale for each state. The D3.js code loads CSV data from a Gist, calculates each state's share via the `pie` layout, and renders SVG slices with `arc` paths. A legend translates each sector's value into abbreviated format (e.g., "K" for thousands), while the chart is generated with `scaleOrdinal` for colors and D3's `format` for tick labels.

Pprajoth0405
76% match
Loading thumbnail…

project task1

This interactive bar chart visualizes the distribution of order counts by state, using D3.js v7 to render SVG bars sorted in descending order. The code loads CSV data, aggregates counts per state with a reduce operation, and displays axes with rotated state labels for readability. Users can observe the relative frequency of orders across different states, with the bar height encoding the total count for each location. The visualization employs d3.scaleBand, d3.scaleLinear, and d3.axisBottom to create the chart, which reads from a local OrdersCleaned.csv dataset.

Ssannihitha.k23@gmail.com
76% match