Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Dec 14, 2022

Created on Dec 14, 2022

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example shows a pie chart of student marks distribution, with each slice labeled by the student’s name. It loads CSV data from a GitHub repository, parses the marks as numbers, and uses `d3.pie()` to compute slice angles and `d3.arc()` to generate SVG path shapes. The chart applies a categorical color scale (`d3.schemeCategory10`) and positions labels using `arc.centroid()`. The visualization renders in SVG within a 500×400 viewport, using D3 v7 loaded via an import map.

Ccsesomarajuaswini@gmail.com

86% match

Loading thumbnail…

Fork of D3 Starter

This pie chart visualizes the proportional breakdown of a CSV dataset by category, using Value1 as the numeric weight for each slice. Built with D3 v7, it renders as an SVG with slices colored via a categorical color scheme, and each slice is labeled with its category name. The chart includes a legend that maps colors back to categories, generated from the same data. The code constructs the pie using `d3.pie()` and draws arcs with `d3.arc()`, calculating slice paths and centroids for label placement.

Kkmuddana@gitam.in

83% match

Loading thumbnail…

Fork of Step 1 - A Basic Pie Chart

This example shows a basic pie chart created with D3 v4, rendering an SVG visualization of four labeled data categories with proportional slice sizes and distinct colors from the Category 20b scheme. The code loads D3 via UNPKG, uses `d3.select`, `d3.arc`, `d3.pie`, and `d3.scaleOrdinal` to generate the chart dynamically from a JavaScript array of label-count pairs. The repository also includes a separate Canvas-based pie chart implementation in `pie.js`, which draws segments and labels using context methods like `arc`, `fillText`, and `rect`, with data defined in a Module.

Mmrharis1

82% match

Loading thumbnail…

Fork of D3 Starter

This example renders four circles in an SVG, positioned diagonally according to a hardcoded data array of integers. The visualization demonstrates basic D3 v7 workflow, using `d3.select` to access the SVG element and the `.data()` and `.enter()` methods to create circles from the array. Each circle’s center is offset by 10 times its data value along both the x- and y-axes, with a fixed radius of 40. The code relies on the D3 library loaded via a CDN, with the `bundle.js` file containing the custom JavaScript logic. The page itself has a large 13em font-size style, though it does not affect the graphic output.

OOleg Levy

82% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic D3.js v7 setup with an SVG canvas, showing two outlined columns: a left column with a static blue circle and text label, and a right column that maps an array of seven numeric values to green circles of varying radii. It uses `d3.select` and the standard append/attr chain to construct the SVG structure, then applies `d3.scaleLinear` to map data domain [100,700] to a range of [1,10] for circle sizing. The right column’s circles are positioned linearly by index, while a text element is transformed and anchored. The code runs in a simple HTML file with D3 loaded via unpkg.

PPedram

81% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js starter template, rendering a single empty SVG rectangle on an 800x400 canvas. The visualization shows how to set up a basic D3 project with an HTML5 document structure and inline SVG. The code loads D3 version 7.0.4 from the unpkg CDN and uses JavaScript to define a simple graphic element, providing a foundation for building more complex data visualizations with the D3 framework.

Aanoptic

81% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js v7 starter template. The page displays the text "Hello D3 version 7" in the body, then appends a div and an SVG element to the DOM. The code defines a small array of three point objects but does not render them as visible shapes, as the selection logic contains no data join or attributes. It uses D3’s selection and append methods, loading the library from unpkg.com, with the HTML and JavaScript split across separate files.

JJake B

81% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter template that renders a row of five red circles on an SVG canvas. The code uses D3 v7 APIs, including `d3.select` to access the SVG element, `d3.range` to generate an array of five fruit objects, and the data-join pattern with `.data()`, `.enter()`, and `.append()`. Each circle is positioned horizontally via a calculated `cx` attribute and vertically centered, with a fixed fill color and radius. The page loads D3 from a CDN and runs the script from a separate bundle file.

AAmeer Nuri

81% match