Anitha Shivaramaiah (11537410) - Line chart

100%

Anitha Shivaramaiah (11537410) - Line chart

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 29, 2023

This line chart displays earnings data from 2012 to 2023, plotting yearly cost values as a red path against a time-based x-axis and linear y-axis. The visualization loads CSV data from a GitHub gist, parses it with `d3.csv`, and renders using SVG inside a React framework. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the line is constructed via `d3.line` and scales using `d3.scaleTime` and `d3.scaleLinear`.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Anitha Shivaramaiah (11537410) ICE-7, Area chart

This area chart displays earnings data from 2012 to 2023, using a pink filled area with a dark blue line to emphasize trends over time. The visualization loads CSV data via `d3.csv`, parses dates with `scaleTime`, and maps costs using `scaleLinear`. It renders axes with `axisLeft` and `axisBottom`, applies `curveBasis` smoothing to both the `line` and `area` generators, and includes gridlines via tick sizing. The SVG output uses custom CSS classes for styling and labeled axes.

AAnitha Shivaramaiah

89% match

Loading thumbnail…

linechart

This line chart displays the cost of sales from 2000 to 2013, with yearly values plotted as a thick light-green line. The chart uses an SVG rendering with D3 v7, employing `d3.scaleBand` for the categorical year axis and `d3.scaleLinear` for the cost axis. Data is loaded from a local CSV file via `d3.csv`, and the line path is generated with the `d3.line` API, with red axis labels and tick styling defined in embedded CSS.

Aanith462@gmail.com

80% match

Loading thumbnail…

line chart

This chart displays Amazon’s annual net income from 1994 to 2020 as a red line across a time-series. The x-axis encodes years, while the y-axis shows income in millions. D3 v5’s `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` generate the SVG path, with `d3.axisBottom` and `d3.axisLeft` producing labeled axes and gridlines. The data is loaded from a GitHub gist and parsed using `d3.timeParse`.

SSai Hemanth Babu Sunkari

77% match

Loading thumbnail…

linechart

A line chart tracks the cost of sales from 2000 to 2013 using data from a local CSV file. The SVG visualization uses `d3.scaleBand` for the year axis and `d3.scaleLinear` for cost, with `d3.axisBottom` and `d3.axisLeft` rendering the ticks. A `d3.line` path with a lightgreen stroke connects the data points, and red text labels for "Year" and "cost" are positioned via SVG transforms. The chart is built with D3 v7 in an ES6 module.

Aaniteshterala2000

77% match

Loading thumbnail…

linechart

A line chart visualizes the cost of sales from 2000 to 2013, with years on the x-axis and cost on the y-axis. The chart is rendered as SVG, using D3 v7's `scaleBand`, `scaleLinear`, `line` (via `d3.line()`), and axis functions (`axisBottom`, `axisLeft`) to draw the path and axes. Data is loaded from a CSV file using `d3.csv`. The chart includes red axis labels and a red title.

JJayanthKumarkoni

77% match

Loading thumbnail…

linechart

This line chart shows the cost of sales from 2000 to 2013, using a light green, four-pixel-wide line to trace annual changes. The visualization loads data from a CSV file using `d3.csv` and scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`. The SVG rendering is generated via D3 v7, with red axis labels and a styled title, all built from local ES6 modules and a standard HTML page.

BBhavyaMammai

77% match

Loading thumbnail…

Anitha Shivaramaiah (11537410) - ICE 7, Pie Chart

This pie chart visualizes monthly expenses by sorting the data by amount and displaying the top ten cost categories as colored slices with a legend listing each expense name and its dollar value. The chart is rendered as an SVG using D3 version 5, loading CSV data from a GitHub gist and leveraging `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for layout, shape generation, and color mapping. Mouseover events log the expense amount to the console.

AAnitha Shivaramaiah

76% match

Loading thumbnail…

linechart

This line chart displays the cost of sales from 2000 to 2013, with each year plotted against its corresponding cost value on a linear scale. The visualization uses D3 v7 APIs including `d3.csv` to load data, `d3.scaleBand` for the categorical year axis, `d3.scaleLinear` for the cost axis, and `d3.line` to generate the path geometry with a light green stroke. The chart is rendered as an SVG with axes, labels, and a title, with data coming from a local CSV file.

Hharipriyaa07

76% match