Skip to main content
SimilarExport ZIP
100%

Mouseover

✓ Published0🌍 Public
AAnnie Ulichney
Last edited Mar 15, 2021
Created on Mar 15, 2021

This visualization displays aggregated data about individuals under New York DOCCS custody, showing bar heights that represent the count of records for a selected variable on the x-axis against a chosen y-axis metric. Users can change both axes via dropdown menus, which re-aggregates the underlying dataset and updates the chart accordingly. The implementation uses D3 v5 functions including `d3.nest()` and `d3.rollup()` for data transformation, `d3.scaleBand()` and `d3.scaleLinear()` for scales, and `d3.axisBottom()` and `d3.axisLeft()` for axes. The visualization loads JSON data asynchronously via `d3.json()` and renders SVG rectangles with transitions on selection changes.

AI-generated description

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

To Do:

  • 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
  • Sort bars into descending
  • Bin age on x axis
  • Add summary tables
  • Add sentence length
  • CSV data input

Credit

MIT Licensed

Similar vizzes

Loading thumbnail…

NY DOCCS Under Custody Data Visualization with Filters

This interactive bar chart lets users explore New York State DOCCS under-custody data by selecting different variables for the x and y axes via dropdown menus. The visualization uses d3.nest, d3.rollup, and the general update pattern with enter, update, and exit selections to dynamically rerender bars and axes. It loads data from a JSON file and updates the scales and axes in response to user input.

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

NY DOCCS Under Custody Data Visualization with Filters

A bar chart explores New York State DOCCS under-custody data, allowing users to select which categorical variable (such as sex or race/ethnicity) appears on the x-axis and which aggregate metric (such as count, average age, or average time served) appears on the y-axis. The visualization uses d3.nest() to group and roll up records, and d3.scaleBand and d3.scaleLinear to position bars. Data loads as JSON from a GitHub gist, and the SVG rendering updates dynamically via d3 transitions and axis redraws.

EEvan Misshula
84% 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
83% 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…

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