Skip to main content
SimilarExport ZIP
100%

Pie chart for line chart

✓ Published0🌍 Public
EElisaDnr
Last edited Jan 9, 2018
Created on Jan 9, 2018

This example overlays a pie chart on top of a line chart, showing the distribution of accident causes (categories nb_0 through nb_9) at a selected time, specifically 0015. The pie chart is generated from a local JSON file, `trajet_accident.json`, and rendered using D3 v4’s `d3.arc`, `d3.pie`, and `d3.scaleOrdinal` APIs. The SVG is appended to a dedicated `#pie` div, positioned absolutely over the chart. Values are displayed as percentages with two decimal places, omitting zero-value slices. The chart uses conventional margins and standard D3 utilities like `d3.json` for asynchronous data loading.

AI-generated description

This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3883245'>Line Chart</a>

forked from <a href='http://bl.ocks.org/ElisaDnr/'>ElisaDnr</a>'s block: <a href='http://bl.ocks.org/ElisaDnr/4fdaa27d7b1914fce00122bcc4dde37d'>Line Chart with pie chart</a>

forked from <a href='http://bl.ocks.org/ElisaDnr/'>ElisaDnr</a>'s block: <a href='http://bl.ocks.org/ElisaDnr/d0d72cdd2d5443f9a93d4a31f6904e0a'>Line Chart with pie chart json</a>

forked from <a href='http://bl.ocks.org/ElisaDnr/'>ElisaDnr</a>'s block: <a href='http://bl.ocks.org/ElisaDnr/2f318e04bb95c3952741ab4e5681131c'></a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Line Chart with pie chart json

This example shows the number of traffic accidents per 15-minute time interval, with each data point rendered as a clickable circle. Clicking a circle displays a pie chart of accident severity distributions in a separate div, while the selected point is highlighted in red. The line chart uses d3-dsv for JSON parsing, d3-scale for time and linear scales, d3-axis for axes, and d3-shape for the line path. The pie chart is generated and removed dynamically on each click.

EElisaDnr
85% match
Loading thumbnail…

Pie chart TT

This example presents a simple pie chart built with D3.js (v4), visualizing a small static dataset of four numeric values. The chart is rendered as SVG within an 800x700 viewport. The code uses the `d3.pie()` layout generator to compute arc segments and the `d3.arc()` function to draw the resulting paths. Each slice is filled with a distinct color from a predefined array. The implementation also highlights direct manipulation of the `d3.arc()` API by logging arcs generated with both computed and constant angle/radius parameters, demonstrating how the path data is constructed.

Hhanulik.ondrej@gmail.com
75% match
Loading thumbnail…

Pie Chart

A pie chart shows the top 10 causes of death in 2013, with each slice labeled in thousands using `d3.arc` and `d3.pie`. The chart is rendered as SVG with `d3.select` and `d3.scaleOrdinal` assigning colors from a fixed array. Data is loaded as CSV from a GitHub gist, and a legend lists each country alongside a colored square and its death count. Text formatting uses `d3.format` with the `~4g` specifier.

Nnagarjuna1968
75% 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
74% match
Loading thumbnail…

ICE - 7 Pie Chart

A pie chart displays the distribution of accident rates across different countries, with each slice labeled with its percentage value. The visualization uses a legend to list countries with their corresponding values and color-coded swatches. The chart is built with D3 v5, using the `pie`, `arc`, and `scaleOrdinal` functions to generate arcs and assign colors from a custom palette. Data is loaded asynchronously from a CSV URL, and the code applies `format('.4~g')` to display tick values.

SSharmilaChowdhari
74% match
Loading thumbnail…

Pie Chart

A pie chart displays five categorical values as proportional, colored arcs with hover highlighting and percentage labels. The chart uses d3.layout.pie to compute arc angles and d3.svg.arc to generate SVG paths, with an ordinal color scale for fills. Hovering translates the arc group outward via a transition, while labels rotate to align with each segment’s midpoint. The visualization is built with d3.v3 and renders entirely in SVG.

11Cr18Ni9
73% 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
73% match
Loading thumbnail…

Pie Chart

This pie chart visualizes the percentage breakdown of nutritional components, such as carbohydrates, proteins, and fats, using interactive slices with hover effects that display exact values via tooltips. A legend on the right side highlights corresponding slices when hovered, dimming non-related arcs. Built with D3 v7, the chart uses the `pie` and `arc` functions to generate the layout and `scaleOrdinal` with `schemeTableau10` for colors. Transitions and opacity changes create a smooth, interactive experience for exploring the data.

Ttejasviteegala@my.unt.edu
73% match