Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of ICE-7: Area chart

✓ Published0🌍 Public
Bbhargavarathod
Last edited Mar 28, 2022
Created on Mar 28, 2022

This area chart visualizes the NASDAQ Composite index over time, with the x-axis representing time and the y-axis representing price. The chart uses a filled area path rendered as SVG, with axis labels and a title. It loads CSV data from a GitHub gist and employs D3 v5 utilities including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area`, and `curveBasis`. The chart includes grid lines with custom tick formatting, converting large numbers to billions using a custom `format` function.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7: Area chart

This area chart visualizes the NASDAQ Composite index’s price over time, with the chart title displayed prominently and axes labeled "Time" and "Price." The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth, teal-filled area from CSV data loaded via `d3.csv`. Gridlines are drawn with `axisLeft` and `axisBottom` tick marks, while the y-axis formats large numbers using `d3.format` to abbreviate billions. The SVG render includes a rotated y-axis label and a centered title.

Vvidhyanamini
96% match
Loading thumbnail…

Fork of Fork of ICE-7: Area chart

This fork of an ICE-7 example uses d3.v5 to render an area chart of the NASDAQ Composite index, displaying price over time as a filled teal path against a grid of gray tick marks. It reads CSV data, parses dates and prices, and constructs the chart with d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.area with curveBasis. The SVG output includes axis labels and a centered title, with styling handled in CSS.

Bbhargavarathod
92% match
Loading thumbnail…

ICE-7: Area chart

This area chart visualizes the NASDAQ Composite index over time, with a filled teal region under a smoothed curve. The chart uses D3 v5's `area` generator with `curveBasis` for smoothing, along with `scaleTime` and `scaleLinear` for the axes. Data is loaded from a remote CSV file, and tick labels are formatted using the `.1s` format specifier. The SVG rendering includes axis labels and a title, with grid lines styled via CSS.

Ttrucntx007
87% match
Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This area chart displays market value over time across quarterly cost data, with a black curved line and labeled axes for quarter and market value. The visualization uses D3 v5 within a React framework, employing d3.scaleTime, d3.area, and d3.line with curveBasis to create a smooth path. The SVG renders data parsed from a CSV source, with d3-axis ticks showing gridlines and bold axis labels.

AAnanyaSamala
84% 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
82% match
Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This area chart visualizes the number of books sold over time, with the data loaded from a CSV file via `d3.csv`. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` for the axes. The line and filled area beneath it are rendered using `d3.line` and `d3.area` with `d3.curveBasis`, and the SVG output is generated using React and D3 v5.

KKarnisrikanth
82% match
Loading thumbnail…

Fork of ICE-7 Area Chart

This fork of ICE-7 Area Chart visualizes the cost of sales from 2000 to 2013 using an area chart with a smooth curve. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `line`, `curveBasis`, `axisLeft`, and `axisBottom`. A black line traces the data while a yellow filled area beneath it emphasizes the trend. The chart loads CSV data from a GitHub gist, formats years as dates, and labels axes with the provided titles.

Ssumit
82% match
Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This visualization displays Netflix subscriber costs over time, using a smoothed area chart drawn as an SVG. The code relies on D3 v5 functions like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with `curveBasis` to generate the path. Data is loaded from a CSV file and parsed with `d3.timeParse`. The chart is rendered inside an HTML page with CSS styling, with axis labels and gridlines styled via `.tick` and `.axis-label` classes.

NNaveed945
81% match