barchart

100%

✓ Published0🌍 Public

Last edited Feb 18, 2021

Created on Feb 9, 2021

This interactive bar chart visualizes monthly deaths in custody across 2020, drawn from the `death2020.csv` dataset and displayed as an SVG rendered through React with D3 v5. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with bars that respond to mouseover and mouseout events by adjusting opacity. Buttons allow users to toggle a mean line with error bounds computed via `d3.mean` and `d3.deviation`, or trigger a two-step animated transition that temporarily sets all values to 10 before restoring them using `transition().duration()`.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Barchart experiment

This bar chart displays counts of deaths per month in New York DOCCS custody across 2020, with interactive mouseover details listing individual names and dates from the raw dataset. The React-based visualization renders SVG bars using d3.scaleBand and d3.scaleLinear, featuring a button that toggles a red dashed mean line with confidence-interval lines computed via d3.mean and d3.deviation. A second button triggers animated transitions through d3 transitions in `change_data`, briefly shifting all bars to the mean height before restoring original values over 2 seconds.

XXiaoyu Su

90% match

Loading thumbnail…

Bar chart visualization using d3.js

This example displays a horizontal bar chart of death rates across different years, sourced from a custom dataset loaded via `d3.csv`. The bars are rendered as SVG rectangles within a React component, using D3 v5 scales (`scaleLinear` for the x-axis and `scaleBand` for the y-axis) and axes (`axisLeft`, `axisBottom`). The chart highlights numeric formatting on the x-axis and includes custom axis labels, with grid lines removed for a cleaner visual.

Mmomopng

80% match

Loading thumbnail…

bar viz for testing

This example visualizes death rates by year using a horizontal bar chart, with each bar’s length encoding the death count and the y-axis listing years. The chart is rendered as SVG using D3.js v5, primarily leveraging `d3.csv` to load data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom`/`axisLeft` for tick generation. Data is sourced from a CSV file, and death values are multiplied by 1,000 before plotting. Styling is applied via CSS, setting bars to steelblue and customizing axis text.

Mmomopng

80% match

Loading thumbnail…

Bar graph of covid deaths

A bar chart displays COVID-19 deaths across selected countries for each day of May, with a slider to change the date. It uses D3 v5 scales (`scaleBand`, `scaleLinear`) with React for rendering SVG rectangles. Data comes from a CSV of COVID-19 statistics, filtered by location and day. The chart sorts countries by death count and uses native SVG `<title>` elements for hover tooltips.

Mmanasishrotri

77% match

Loading thumbnail…

A4 Barchart (D3)

This bar chart visualizes total opioid deaths per year from 1999 to 2019, using data from the CORGIS dataset. The chart displays red bars for each year, with a hover tooltip (via SVG `title` elements) showing the exact death count. It uses D3 v7 with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering is responsive to the window size, and the data is loaded asynchronously via `d3.csv`.

NNoah C.

77% match

Loading thumbnail…

Bar graph of covid deaths

This bar chart tracks daily COVID-19 deaths across ten countries throughout May 2020. A slider allows viewers to select a specific day of the month, updating the bar lengths to show new deaths reported that day. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear`, rendering SVG rectangles via the `Marks` component. Data comes from the COVID May Dataset, filtered by country and month day, with hover tooltips displaying country names and death counts.

Mmanasishrotri

76% match

Loading thumbnail…

NY DOCCS Death Visualization

This histogram visualizes the deaths of individuals in New York State Department of Corrections and Community Supervision custody during 2020, binned by month, week, or day. The interactive chart uses D3.js v5 and React to render an SVG bar chart with an overlaid average line, while hovering over a bar reveals the names and death dates of the individuals it represents. The binning interval is selectable via a dropdown menu, and the visualization animates transitions between bin sizes using D3 transitions. Data is loaded from a local CSV file.

XXiaoyu Su

76% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays COVID-19 death counts for the first 20 states from a CSV dataset, rendered as SVG rectangles using React and D3. The code uses `d3.csv` to load data, `scaleBand` for the y-axis state categories, and `scaleLinear` for the death-count x-axis. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, with tick marks and labels generated via the scales’ `.ticks()` and `.domain()` methods.

DDaniel Mata

76% match