Skip to main content
SimilarExport ZIP
100%

pie chart

✓ Published0🌍 Public
Llohitsai62@gmail.com
Last edited Oct 26, 2025
Created on Oct 26, 2025
Forked from HTML Starter

This interactive pie chart displays the distribution of electric-vehicle charging stations across cities, with a dropdown menu to switch between metrics: charging ports, daily users, monthly energy, and average charge time. Built with D3 v7, it loads data from a text file, aggregates values by city using `d3.rollup`, and renders SVG slices with `d3.arc`. Hovering reveals a tooltip with percentages, while labels show city names and shares. Animated transitions update the chart when the metric changes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

area chart

This interactive area chart visualizes EV charging station metrics—charging ports, average charge time, daily users, and monthly energy—across station IDs. Built with D3 v7, it renders a smooth area path with an overlaid orange line and circular points, all using SVG. A dropdown menu lets users switch between metrics, triggering transitions that update the axes, grid, and data points. Hovering over a point reveals a tooltip with city details and the selected metric’s value, with data loaded from a remote CSV file.

Llohitsai62@gmail.com
83% match
Loading thumbnail…

line chart

This interactive line chart displays EV charging station metrics across stations, letting users toggle between charging ports, average charge time, daily users, and monthly energy consumption via a dropdown menu. The visualization uses D3 v7 to load CSV data from a GitHub gist, sort stations by ID, and render an orange line with red point markers. Smooth transitions animate point position updates when switching metrics, while hover tooltips reveal station details. The chart includes gridlines, axis labels, and a cleaned axis without domain lines.

Llohitsai62@gmail.com
82% match
Loading thumbnail…

pie chart ICE-7

This chart displays monthly electricity usage for a household over 24 months, using a line with circular markers to show seasonal peaks in summer and winter. Built as a reusable D3 v7 component in SVG, it employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` for rendering, with `d3.axisBottom` and `d3.axisLeft` for labeled axes and gridlines. The component exposes a public API including `.update()` for redrawing with new data, reading from a CSV file with `date` and `value` columns. A hover tooltip provides interactive feedback.

Vvydeeshm@gmail.com
79% match
Loading thumbnail…

SG

A scatter plot shows the relationship between energy output and monthly users for EV charging stations. Each circle represents a station, with color encoding city and size encoding the number of charging ports. The visualization uses D3.js v7 with SVG rendering, loading data from a gist URL and parsing it with `d3.csvParse`. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while point size uses `d3.scaleSqrt` and color uses `d3.scaleOrdinal` with `d3.schemeTableau10`. A tooltip displays station details on mouseover.

Sshreelasya.bezawada@gmail.com
78% match
Loading thumbnail…

pie for 7 SDV

This example visualizes global electric vehicle stock values for 2012 as a pie chart, with each region labeled directly on the arcs and a legend displaying region names alongside their numeric values. The chart is rendered as an SVG using D3 v7, employing `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with `schemeCategory10`, and `d3.csv` to load the data from a GitHub gist. The visualization uses `d3.select` to append the pie paths and text labels, with a light blue background and dark blue title specified in the CSS.

BBlueT
77% match
Loading thumbnail…

ANSWER1

This interactive pie chart shows the distribution of bike stations by municipality, with each slice labeled and colored. The visualization is built with D3 v6 and uses `d3.rollup` to group and count stations from a CSV file, then `d3.pie` and `d3.arc` to generate the slices. Hovering over a slice reveals a tooltip with the municipality name and station count. The chart renders as SVG with smooth opacity transitions for the tooltip, and the layout is centered using a translation on the SVG group element.

NNsaranya08
77% match
Loading thumbnail…

pie

This pie chart displays the categorical sum of a numeric value, with interactive controls to select the category and value columns from a CSV/TSV dataset. Small slices below a configurable minimum share are grouped into an “Other” slice, and the chart updates with animated transitions. Built with D3 v7, it uses `d3.dsvFormat` for automatic delimiter detection, `d3.rollup` for aggregation, and `d3.arc` for rendering each slice as an SVG path. Hovering reveals a tooltip with the exact value and percentage share. The data is fetched from a remote gist file.

Sshreelasya.bezawada@gmail.com
77% match
Loading thumbnail…

activity7.1_q1

This pie chart shows the 2023 share of US electricity generation by energy source, using a color-coded slice for each source with percentage labels and a legend. Built with D3 v7, it loads data from a provided CSV and uses `d3.pie()` and `d3.arc()` to compute slice geometries, rendered as SVG paths with hover tooltips. A total of 560×540 pixels accommodates the pie on the left and a legend on the right, with decorative axis titles for context. The chart is responsive via a `viewBox` and uses `d3.scaleOrdinal` for categorical colors.

Mmohanalaharic@gmail.com
77% match