fresh block

100%

✓ Published0🌍 Public

Last edited May 1, 2018

Created on May 1, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

82% match

Loading thumbnail…

Shapes: Pie Example

This example displays a small pie chart built from an array of seven numeric values, with each slice sized proportionally to its value. The visualization uses D3 v4’s `d3.scaleOrdinal` with the `d3.schemaCategory10` color palette to assign distinct colors to each segment. The chart is rendered as an SVG element, where the arcs are generated using the `d3.arc` API with an inner radius of zero and an outer radius of ten, and angles are computed via `d3.pie()` before being passed to the arc’s start and end angle functions. The data itself is hard-coded in the script, and the code originates from a gist by DanielAguirre, structured for use with Blockbuilder.

DDanielAguirre

82% match

Loading thumbnail…

fresh block

This example displays a simple line chart of six numeric values from a static array, rendered as a single green path on a blank SVG canvas. The visualization uses D3 v4 to create linear scales for the x- and y-axes, with the x domain set to the indices of the data points and the y domain scaled from zero to the maximum value. An SVG path is drawn using `d3.line()` with coordinates mapped through those scales. The chart does not include axes, labels, or gridlines, showing only the raw trend line.

KKacieW

82% match

Loading thumbnail…

pie

A pie chart displays eight proportional segments with values from the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, 21). D3 v4’s `d3.pie()` computes the arc angles, while `d3.arc()` generates the SVG path for each slice with an inner radius of 0 and outer radius of 100. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns categorical colors, and white strokes separate the segments. The chart is rendered as static SVG elements, translated to position (200, 200) within the viewport.

EEranM6

81% match

Loading thumbnail…

fresh block

This visualization displays five data points as circles positioned along a chart area. The circles are colored either purple or green depending on whether their value exceeds 100, with each point’s x and y coordinates equal to its data value. Built using d3.v4, the code appends an SVG canvas to the page and populates it with circles via the `.data().enter().append()` pattern. The fill color is determined by a conditional function, and the circle radius and positions are set using SVG attributes. The data is a hardcoded array in the script.

LLisaPicado

81% match

Loading thumbnail…

D3 Piechart - with labels

This example shows a pie chart of fruit quantities, with each slice labeled by its fruit name. The chart uses the `d3.pie()` generator to compute arc data, and `d3.arc()` with inner and outer radii to create a donut-like shape. Slice paths are rendered in orange with white strokes, and labels are positioned at each arc’s centroid using `arcGenerator.centroid(d)`. Data is hard-coded in the JavaScript, and the visualization is drawn as SVG within an HTML page, styled by CSS.

SSubhendu Karmakar

81% match

Loading thumbnail…

fresh block

A simple bar chart displays five hardcoded values—10, 30, 15, 20, and 100—as vertical rectangles. The chart uses D3 v4’s selection and `append` API to create SVGs directly: `d3.select("body").append("svg")` builds the canvas, then `.selectAll("rect").data(data).enter()` generates bars whose height, y-position, and opacity are derived from each data value. Text labels repeat the same numbers below each bar using `d3.selectAll("text")`, with fixed styling for font size and monospace family. All geometry and styling are set via SVG attributes and styles, with no axes or gridlines present.

GGregory-Howard

81% match

Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of a categorical variable, using colored slices to represent each category's share of the whole. The example renders a fixed dummy dataset (`{a: 9, b: 20, c:30, d:8, e:12}`) as SVG paths, with each slice's angle determined by `d3.pie` and its geometry drawn via `d3.arc`. Colors come from `d3.scaleOrdinal` with a manually specified palette, and the chart is centered within a 450×450 pixel canvas. The code uses the D3.js v4 library, appending the visualization to a `<div>` and styling slices with black strokes and 0.7 opacity.

Hhanulik.ondrej@gmail.com

80% match