Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aadgramigna
Last edited Feb 9, 2017
Created on Feb 9, 2017

A pie chart displays the percentage distribution of values from a CSV file, with each slice labeled by its share of the total. The visualization uses D3 v4’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute angles, draw SVG paths, and assign a categorical color palette. Labels are positioned via `labelArc.centroid` and formatted with `d3.format`. Data is loaded asynchronously with `d3.csv`, and the chart is rendered as SVG centered on a 960×500 canvas.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example shows a donut chart that visualizes categorical data as percentage-labeled arcs, with each slice colored from a seven-color ordinal scale. The visualization is built with D3 v4, using `d3.pie` to compute arc angles, `d3.arc` for both the filled slices and their labels, and `d3.scaleOrdinal` for coloring. Data is loaded from a CSV file via `d3.csv`, with values parsed to numbers and percentages calculated relative to the total. The SVG rendering positions labels using `labelArc.centroid`, and the chart is centered on a 960×500 canvas.

Aadgramigna
90% match
Loading thumbnail…

fresh block

This example shows a simple pie chart visualizing three data values (10, 20, 100) as proportional slices. The chart uses an SVG rendering with D3 v4, creating arcs with a white stroke separation. Colors are assigned via a categorical ordinal scale with a muted three-color palette. The pie layout uses `d3.pie` with null sorting, while `d3.arc` defines the slice geometry, keeping the label text commented out. The visualization is static, with the data hardcoded in the script.

KKacieW
89% match
Loading thumbnail…

fresh block

A donut chart displays the age distribution of a population from a CSV file, with seven categorical age groups shown as colored arcs and white labels. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate the SVG paths, while `d3.scaleOrdinal` assigns a categorical color palette. Labels are positioned using `d3.arc` centroids, and the chart is centered within a 960×500 SVG canvas. Data is loaded asynchronously via `d3.csv`, and each arc’s fill color corresponds to its age category.

Aarcox80
85% match
Loading thumbnail…

fresh block

A pie chart displays the percentage of men whose highest level of education is a bachelor’s degree, broken down by age group from 18 to 75 years and over, based on data from Table_1M.csv. Each slice is labeled with the age range and its corresponding percentage of the total. The visualization uses d3.pie to compute the arc angles, d3.arc for the SVG path geometry, and d3.scaleOrdinal for the categorical color palette. The chart includes a title and uses d3.csv to load the dataset.

Aadgramigna
84% match
Loading thumbnail…

fresh block

This visualization displays the distribution of advanced degree fields using a pie chart, with each slice representing the frequency of a field in the dataset. The chart is rendered as an SVG using D3 v4, with colors assigned via `d3.scale.ordinal` and the `d3.schemeCategory20b` palette. The data comes from `adv-inc-avg.csv`, loaded through `d3.csv`, and the pie layout is generated with `d3.pie` and drawn using `d3.arc`. Slices are filled based on the field name, with white strokes separating them.

Aajayk1931
84% match
Loading thumbnail…

fresh block

This example shows the age distribution of a population as a donut chart, with each slice labeled by its age bracket and colored using an ordinal scale. The visualization is rendered as SVG using D3 v4, applying `d3.pie` to compute the arc angles and `d3.arc` to generate the paths and label positions. Data is loaded from a local CSV file with population counts per age group, and the chart centers itself in an 960×500 viewport. The code uses D3’s data join to append arc groups, paths, and text elements.

Aadamverdin
83% match
Loading thumbnail…

fresh block

This example presents a donut chart displaying the age distribution of a population, with each slice colored and labeled by age group. The chart is created using D3 v4, employing the `d3.pie` function to compute arc segments and the `d3.arc` API for rendering both the chart's path and label positioning. Data is loaded from a CSV file with columns for age and population, and the ordinal color scale assigns distinct colors to each category. The visualization renders as an SVG element, with white text labels placed at the centroid of each arc for clarity.

JJennKempCodes
83% match
Loading thumbnail…

fresh block

A simple bar chart displays the numeric values from a two-column CSV file, with each bar’s length proportional to the `y` value. The chart uses D3 v4’s `d3.scaleLinear` to map data to pixel widths, and appends `rect` and `text` elements within grouped `g` containers. Data is loaded via `d3.csv` and coerced to numbers using a custom `type` function. The bars are vertically stacked, with each row’s height fixed at 20 pixels, and the chart’s total height adjusts based on the number of data rows.

Aadgramigna
82% match