Fork of ICE-7 line chart

100%

Fork of ICE-7 line chart

✓ Published2🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

This line chart visualizes the number of traffic accidents by weather condition, using data from a CSV file loaded via d3.csv. The chart displays a monotone curve with circular markers for each weather category, along with an ordinal x-axis and linear y-axis. It is built with D3 v7, using scaleBand, scaleLinear, and d3.line with curveMonotoneX, rendered as SVG. The visualization includes rotated tick labels and a legend listing each weather type with its accident count.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This area chart displays the number of traffic accidents for each weather condition, with a smooth blue area and black outline. The visualization is built with D3 v5, using `scalePoint` for the categorical weather axis, `scaleLinear` for the count axis, and `curveBasis` to smooth both the `line` and `area` generators. Data is loaded from a CSV file hosted on GitHub and aggregated client-side by counting occurrences per weather type. The SVG output includes labeled axes with grid lines, though the x-axis labels for the longest weather condition names may be truncated.

Ppragnyal.mishra@gmail.com

92% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This visualization displays the number of accidents in the USA from 2010 to 2020 as an area chart, with a green filled region beneath a yellow line. The data is loaded from a CSV file via `d3.csv` and rendered as an SVG using D3 v5. The chart uses `scaleLinear` for both the x and y axes, `line` and `area` generators with `curveBasis` smoothing, and `axisLeft`/`axisBottom` for labeled ticks. The y-axis uses a `.3s` number format, and gridlines are drawn with red tick lines.

Bblikitha

81% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays annual car accident counts in India from 2009 to 2019, with the data loaded from a CSV file and rendered as an SVG. The visualization uses d3.scaleTime and d3.scaleLinear for the axes, while d3.line and d3.area with curveBasis generate a smooth line and filled region beneath it. Axis labels and tick formatting are handled via d3.axisBottom and d3.axisLeft, and the time axis is parsed with d3.timeParse.

RRamakanth771

81% match

Loading thumbnail…

ICE7

This visualization displays a scatter plot of traffic accident data, comparing Speed_Limit, Number_of_Casualties, Number_of_Vehicles, and Accident_Severity. The plot animates every two seconds, cycling through different columns on the x-axis while keeping Number_of_Casualties fixed on the y-axis, with axis labels updating dynamically. Using the d3.v6 library, the code employs `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom reusable `scatterPlot` module for SVG rendering. Data is loaded from a GitHub-hosted CSV file via `csv` and parsed with custom row handlers.

Ppragnyalipsa96@gmail.com

81% match

Loading thumbnail…

Fork of pie chart

This D3.js example visualizes traffic accident distribution by weather condition as an interactive pie chart. It loads CSV data from a GitHub gist, aggregates accident counts per weather category using `d3.rollups`, and renders SVG pie slices with labels and a legend. The chart uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with `schemeCategory10`, and a reusable `pieChart` function pattern with configurable width, height, and data properties. The visualization displays weather types directly on slices and provides a side legend with count values.

Ppragnyalipsa96@gmail.com

80% match

Loading thumbnail…

ICE

This animated scatter plot visualizes simulated traffic accident data, showing the relationship between the number of vehicles and two alternating x-axes: speed limit and driver experience. The reusable chart, built with D3 v7, uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.symbol` to render colored shapes representing weather and road type. Every three seconds, a `setInterval` callback switches the x-axis accessor, updating the title and re-rendering the SVG with smooth transitions. The data loads from a GitHub-hosted CSV file with numeric fields parsed for quantitative scaling.

Ppragnyalipsa96@gmail.com

80% 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

80% match

Loading thumbnail…

ice 7 area

This visualization shows the number of accidents per year from 2000 to 2010, combining a yellow line chart with a navy filled area beneath it. The chart uses D3 v5’s `scaleLinear` for both axes, `line` and `area` generators with a `curveBasis` smoothing, and `axisBottom` and `axisLeft` for labeled axes. Data is loaded from a remote CSV file using `csv`, and the SVG rendering is done within a 930x450 canvas, with axis labels placed via rotation and translation transforms.

SSreekarveeravelly

79% match