Skip to main content
SimilarExport ZIP
100%

piechart

✓ Published1🌍 Public
Jjsangepavu@umassd.edu
Last edited Mar 26, 2025
Created on Mar 26, 2025
Forked from Hello VizHub

This pie chart shows the distribution of Hubway bike-share stations across municipalities, using a color-coded SVG with a legend to identify each category. The chart is built with D3 v7, loading tab-separated station data via `d3.tsv` and aggregating counts with `d3.rollup`. It renders slices using `d3.pie` and `d3.arc`, with colors assigned through a `d3.scaleOrdinal` based on the `schemeSet2` palette. A legend is manually appended as SVG rectangles and text, and the visualization also includes placeholder X and Y axis labels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Answer1

This pie chart shows the distribution of bike-share stations across municipalities, with slice labels and a color-coded legend. Built with D3 v6, it loads CSV data from a GitHub-hosted hubway_stations file, uses `d3.rollups` to count stations per municipality, and applies `d3.pie()` and `d3.arc()` to generate the SVG paths. A `d3.scaleOrdinal` with `d3.schemeCategory10` encodes categories, while labels are positioned using `arc.centroid()`. The legend is appended separately, and all shapes render as SVG elements in a fixed-width layout.

NNsaranya08
90% 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
83% match
Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays the number of Hubway bike stations by municipality, with the x-axis listing municipalities and the y-axis showing station counts. The visualization loads data from a CSV file via `d3.csv` and processes it using `d3.rollup` to count stations per municipality. It renders the chart as an SVG with `d3.area` to create the filled path, `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and includes rotated axis labels. The chart is styled with rounded corners and a subtle shadow via CSS.

NNsaranya08
81% match
Loading thumbnail…

Piechart

This example presents a pie chart visualizing the quantity of fruits sold, with each slice labeled by its percentage of the total. The chart is rendered as an SVG within a VizHub project, loading data from a remote CSV file using `d3.csv`. The code leverages `d3.pie` and `d3.arc` to generate the slices, `d3.scaleOrdinal` with `schemeCategory10` for colors, and creates an HTML legend with colored swatches. The chart title and percentage labels appear directly in the SVG, with `d3.sum` used to compute totals.

NNagalakshmi Thota
77% match
Loading thumbnail…

pie chart

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.

Llohitsai62@gmail.com
77% match
Loading thumbnail…

Answer2

This interactive area chart displays the monthly count of Hubway bike-sharing trips over time, with data loaded from a remote TSV file. The visualization uses D3 v7’s `d3.rollups` to aggregate trip records by month and `d3.area` with a monotone curve to render the filled path. Hovering over any of the plotted circles triggers a tooltip showing the exact month and trip count. The SVG chart includes rotated time-axis labels and axis generators `d3.axisBottom` and `d3.axisLeft`.

NNsaranya08
76% match
Loading thumbnail…

Pie Chart of NYC Food Data

This pie chart visualizes the distribution of food orders by cuisine type from a Foodhub NYC delivery dataset. Slices are sized by order count, labeled with totals, and paired with a color-coded legend, showing a clear ranking of culinary preferences. The chart uses D3.js v7 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to group, sort, and render the data. The underlying data is loaded from a CSV file of order details, and the chart updates only after all records are parsed.

UUmarani Vemula
75% match
Loading thumbnail…

Fork of Hello VizHub

This pie chart visualizes the distribution of pizza orders by category, with each slice labeled with its count and a legend identifying the categories. The code loads data from a GitHub Gist CSV file using `d3.csv`, calculates category frequencies through manual aggregation, and renders the chart as SVG with `d3.pie` and `d3.arc`. Slices use a `d3.scaleOrdinal` color scale with `d3.schemeCategory10`, and labels are positioned via `arc.centroid`. The legend is built manually, mapping rectangles and text to each category.

Kkshravyak.2001@gmail.com
74% match