Fork of Fork of Fork of ICE7 - AREA CHART VEENA

100%

Fork of Fork of Fork of ICE7 - AREA CHART VEENA

✓ Published4🌍 Public

Last edited Apr 2, 2025

Created on Apr 2, 2025

Forked from Fork of Fork of ICE7 - LINE CHART VEENA

Five small multiples show monthly car sales per model in separate area charts, colored distinctly and outfitted with dots and hover tooltips. The code defines an `AreaChart` class using the D3 v7 API (`d3.scalePoint`, `d3.scaleLinear`, `d3.area`) to generate SVG paths and circles. Each chart's area path records total sales on mouseover, while each dot reveals the specific month and sales value, with hover effects changing fill and stroke color via CSS transitions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE7 - LINE CHART VEENA

Five side-by-side line charts compare monthly car sales for different models, with each chart using a distinct color and interactive dots that reveal model, month, and sales figures in a tooltip on hover. The visualization is built with D3 v7, using a reusable `LineChart` class that filters the dataset by model, scales the data with `d3.scalePoint` and `d3.scaleLinear`, and renders lines via `d3.line`. SVG axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while mouseover transitions animate the tooltip’s opacity.

Vveenachowdarykavuri@gmail.com

89% match

Loading thumbnail…

Fork of ICE 7 Area Chart

A fork of ICE 7 Area Chart visualizes car sales in India from 2009 to 2019. A red line traces yearly sales over a filled area, with a yellow-tinted grid and bold green axis labels. Using D3.js v5, the code applies `scaleTime` and `scaleLinear` to map years and sales values, while `line` and `area` generators with `curveBasis` create the smooth line and filled region. Data is loaded from a CSV via `csv()` and parsed with `timeParse`. The SVG is rendered through `axisLeft` and `axisBottom` for the axes.

DDivyaVellanki

85% match

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization combines a line chart and an area chart to display sales trends over time, with the area fill highlighting the magnitude of change. The chart uses a time-scaled x-axis and a linear y-axis with gridlines, and the line is smoothed using a basis curve. Built with D3 v5, the code creates SVG paths via the `line` and `area` generators, and loads its data from a CSV file containing population figures.

Bbindhureddy98

84% match

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This area chart displays car sales by year up to 2020, using a smooth basis curve to connect data points while filling the area beneath the line in green. The visualization employs d3's `scaleTime` and `scaleLinear` for axes, along with the `line`, `area`, and `curveBasis` generators to create the chart. Data is loaded from a CSV file hosted on GitHub, parsed with d3's time parsing, and rendered as SVG with custom axis labels and tick formatting.

VVenkata Rajashekar Reddy Chinthala

84% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of the ICE 7 area chart visualizes car sales in India from 2009 to 2019, combining a smoothed line and a filled area to show sales trends over time. The chart uses D3.js v5 with SVG rendering, leveraging `scaleTime` and `scaleLinear` for axes, `line()` and `area()` generators with `curveBasis` for smooth paths, and `csv` to load the data. Axis labels and gridlines are styled via CSS, with sales values formatted using `.3s` notation.

Mmounishnaidu96@gmail.com

84% match

Loading thumbnail…

Fork of Area Chart for ICE 7

This visualization displays car sales from 2001 to 2010 as a smooth, magenta-filled area chart with time-based x-axis and linear y-axis scales. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG output. The data is loaded from a CSV file via `csv`, with year values parsed into JavaScript `Date` objects and sales figures converted to numbers before generating the chart.

Eeravellisaimeghana

83% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of an ICE 7 area chart visualizes car sales in India from 2009 to 2019, combining a black line and an orange filled area to show the trend over time. Using D3 v5, the code loads CSV data, parses years with `d3.timeParse`, and renders the chart as SVG. It employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, with `line` and `area` generators using `curveBasis` to smooth the paths.

SSonuSriN

83% match

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization shows car sales in India from 2009 to 2019 using a combined line and area chart, with a smooth basis curve overlaid on a pink area fill. Built with d3.v5, the code uses D3’s `line`, `area`, and `curveBasis` generators to render the SVG, while `scaleTime` and `scaleLinear` handle the temporal and numeric axes. The chart’s green tick labels and red axis titles are styled via CSS, as defined in the accompanying stylesheet. The dataset is loaded from a CSV file hosted on GitHub, with sales and dates parsed for rendering.

Ppavankalyan1507

83% match