Fork of ICE 7 Q3

100%

Fork of ICE 7 Q3

✓ Published0🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

Forked from ICE 7 Q3

This visualization displays shampoo sales over 15 years as an area and line chart, with time on the x-axis and sales values on the y-axis. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` to create smooth, filled curves. Data is loaded from a CSV file via `csv()`, and axes are rendered using `axisBottom` and `axisLeft`. The SVG chart includes labeled tick marks and axis titles, with the sales data parsed as numbers and dates converted to JavaScript `Date` objects.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 Q3

This line chart visualizes shampoo sales over a 15-year period, with the year on the x-axis and sales units on the y-axis. The chart is rendered as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for the axes and `line` to generate the path. Data is loaded from a CSV via GitHub Gist, and axis labels are added using `axisLeft` and `axisBottom`.

RRebecca Moore

89% match

Loading thumbnail…

Fork of Fork of ICE-7

This example displays a line chart of sales data over time, with the x-axis representing years and the y-axis representing sales figures. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to build the axes, while a `line` generator creates the orange stroke path. Data is loaded from a CSV file hosted on GitHub Gist, and the year values are parsed with `d3.timeParse` to format them as dates. The SVG rendering includes custom axis labels and styled tick marks.

TTulluripallavi

84% match

Loading thumbnail…

Fork of ICE-7 (Part-1)

This example visualizes electronic sales data by plotting yearly totals as a line chart. The chart displays total sales on the y-axis against time on the x-axis, with axes labeled accordingly. The implementation uses D3 v5, specifically leveraging `scaleTime`, `scaleLinear`, `line`, and axis components to render the SVG. Data is loaded from an external CSV file, parsed, and formatted using `d3.timeParse`. The line path is drawn using `lineGenerator`, with margins and gridlines defined via `axisBottom` and `axisLeft`.

TTarun Kumar Bosupally

84% match

Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This example displays the cost of sales from 2000 to 2013 as a smooth area chart, with the filled region emphasizing the trend over time. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `line` generators with a `curveBasis` smoothing, rendered as SVG paths. Axes are drawn with `axisLeft` and `axisBottom`, including gridlines and formatted tick labels via `format('.3s')`. Data is loaded as CSV from a GitHub gist, parsed into `Date` objects for the year and numeric cost values, and positioned within margins using a standard SVG `<g>` transform.

Ssumit

84% match

Loading thumbnail…

Fork of ICE-7

This line chart shows sales data over time, with years on the x-axis and sales values on the y-axis, using orange strokes to highlight trends. It loads CSV data from a GitHub gist, parsing dates with `d3.timeParse` and rendering an SVG via D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` functions. Grid lines and axis labels are customized through CSS, while margins and tick padding adjust the layout.

TTulluripallavi

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

84% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays electronic sales in America from 2001 to 2011, using a smooth curve to represent the trend and a red fill beneath the line. The visualization is rendered with SVG via D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.line` with `curveBasis`. Data is loaded from a CSV file and parsed with `d3.csv`, while axis labels and tick formatting are handled by `d3.axisLeft` and `d3.axisBottom`.

AArv1228

83% match

Loading thumbnail…

Fork of Fork of Fork of fork of ICE-7

This example shows a line chart of sales data over time, with a year-based x-axis and a numeric sales y-axis. Data is loaded from a CSV file and parsed using D3’s `csv` and `timeParse`. The chart uses `scaleTime` and `scaleLinear` for axes, `line` to generate the path, and `axisBottom` and `axisLeft` for ticks. Styled with purple tick labels, brown grid lines, and an orange stroke, the visualization is rendered as an SVG with D3 v5.

TTulluripallavi

83% match