Skip to main content
SimilarExport ZIP
100%

Anitha Shivaramaiah (11537410) ICE-7, Area chart

✓ Published0🌍 Public
AAnitha Shivaramaiah
Last edited Mar 30, 2023
Created on Mar 30, 2023
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Anitha Shivaramaiah (11537410) - Line chart

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

AAnitha Shivaramaiah
89% match
Loading thumbnail…

ICE-7 Area Chart-Srinivas

This area chart displays the profits of a software company from 2009 to 2021, with a smooth curved line and filled region beneath it. The visualization uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and generate scales via `scaleTime` and `scaleLinear`. The line and area shapes are created with `d3.line` and `d3.area` using `curveBasis`, while axes are rendered with `axisBottom` and `axisLeft`. The SVG rendering includes custom styling for orange labels, blue tick text, and a light green fill for the area.

Ssrinivasaraosankula
81% match
Loading thumbnail…

ICE-7.4 Area Chart

This area chart visualizes sales cost trends from 2000 to 2013, with a line overlay and a light green filled region beneath it. It uses D3 v5 with d3.scaleTime and d3.scaleLinear for axes, d3.area and d3.line generators with curveBasis smoothing, and renders as an SVG via React. Data loads from a CSV hosted on a GitHub Gist, and axes include formatted tick labels and gridlines.

SShashi42
79% match
Loading thumbnail…

Area Chart_ICE-7_AG

This area chart visualizes the cost of sales from 2000 to 2013, plotting average temperature on the x-axis against date on the y-axis. The chart combines a smooth black line generated with d3.line and curveBasis, with a yellow filled region created using d3.area. Axes are rendered via d3.axisLeft and d3.axisBottom with gridlines. Data loads from a CSV file using d3.csv, and scales are set with d3.scaleTime and d3.scaleLinear. The SVG output is rendered within a React framework using D3 v5.

Aarchanagoli@my.unt.edu
79% match
Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes company profits in India from 2010 to 2021, with a smooth curved line and filled blue area beneath it. The chart uses d3.scaleTime and d3.scaleLinear for axes, while d3.line and d3.area with d3.curveBasis generate the path elements. Data is loaded from a CSV file via d3.csv, with dates parsed using d3.timeParse. The SVG rendering includes axis labels, gridlines via tickSize, and formatted profit values using d3.format.

TTejaswi@3271
79% match
Loading thumbnail…

ICE-7 Area Chart

This area chart displays the cost of sales from 2000 to 2013, using a smooth basis curve for both the line and the filled area beneath it. The visualization loads a CSV dataset via `d3.csv`, parses the year and cost fields, and renders an SVG with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. The chart includes customized axis labels and gridlines, with the area filled in yellow and the line drawn in black. The code is built with React and D3 v5.

DDineshK2602
78% 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
78% match
Loading thumbnail…

ICE-7 AREA CHART

This area chart visualizes revenue trends over time, with the x-axis representing years (based on customer counts) and the y-axis showing revenue in millions. The chart uses a skyblue filled area beneath the line to emphasize the magnitude of revenue values. Built with D3.js v7, the visualization fetches CSV data from a GitHub gist, processes it with `.csv()`, and renders the graphic using SVG. The code configures axes, labels, and margins, and uses `d3.area()` to generate the filled area path.

Ppeddubalaji@gmail.com
78% match