demo-multiple

100%

✓ Published0🌍 Public

Last edited Nov 23, 2016

Created on Nov 23, 2016

This visualization shows the number of fatal accidents by hour of day, split into separate lines for different weather conditions. The code loads weather2.csv, nests the data by weather type and hour, then sums the fatal counts for each group using d3.nest and rollup. Multi-line paths are drawn with d3.svg.line, colored dynamically using d3.scale.category10. A time scale on the x-axis and linear y-axis are defined with d3.time.scale and d3.scale.linear, with axes rendered via d3.svg.axis.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

70% match

Loading thumbnail…

Multi Line Chart

This multi-line chart displays time-series data of deaths across multiple categories. The visualization uses D3.js v6 to render SVG paths, with each line representing a data series loaded from a remote CSV file. The chart includes axes with date and measurement scales, and each line is paired with a ghost-line overlay that responds to mouseover and mouseout events. These interactions trigger animated transitions that highlight the selected line and its label by changing stroke color, opacity, and width, while the y-axis is labeled "Deaths (in thousands)".

Ccwcu

69% match

Loading thumbnail…

"How do the main contributing factors for accidents vary over the years?"

This visualization explores how the main contributing factors for vehicle accidents change over time, using a dataset from a public gist. It displays the number of accidents for each factor across monthly intervals, with a color-coded legend and an animated timeline. The chart is rendered as an SVG using D3.js v4, featuring interactive axes and a draggable handle to scrub through different time periods. The code leverages D3's animation capabilities to smoothly transition between data points as the user navigates the timeline.

DDeepakMaran

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

68% match

Loading thumbnail…

Multiple lines

This example visualizes a week of temperature readings from multiple cities using multiple colored lines, with a legend identifying each city. The chart uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `nest()` to group data by city, and `line()` with `curveBasis` for smooth paths. A categorical color scale assigns distinct strokes, and a custom `colorLegend` function renders the legend. Data is loaded from a CSV file via `d3.csv`, with axes from `axisBottom` and `axisLeft`.

RRoger Yu-Hsiang Lo

68% match

Loading thumbnail…

fresh block

This example visualizes multiple time-series lines from a weather dataset, with each line representing a different category (`symbol`) and showing how a price-like value changes over time. The visualization uses D3 v3 to load CSV data, parse date strings with `d3.time.format`, and render the lines using `d3.svg.line`. A categorical color scale (`d3.scale.category10`) assigns distinct colors to each line dynamically, and the lines are drawn on an SVG canvas with a time-based x-axis and linear y-axis. The code nests the data by symbol using `d3.nest`, then appends a separate path for each group, highlighting the trend patterns across categories.

DDarienLiang

67% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization tracks cumulative COVID-19 death counts across multiple countries over time, using a multi-line chart that plots deaths against days since the first reported case. The chart includes a draggable vertical line that, when positioned at a specific day, reveals the death toll for each country at that point in time. The code uses D3 v5 APIs including `nest()`, `scaleLinear`, and `line` with `curveBasis` to generate the paths, while a custom `colorLegend` module displays the categorical color scale using `scaleOrdinal` and `schemeCategory10`. Data comes from the included CSV files `data01.csv` and `data02.csv`.

Iinroadings

67% match