Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter

✓ Published0🌍 Public
Bboinapallyhimaja657@gmail.com
Last edited Mar 27, 2025
Created on Mar 27, 2025
Forked from D3 Starter

This example visualizes tip distribution in a restaurant dataset by smoker status, showing a pie chart with colored slices labeled inside each segment. The chart loads tab-separated data via `d3.dsv` from a GitHub gist, then uses `d3.rollups` to aggregate total tips per category. Slice geometry is computed with `d3.pie()` and `d3.arc()`, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors. SVG text elements provide titles, axis labels, and a legend, all rendered within a 600×600 viewport.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This pie chart visualizes the distribution of smokers versus non-smokers in a tips dataset. It uses d3.pie and d3.arc to generate SVG path slices, with a d3.scaleOrdinal color scale distinguishing the two categories. The chart includes labeled slices showing counts, plus a legend built from SVG rect and text elements. Data is loaded asynchronously via d3.csv from a GitHub gist, and nested grouping with d3.nest calculates category frequencies.

Bboinapallyhimaja657@gmail.com
82% match
Loading thumbnail…

Fork of D3 Starter

This pie chart visualizes the distribution of runs scored by individual cricket players, with each slice labeled by player name and colored via an ordinal scale. The chart is rendered as an SVG using D3.js v7, fetching CSV data from a GitHub Gist and parsing it with `d3.csvParse`. A `d3.pie` layout computes slice angles, while `d3.arc` generates the path geometry, and an interactive tooltip appears on hover for additional detail.

Ssdarsi2404@gmail.com
81% match
Loading thumbnail…

Fork of D3 Starter - vijq2(pie chart)

A pie chart visualizes the total exam score contribution for each grade category (A–D) using data from a 120-row CSV file. The D3.js v7 code loads the data, aggregates scores by category with `d3.rollup` and `d3.sum`, and renders slices via the `d3.pie` and `d3.arc` generators. Interactive tooltips appear on hover, displaying each category's total and letter label. A legend maps colors from `d3.scaleOrdinal` with the Tableau10 scheme, and the SVG output is white-stroked.

Vvijaysaichigullapally1@gmail.com
81% match
Loading thumbnail…

Fork of D3 Starter

This pie chart displays the distribution of geometric shapes grouped into four categories—Round, Triangle, Quadrilateral, and Polygon—based on their number of sides. The visualization loads a CSV file containing shape properties such as area and perimeter, then uses d3.csv to parse the data and d3.rollups to aggregate counts per category. Slices are rendered using d3.pie and d3.arc, with colors assigned via d3.scaleOrdinal and d3.schemeSet2. A legend is appended manually to the SVG, and the chart updates based on the selected value mode defined in the code.

Bbalaaswitha@gmail.com
81% match
Loading thumbnail…

Fork of HTML Starter

This reusable scatter plot visualizes the relationship between total bill and tip amounts from the tips dataset. D3 v7 defines a `scatterPlot()` function that implements `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for day-of-week coloring, plus `d3.axisBottom` and `d3.axisLeft` for ticks. The SVG rendering includes semi-transparent circles, axis labels, and a custom legend built with `selection.append`. The chart uses getter/setter methods for width, height, and data accessors.

Mmadalahyndavi123@gmail.com
80% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic pie chart built with D3 version 7, rendering four slices as SVG paths. It uses the `d3.pie()` layout to compute angular data from a simple array of numbers, and `d3.arc()` to generate the path geometry. The chart is centered on a 500×500 SVG canvas, with each slice filled by a color function. The code also includes a linked video tutorial and is styled as a starter template for learning D3.

NNigel
79% match
Loading thumbnail…

Fork of Hello VizHub

This example displays a D3.js pie chart that visualizes the distribution of insurance records by region, rendered as SVG with an accompanying legend and interactive tooltips. The code loads CSV data from a GitHub-hosted dataset using `d3.csv`, aggregates region counts with `d3.rollup`, and constructs the pie with `d3.pie` and `d3.arc`. Hovering over a slice highlights it, triggers a tooltip showing the category and value, and applies categorical colors from `d3.scaleOrdinal` and `d3.schemeCategory10`.

Kkotha.shiva@btech.christuniversity.in
79% match
Loading thumbnail…

Fork of Fork of D3 Starter

This example shows the distribution of social media posts across platforms with a pie chart, displaying the number of posts per platform. The visualization computes platform counts from a CSV file using `d3.rollup`, then renders slices with `d3.pie` and `d3.arc`, filling each segment with a color from `d3.scaleOrdinal` and `d3.schemeTableau10`. Platform labels are positioned at each slice’s centroid. The SVG is created with D3 v7, and the chart includes a bold title, with a white stroke separating the slices.

Yyazneshpara2@gmail.com
79% match