Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart (ICE 7)

✓ Published2🌍 Public
Sskmriyaz0786@gmail.com
Last edited Oct 25, 2025
Created on Oct 25, 2025

This visualization shows BMW car sales volumes aggregated by year from an external CSV dataset, displaying a line chart with circular data points. The code uses D3 v7 with an SVG rendering approach, applying `d3.csv` for data loading, `d3.rollup` for aggregation, and `d3.line` to generate the orange line path. Interactive tooltips appear on mouseover using DOM events and a styled div, while grid lines and axes are created with `d3.axisLeft` and `d3.axisBottom`. The implementation includes linear scales for positioning and an animation showcase via transitions on tooltips.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Area Chart (ICE-7)

This example visualizes BMW car sales by year using an area chart with a blue filled region, a yellow line, and orange circular points. The chart aggregates annual sales data from a CSV file via `d3.csv`, then rolls up values with `d3.rollup`. It uses `d3.area` with `curveMonotoneX` to generate the filled shape and `d3.line` for the stroke. SVG rendering includes grid lines, axes, and a hover tooltip that updates through mouse events. The animation capability stems from D3 transitions applied to the tooltip’s opacity.

Sskmriyaz0786@gmail.com
89% match
Loading thumbnail…

Fork of ICE-7

This visualization displays car sales data over time as a line chart, with years on the x-axis and sales figures on the y-axis. It uses D3 v5 to load CSV data, parse dates with d3.timeParse, and render scales and axes via scaleTime, scaleLinear, axisBottom, and axisLeft. The line is drawn using the d3.line generator, with the SVG path styled in orange. The chart includes labeled axes and uses margins to position the plot within the SVG canvas.

CCherukuriMilind
86% match
Loading thumbnail…

ICE_7_NIRUPAMA_LINECHART

This interactive line chart visualizes BMW car sales volume by year using D3.js v7. The chart loads CSV data from a GitHub gist and aggregates sales figures per year using d3.rollup and d3.sum. It renders an SVG line path with d3.line, along with axes, dashed gridlines, and circular data points. Hovering over each point triggers tooltip interactions using d3.transition and event handlers, displaying the year and formatted sales value. The visualization uses linear scales for both x and y axes to plot the trends.

NNirupama Karanam
85% match
Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart visualizes car sales at SA over time, using a dark background with red accents. The visualization encodes years on the x-axis and sales figures on the y-axis, with a single red line tracing the trend. Built with D3 v5, the code uses `d3.csv` to load remote data, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.line` to generate the path. Grid lines and labels are styled via CSS.

Sshabbab01
85% match
Loading thumbnail…

Fork of ICE-6 (Multi series chart)

This fork of ICE-6 displays BMW car sales data as a multi-series chart combining bar and line representations. The teal bars show average car price per year (rotated labels display values), while a red line with dots shows average mileage per year on a secondary right axis. The code loads CSV data from a GitHub gist, processes it in React state, then renders SVG using D3 v6 scales, axes, line generator, and selection APIs, with React managing the rendering lifecycle.

Sskmriyaz0786@gmail.com
84% match
Loading thumbnail…

Fork of ICE 7 Line Chart

This fork of an ICE 7 visualization displays yearly car sales in India from 2009 to 2019 as a single red line. The chart uses D3 v5's `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `line` to generate the path. Data is loaded from a CSV file, with year values parsed via `d3.timeParse`. Grid lines and colored axis labels enhance readability against a dark background.

Ssaivinay143
84% match
Loading thumbnail…

Fork of Fork of ICE 7 Line Chart

This example visualizes car sales in India from 2009 to 2019 using a single line chart. The chart plots sales figures against parsed dates, with red grid lines and a red line path connecting annual data points. The visualization uses d3.csv to load data from a GitHub gist, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the SVG path. It employs d3.axisBottom and d3.axisLeft with tick marks removed from the domain to create sparse gridlines. The chart is rendered entirely as SVG with custom CSS styling for text, ticks, and the line stroke.

Nnagamaheswar
83% match
Loading thumbnail…

Fork of Fork of Fork of ICE 7 Line Chart

This line chart shows car sales in India from 2009 to 2017, with the x-axis encoding the year and the y-axis encoding sales volume. The chart is rendered using D3 v5 with an SVG output, where scales are built with `scaleTime` and `scaleLinear`, axes are generated via `axisLeft` and `axisBottom`, and a smooth path is drawn using the `line` generator. Data is loaded asynchronously from a CSV file using `csv`, and the year values are parsed with `timeParse` before plotting. The grid lines and styled axis labels come from custom CSS, while the line path uses a distinct stroke color and width.

Aajaysonu
83% match