Fork of Fork of Fork of HTML Starter

100%

Fork of Fork of Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

Forked from Fork of Fork of HTML Starter

This example shows the calorie distribution of various foods using a pie chart, with a legend displaying each food's name and calorie count. It loads a CSV dataset from a GitHub gist using D3's `csv` function and renders the chart as SVG. The code uses `pie()` to compute arc data, `arc()` to generate the path segments, and `scaleOrdinal()` to assign categorical colors. Text labels and legend entries are added with `select()` and `append()`, while `format('.4~g')` formats the calorie values in the legend.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This interactive pie chart visualizes country-level data for 2022, loading CSV data from a GitHub gist via the `d3.csv` API. It uses D3 v7’s `pie()` and `arc()` generators to compute and draw SVG paths for each slice, with colors assigned by `scaleOrdinal` and `schemeCategory10`. Hovering over a slice or label changes its fill to orange, providing immediate feedback. The chart is rendered inside a static SVG container, with text labels positioned at arc centroids using `arcGenerator.centroid()`.

Mmukundakrishna.r@gmail.com

84% match

Loading thumbnail…

Fork of Fork of Pie Chart

This example shows the protein content of various cereals as a pie chart, with each slice labeled in the legend alongside its gram value. The chart reads CSV data from a GitHub gist using `d3.csv` (via `getData.js`), then renders SVG paths with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. Legends are appended as grouped rectangles and text, with values formatted using `d3.format`. The visualization is built with D3 v5, rendered entirely in SVG, and includes a red heading for emphasis.

Bbhargavarathod

84% match

Loading thumbnail…

Fork of HTML Starter

This example presents a pie chart showing the popularity of programming languages based on user counts fetched from a remote CSV file. It uses the D3.js v6 library, specifically the `d3.pie()` and `d3.arc()` functions to compute and draw the pie slices as SVG paths, with `d3.scaleOrdinal` providing categorical colors. A legend is generated alongside the chart, and title labels are added via SVG text elements. The visualization is built within a React framework but renders directly to SVG in the browser, with data loaded using `d3.csv`.

Ssahithya.voleti@gmail.com

83% match

Loading thumbnail…

Fork of HTML Starter

This example presents a pie chart of fruit types with their total weights derived from a CSV file hosted on GitHub. The visualization uses D3 v6 to compute the pie layout with `d3.pie()` and generate slices via `d3.arc()`, while `d3.rollup()` aggregates the raw weight data by fruit. Labels appear at each slice’s centroid showing the fruit name and total pounds, and a legend with color-coded rectangles identifies each category. The SVG rendering also includes custom axis titles for context.

Ssahithya.voleti@gmail.com

83% match

Loading thumbnail…

Fork of Fork of Pie Chart

This example visualizes the protein content in a cereal dataset as a pie chart, with each slice representing a cereal name and its corresponding protein grams. Using the d3.pie arc generator, the chart is rendered as SVG paths, while a custom legend displays each cereal name and its value. The code loads data from a GitHub gist via d3.csv, applies a categorical color scale from d3.scaleOrdinal, and formats numbers with d3.format. The visualization is built with D3 v5, using SVG for rendering, and includes custom styling for legend text.

Ssitaramchallapalli

82% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example presents a health data visualization comprising three charts: a bar chart of Var1, a line chart showing Var2 over time, and a pie chart of Var3. It loads CSV data from a GitHub gist and uses D3.js v7 to render SVG elements. The bar chart maps data points to horizontal bars, the line chart uses scales and a line generator to plot the time series, and the pie chart uses `d3.rollups` to aggregate categories. The code includes axes and margin conventions for the line chart.

Aakhilakura@my.unt.edu

81% match

Loading thumbnail…

Fork of Fork of Pie Chart

This example shows the amount of protein in grams present in various cereals as a pie chart, with a legend identifying each cereal and its corresponding protein value. The visualization loads a CSV dataset from a GitHub gist using `d3.csv` and renders the chart as SVG. It uses `d3.pie` to compute the arc angles, `d3.arc` to generate the path segments, and `d3.scaleOrdinal` to assign colors from a fixed palette. A separate legend group is built by appending rectangles and text labels for each data entry.

Eeravellisaimeghana

81% match

Loading thumbnail…

Fork of Fork of HTML Starter 2

This visualization displays the CSS named colors as a pie chart, with each slice colored by its corresponding hex value and sized equally. The chart uses React to manage the async loading of CSV data from a GitHub gist, while d3’s `arc` and `pie` generators compute the SVG paths. The rendering leverages React DOM to mount the SVG elements, and the dataset contains 148 rows of color names and hex codes.

LLeonardo Baron

81% match