Barchart experiment

100%

Barchart experiment

✓ Published0🌍 Public

Last edited Mar 12, 2021

Created on Feb 16, 2021

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.

AI-generated description

<!DOCTYPE html> <html> <head> <title>Fork of barchart</title> <link rel="stylesheet" href="styles.css">  <script src="https://unpkg.com/react@16.9.0/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.9.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/d3@5.11.0/dist/d3.min.js"></script> </head> <body> <div id="root_bar"> <svg id="death_bar" height='350' width='550'/> </div> <script src="bundle.js"></script> </body> </html>

MIT Licensed

Similar vizzes

Loading thumbnail…

barchart

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

XXiaoyu Su

90% 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

85% match

Loading thumbnail…

MAP

This interactive bar chart visualizes New York State Department of Corrections and Community Supervision (DOCCS) under-custody data, allowing users to filter and compare counts across selected categorical variables on both axes. Built with React and D3 v5, the chart renders SVG bars with tooltips showing percentages and cumulative age totals. The code uses d3.nest for data aggregation, d3.scaleBand and d3.scaleLinear for positioning, and react-dropdown components for interactive filtering. Raw JSON data is fetched via d3.json, with axes and tooltips styled through custom CSS.

AAnnie Ulichney

82% match

Loading thumbnail…

NY DOCCS Under Custody Data Visualization with Filters

This interactive bar chart visualizes New York DOCCS under-custody data, allowing users to filter and explore distributions across categorical variables. The visualization plots the number of individuals, average age, or average time served against a chosen demographic field like sex or race/ethnicity. Built with React and D3 v5, the example uses `d3.nest()` and `d3.rollup` to aggregate CSV data, while `d3.scaleBand` and `d3.scaleLinear` handle positioning. User selections dynamically update the axes and bars via form inputs, with the SVG rendering driven by D3 data joins.

EEvan Misshula

81% match

Loading thumbnail…

NY DOCCS Under Custody Data Visualization with Filters

This interactive bar chart visualizes NY DOCCS under-custody data, allowing users to explore how inmate counts and average age vary across categorical variables like sex, race, or ethnicity. The chart uses React to manage state and D3 v5 to handle data loading, aggregation, and SVG rendering. Users can dynamically change both the x-axis grouping variable and the y-axis metric (count or average age) via dropdown menus. The visualization leverages `d3.nest()` for data transformation and D3’s scale and axis APIs to update the chart in response to user selections.

XXiaoyu Su

81% match

Loading thumbnail…

Under Custody

This interactive bar chart visualizes the New York State Department of Corrections and Community Supervision (NYDOCCS) under-custody population, with the x and y dimensions selected via dropdown menus. The visualization includes a linked data table showing the count, percentage, and average values for each category. The D3.js v5 bar chart uses `scaleBand` and `scaleLinear` for positioning, with bar heights sorted dynamically upon selection. A tooltip displays detailed information on hover, and the data is loaded from a remote JSON source using D3's `json` function, rendered through React components.

XXiaoyu Su

80% match

Loading thumbnail…

NY DOCCS Under Custody Data Visualization with Filters

This interactive bar chart lets users explore a dataset of individuals under custody in the New York DOCCS. The chart renders aggregated counts of people based on categories chosen for the x-axis (e.g., sex, race/ethnicity) and y-axis (e.g., amount, average age). Users dynamically change the variables plotted on each axis through dropdown menus, which update the bars and axis labels via D3.js v5. The visualization also includes a radio button for sorting the bars in descending order, and it builds its aggregated data using the `d3.nest()` API.

AAnnie Ulichney

80% match

Loading thumbnail…

Test UC

This interactive bar chart visualizes individuals in New York State DOCCS custody, with dropdown menus allowing users to filter the X and Y axes by attributes such as sex, age, race/ethnicity, and time served. The chart renders with React and D3 v5, using `d3.histogram()` to bin age data and `d3.scaleBand()` and `d3.scaleLinear()` for scales. Hovering reveals tooltips with counts and percentages, while data originates from a JSON file loaded via `d3.json()`. Sorting controls and animations are also available.

XXiaoyu Su

80% match