Skip to main content
SimilarExport ZIP
100%

Under Custody

✓ Published1🌍 Public
XXiaoyu Su
Last edited Sep 9, 2021
Created on Jan 27, 2021
Forked from HTML Starter

This interactive visualization explores New York State Department of Corrections and Community Supervision (NYDOCCS) inmate data, presenting a bar chart alongside a choropleth map of county-level statistics. Users dynamically filter the bar chart's x and y axes through dropdown menus, with color-coded bars representing aggregated counts, average ages, or average time served for various categorical attributes like sex, race, or prison. The SVG-based map, rendered using `d3.geoMercator` and `d3.geoPath`, offers a separate dropdown to display variables such as incarceration rates or demographic percentages by county. Built with React, D3 v5, and the `react-dropdown` component, the visualization updates smoothly via React hooks and includes interactive tooltips.

AI-generated description

NY DOCCS Under Custody Data Visualization with Filters on X and Y Axes

To Do:

  • Update Y axis label to reflect user selection
  • Change "y-axis" and "x-axis" text to be outside the dropdown
  • Eliminate entries with no info for selected variables before plotting to prevent empty bars
  • Eliminate age from x-axis selection options without breaking the code

Build Instructions

  • First to install dependencies
foo@bar:~$ npm install
  • After each modification run the code below to build bundle.js
foo@bar:~$ npm run build

Credit

  • Using react DOM to render the barplot.
  • Using react Dropdown component.
  • Using react hooks to change the data.
MIT Licensed

Similar vizzes

Loading thumbnail…

Under Custody

This interactive visualization displays New York State Department of Corrections and Community Supervision (DOCCS) under-custody data, showing both a bar chart and a choropleth map of county-level incarceration statistics. Users can filter the bar chart by selecting categorical variables like sex, age, or race for the x-axis and choose between metrics such as total count, average age, or average time served for the y-axis. Tooltips on bars reveal detailed breakdowns, including percentages and cumulative age-group totals. D3 v5 handles SVG rendering, scales, and axes, while React manages dropdown selections and updates the visuals dynamically.

AAnnie Ulichney
95% 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
92% match
Loading thumbnail…

Under Custody

This interactive bar chart explores New York State DOCCS under-custody data, showing population counts, average age, or average time served grouped by categories like sex, race, or age. Users select variables through React dropdown components for both axes, while radio buttons trigger animated re-sorting of bars by value or category. The visualization uses D3 v5 for scales, SVG rendering, transitions, and hover tooltips displaying counts and percentages, with data loaded and transformed via React hooks and D3's nest function.

AAnnie Ulichney
92% match
Loading thumbnail…

Under Custody

This visualization displays the population of individuals under custody in the New York State Department of Corrections and Community Supervision (DOCCS). It uses a bar chart rendered with D3.js within a React framework, allowing users to filter and explore data on both the x and y axes through dropdown menus. The chart shows counts, average age, and average time served. Tooltips provide additional details, including calculated percentages and cumulative breakdowns when viewing by age. Data is loaded from a remote JSON source and processed using D3’s data aggregation methods.

AAnnie Ulichney
91% 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
91% 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
90% match
Loading thumbnail…

Under Custody

Categorized bar chart visualizing the NY DOCCS under custody dataset, with dropdown menus allowing users to dynamically select which categorical variables to display on the X and Y axes. The chart is rendered as an SVG using d3.v5 within a React framework, featuring animated bar transitions when sorting options are applied via radio buttons. Hovering over bars triggers a tooltip showing the exact value and percentage of the total population. Data is loaded from a JSON file and transformed using d3.nest() to compute counts and averages.

AAnnie Ulichney
90% 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
89% match