Skip to main content
SimilarExport ZIP
100%

Line Chart with pie chart json

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

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.

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>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Pie chart for line chart

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.

EElisaDnr
85% match
Loading thumbnail…

Line Chart

This line chart displays the number of road accidents per hour of the day, based on data from a CSV file of accident records. The x-axis encodes time in 15-minute increments over a 24-hour period, while the y-axis shows the accident count. The visualization uses d3.csv to parse the data, d3.timeParse to convert hour strings, and d3.scaleTime, d3.scaleLinear, and d3.line to render the SVG path with a steelblue stroke. The counts are aggregated by sorting and grouping hour values.

EElisaDnr
81% match
Loading thumbnail…

Car Accident Visualization

This interactive bar chart visualizes the frequency of collision details in car accidents, ranking causes from "Other Motor Vehicle" down to "In-Line Skater." Users can click buttons to add or remove bars, revealing progressively less common crash scenarios. Built with D3 v7 and React, the visualization uses `d3.scaleBand` and `d3.scaleLinear` for axes, with SVG rectangles and animations updating the chart dynamically. The data is hardcoded in JavaScript arrays, with axis labels and rotated tick text styled via CSS.

CChaoying Zheng
72% match
Loading thumbnail…

ice 7 line

This line chart displays accident counts per year from 2000 to 2010, using d3.csv to load the data and d3.scaleTime with d3.scaleLinear for the axes. The visualization renders as an SVG path generated by d3.line, with labeled axes and a title. Grid lines are drawn via d3.axisBottom and d3.axisLeft, while the line itself is styled with a navy stroke.

SSreekarveeravelly
70% 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
70% 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
70% match
Loading thumbnail…

Testing Pie Chart

This interactive dashboard combines a pie chart, bar chart, and line chart to display categorical and time-based data. The pie chart animates its inner radius using D3’s arc generators and transitions, with slices labeled by category. The line and bar charts use D3 scales, axes, and SVG paths to render trends and comparisons. All visualizations are built with D3 v2 and React, using SVG for rendering and animation.

Ssrinivasjavvadi
70% match
Loading thumbnail…

Untitled

This interactive bar chart displays road accident statistics across police stations, with a dropdown menu to switch between different data columns such as fatalities, injury severity, collision types, and day of the week. Built with D3 v3 and React, the visualization uses `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and SVG rectangles that smoothly animate via `transition().ease()` when the selected metric changes. Data is loaded from a CSV file, and hover tooltips reveal exact values per station.

Aachintyatripathi
70% match