Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7 (Part-4) Rohith Annadurai

✓ Published0🌍 Public
Rrohithannadurai@my.unt.edu
Last edited Mar 28, 2024
Created on Mar 28, 2024

This area chart visualizes the number of cancer deaths per year, sourced from a CSV file hosted on a GitHub gist. The chart uses an SVG rendering with a steelblue filled area beneath a line, with axes labeled for Year and Number of Cancer Deaths. The visualization is built with D3.js v7, employing `d3.csv` for data loading, `d3.scaleLinear` for scaling axes, and `d3.axisBottom` and `d3.axisLeft` for ticks.

AI-generated description

CSCE 5320.002 Scientific Data Visualization (ICE-7)

Part-1 REUSABLE SCATTER PLOT

  • Rohith Annadurai 11664585
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of ICE-7 question 4: Area chart

This area chart displays death rates in India from 2000 to 2012, with years on the x-axis and the death rate on the y-axis. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` generator with `curveBasis` to render a smooth filled path in SVG. Data is loaded via `csv` from a GitHub gist, and the chart includes labeled axes and a title.

SSonuSriN
83% match
Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This area chart visualizes US cancer cases from 2009 to 2022, showing the trend of cases over time with a smooth, curved line and a filled area beneath it. The chart uses D3 v5 APIs including `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, `d3.line`, and `d3.area` with a basis curve. Data is loaded from a CSV file hosted on GitHub, and the SVG rendering includes gridlines and labeled axes for year and case count.

JJyothicherukuri
82% match
Loading thumbnail…

ICE-7 (Part-4) Rohith Annadurai

This example presents two visualizations: a reusable scatter plot and an area chart, both built with D3.js v7. The scatter plot maps movie budgets against revenues using `d3.scaleLinear` for axes and SVG circles, with hover styling. The area chart displays cancer deaths over years, using `d3.area` to generate a filled path and `d3.axisBottom`/`d3.axisLeft` for scales. Both load data from external CSV files via `d3.csv`, and render interactively with SVG elements, including labeled axes and a steelblue fill for the area chart.

Rrohithannadurai@my.unt.edu
82% match
Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization shows US cancer cases from 2009 to 2022 using a combined line and area chart, with the line stroke in black and the area fill in purple. The code uses D3 v5 (d3.line, d3.area, d3.scaleLinear, d3.axisBottom, d3.axisLeft) with cubic basis curve interpolation (curveBasis) to smooth the chart. Data is loaded from a CSV file via d3.csv, with numeric parsing for cases and year. The SVG renders axes with gridlines, axis labels, and a title.

SSheshidharreddy
82% match
Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This example visualizes US cancer case data from 2009–2022 using a combined line and area chart rendered in SVG. The chart displays the population as the y-axis and year as the x-axis, with a smooth curve applied to both the line and the filled area beneath it. The visualization uses d3.scaleLinear, d3.line, d3.area, and d3.curveBasis to generate the paths, along with d3.axisBottom and d3.axisLeft for labeled axes. Data is loaded as CSV from a GitHub gist, and the code imports specific D3 modules for modular functionality.

Bbhargavarathod
82% match
Loading thumbnail…

Fork of Fork of Fork of ICE 7 Area Chart

This visualization shows the number of US cancer cases from 2010 to 2022 using a combined line and area chart. The area chart, filled in brown, represents the magnitude of cases over time, while the grey line overlays the same data to emphasize the trend. The code uses d3.csv to load the dataset, with d3.scaleLinear for both axes and d3.line and d3.area generators, both employing d3.curveBasis for smoothing. Axes are rendered with d3.axisBottom and d3.axisLeft, and the SVG output is styled via external CSS.

Ssaivinay143
82% match
Loading thumbnail…

Fork of ICE 7 Area Chart

This visualization displays US cancer cases from 2009 to 2022 using a combined line and area chart. The line chart traces the yearly case counts with a smooth curve, while the filled area beneath emphasizes the magnitude of the data. Both the x-axis and y-axis use linear scales, with formatted tick labels. The code imports specific D3 v5 modules like `scaleLinear`, `line`, and `area`, and applies `curveBasis` for smoothing. The data is loaded from a CSV file hosted on GitHub, and the SVG rendering is styled with custom CSS classes.

NNikhilMakkena
81% match
Loading thumbnail…

Fork of Fork of ICE-7 question 4: Area chart

This area chart shows the death rate in India from 2000 to 2012, with years on the x-axis and the death rate on the y-axis. It uses d3.scaleTime and d3.scaleLinear to map the data, while d3.area and d3.curveBasis generate a smooth, grey-filled path. The chart displays axes with d3.axisBottom and d3.axisLeft, including gridlines and labeled axis titles, and loads CSV data from a GitHub gist. Rendered as SVG, the visualization includes a blue title and the d3.format function for tick labels.

Aaashrithd4
81% match