Skip to main content
SimilarExport ZIP
100%

ICE 7 : Task3(Line Chart)

✓ Published1🌍 Public
NNITIN0601
Last edited Mar 27, 2022
Created on Mar 27, 2022
Forked from ICE 6 : Task 1

This visualization displays Tesla sales data by year using a line chart. The chart plots yearly sales values on a linear scale against a time-based x-axis, with axis labels for “Year” and “Sales” and a title. The code loads CSV data from a GitHub gist and renders the line as an SVG path using D3 v5’s `scaleTime`, `scaleLinear`, `line` generator, `axisBottom`, and `axisLeft` functions within a React framework.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 : Task 4 (Area Chart)

This example visualizes Tesla sales by year using an area chart. The view shows a smoothed curve with a filled blue region beneath it, plotted over time on an SVG canvas. It loads CSV data from a GitHub gist and parses dates with `d3.timeParse`. The visualization uses D3 v5 scales (`scaleTime`, `scaleLinear`), axes (`axisLeft`, `axisBottom`), and generators (`area`, `line`) with `curveBasis` for smoothing. Gridlines and rotated axis labels clarify the quantitative and temporal ranges.

NNITIN0601
87% match
Loading thumbnail…

ICE 7 : Task 2 (Pie Chart)

A pie chart displays year-wise Tesla sales from a CSV file, with each slice labeled by year and accompanied by a legend showing both year and sales values. The visualization uses d3.csv to load data, d3.layout.pie to compute arc angles, and d3.svg.arc for slice rendering. Ordinal scales assign categorical colors, while SVG groups position arcs, text labels, and legend rectangles. The chart is built with d3.v3 inside an HTML page with React components managing the state and rendering the SVG output.

NNITIN0601
87% 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
85% 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
85% match
Loading thumbnail…

ICE - 7 Line Chart

This chart visualizes monthly car sales trends over time, plotting total sales amounts against sale dates. The visualization uses React with D3 v7 to fetch and parse CSV data, then renders an SVG line chart with a smooth curved line via `curveBasis`. Axes are generated using D3 scales (`scaleTime` and `scaleLinear`), with custom tick components for x and y grids. The x-axis labels months, while the y-axis displays sales amounts, and axis titles clarify the variables. The chart’s styling includes red line strokes, grey gridlines, and green axis labels, with the data sourced from a remote GitHub CSV file.

66264kusuma@gmail.com
84% match
Loading thumbnail…

ICE-7 Line Chart

This chart visualizes the trend of car sales from 2004 to 2022, using a blue line to connect annual data points with the year on the x-axis and sales figures on the y-axis. The D3.js v5 code employs `scaleTime` and `scaleLinear` for axis scaling, with `axisBottom` and `axisLeft` to render tick marks and labels. The line is generated via `line()`, and the data is loaded from a CSV file in a GitHub gist. SVG output is used, with margins and labels styled via an external stylesheet.

Rrakeshkommineni
83% match
Loading thumbnail…

ICE 7question 3 Line Chart

This line chart displays automobile sales in India from 1999 to 2012, with the x-axis mapping years and the y-axis showing electronic sales values. The visualization loads CSV data from a GitHub URL, converts year strings to Date objects, and uses d3.scaleTime and d3.scaleLinear for axes. Rendering relies on d3.line to generate the path, d3.axisBottom and d3.axisLeft for tick marks, and React for the overall structure. The SVG output is styled with custom CSS for axis labels, titles, and the blue line path.

Vvidhyanamini
83% match
Loading thumbnail…

ICE-7 line graph

A line graph displays total car sales per year from 2013 to 2021, using a time-scaled x-axis and linear y-axis. The SVG renders a red path connecting data points, with axis gridlines and rotated axis labels. The code loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and builds scales using `scaleTime` and `scaleLinear`, then generates the line via `d3.line` and appends axes with `axisBottom` and `axisLeft`.

Mmosesimmanuelvemana@my.unt.edu
83% match