Skip to main content
SimilarExport ZIP
100%

D3.js Line Chart and Stacked Bar Chart

✓ Published0🌍 Public
Mmdadeebfarhaan@gmail.com
Last edited Apr 26, 2024
Created on Apr 26, 2024
Forked from Hello VizHub

This example visualizes COVID-19 data for the state of Kerala using two D3.js v7 charts. A line chart traces confirmed cases over time, with red dots and interactive tooltips showing exact dates and counts. Below it, a stacked bar chart breaks down the same data into confirmed, cured, and death categories. The visualization loads data from a remote CSV via `d3.csv`, uses `d3.scaleTime` and `d3.scaleLinear` for axes, and renders with SVG paths, circles, and animated tooltip transitions.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

12

A line chart and a stacked bar chart display COVID-19 confirmed, cured, and death cases in Kerala, India, from a CSV dataset. The line chart plots confirmed cases over time, while the stacked bar chart shows the cumulative breakdown of outcomes. Both charts use D3.js v7, employing `d3.csv`, `d3.scaleTime`, `d3.scaleBand`, `d3.line`, and `d3.axisBottom` with SVG rendering. The visualization is static, with rotated date labels and axis titles.

Hharisankarakeluth@my.unt.edu
90% match
Loading thumbnail…

13

This example presents a comparative analysis of COVID-19 data for India using two D3.js v7 charts. A scatter plot maps confirmed cases against deaths for states, while an area chart tracks confirmed cases over time for Kerala. The code loads data from a remote CSV file, using `d3.csv`, and employs SVG rendering with `d3.axisBottom` for the scatter plot and `d3.area` for the time series.

Hharisankarakeluth@my.unt.edu
84% match
Loading thumbnail…

D3.js Scatter Plot and Area Chart

This example presents two linked visualizations of COVID-19 data: a scatter plot of confirmed cases versus deaths, and a time-series area chart of confirmed cases over dates. Built with D3 v7, it uses SVG selections with `scatterSvg` and `areaSvg` for rendering, and implements interactive tooltips via `d3.select` with mouseover/mouseout events. The area chart employs `xAreaScale.invert` to map mouse positions back to dates, and both charts reference local data arrays for case counts. A CSS-styled tooltip div provides hover details.

Mmdadeebfarhaan@gmail.com
80% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays COVID-19 case counts across Indian states and union territories, using a horizontal layout where each bar’s length represents confirmed cases. The visualization uses React for component structure and d3.scaleLinear for mapping data values to pixel positions, with d3.axisLeft and d3.axisBottom rendering the axes. The bars are styled with a teal fill, and the chart includes an axis label for the case count. Data comes from a CSV file with columns for state, cured, deaths, and confirmed cases, which is parsed and sorted before being passed to the React rendering logic.

Ssaikrupa82
79% match
Loading thumbnail…

5320-Group25-Vikram-

Two D3.js v7 charts explore COVID-19’s demographic impact from a CSV dataset loaded via `d3.csvParse`. A pie chart aggregates confirmed cases by WHO region using `d3.pie`, `d3.arc`, and an ordinal color scale, with an HTML legend listing counts. A second SVG chart displays grouped bars for the top ten countries, comparing confirmed, death, and recovered cases via a linear scale, band scale, and `d3.axisBottom`/`d3.axisLeft`. Both visuals use SVG rendering and rely on color-coded legends for interpretation.

Vvikramkotlo9@gmail.com
78% match
Loading thumbnail…

data visualization stacked bar chart

This example visualizes COVID-19 total cases by country, grouped into stacked horizontal bars organized by continent. The chart uses D3 v7’s `d3.csv` to load remote data, `d3.groups` to structure the data hierarchically, and `d3.scaleBand`/`d3.scaleLinear` with SVG rendering. Each country is a rectangle colored via `d3.schemeSet3`, with rotated axis labels for readability.

Bbudalavijay2001@gmail.com
78% match
Loading thumbnail…

COVID-19

This interactive D3.js visualization displays COVID-19 metrics over time for selected countries, allowing viewers to toggle between confirmed cases, deaths, and recoveries via two dropdown menus. The line chart uses a time-based x-axis and a linear y-axis, with a single red, blue, or green line rendered per selection. Data is loaded from a CSV file, processed by nesting and grouping entries by date, and filtered by country. The visualization uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for smooth curves.

WW9183907
78% match
Loading thumbnail…

data visualization project

This example presents a bar chart of COVID-19 total cases by country, using data loaded from a remote CSV file. The chart is rendered as an SVG element using D3 v7, with a rotated x-axis to accommodate country labels and a linear y-axis for case counts. The code demonstrates D3’s scaleBand and scaleLinear for axis scaling, and uses the `join` operator to efficiently create bar rectangles, with a steelblue fill for the bars.

Bbudalavijay2001@gmail.com
78% match