ICE 7 Q3

100%

✓ Published1🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

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`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

RRebecca Moore

89% match

Loading thumbnail…

ICE - 7 Line Chart

A line chart displays annual sales over time, with a single thick maroon line tracing the trend. The visualization uses D3 v5 to load CSV data via `d3.csv`, parse dates with `d3.timeParse`, and construct scales with `scaleTime` and `scaleLinear`. Axes are generated using `axisBottom` and `axisLeft`, while the line path is created with the `d3.line` generator. The SVG rendering includes labeled axes and gridlines, with data sourced from a GitHub gist.

Nnehabaddam

80% match

Loading thumbnail…

ICE7 Line Chart

This line chart displays yearly sales summaries from a superstore dataset, plotting sales figures over time on a purple-themed SVG canvas. The implementation uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to construct axes, gridlines, and a single emphasized line path. It loads data via `d3.csv` from a GitHub gist, parses years with `d3.timeParse`, and formats axis ticks with `format('.3s')`. Hover interactions are not present; the chart focuses on static visualization.

SSharmaAshwini

80% match

Loading thumbnail…

ICE 7 Line Chart

This chart shows sample sales data from 2010 to 2022 as a single line, with a time-scaled x-axis for years and a linear y-axis for sales values. The visualization uses D3 v5 to load CSV data, then draws an SVG line path using `d3.line`, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The code imports modules like `scaleTime`, `scaleLinear`, `extent`, and `max` from D3 via a Rollup bundle that outputs to `bundle.js`. The styling applies custom CSS for gridlines, axis labels, and the stroke color of the line path.

Ddheeraj1509

80% match

Loading thumbnail…

ICE7 linechart

This line chart visualizes monthly sales in 2022, with the x-axis showing months and the y-axis displaying sales figures in thousands of USD. The chart is rendered as an SVG using D3 v5, employing `scalePoint`, `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes. A purple line path is generated with D3’s `line` API, and the data is loaded from a CSV file via `d3.csv`. Styling for fonts, grid lines, and the line stroke is defined in a separate CSS file.

79% match

Loading thumbnail…

ICE-7 Line Chart

This line chart displays annual sales for an e-commerce site from 2009 to 2019, with a blue line tracing the trend over time. Using D3 v5, it loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and constructs the visualization with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`. The SVG includes gridlines from tick marks, axis labels, and a styled path, with sales values formatted using `format('.3s')`. The chart is rendered entirely in SVG with axes positioned inside a margin-defined area.

PPrasanth Damarla

78% match

Loading thumbnail…

ICE 7- Line Graph

This line graph visualizes mobile sales trends from 2010 to 2020, plotting yearly sales figures on a time-based x-axis and a linear y-axis. The chart uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator to draw the path. Data is loaded from a CSV via `csv()` and parsed with `d3.timeParse`, while grid lines and axis labels are styled through CSS classes.

YYbg99

78% match

Loading thumbnail…

ICE-7 question 4: Area chart

This area chart displays cosmetic product sales in USD from 2018 to 2022, with the x-axis showing years and the y-axis showing sales values. The visualization is rendered as an SVG using D3 v5, employing `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.area` with `curveBasis` to generate the shaded path. Data is loaded from a CSV file hosted on GitHub, and the chart includes labeled axes and a title describing the metric shown.

Vvidhyanamini

77% match