Skip to main content
SimilarExport ZIP
100%

nests1

✓ Published0🌍 Public
EEvan Misshula
Last edited Mar 15, 2021
Created on Mar 15, 2021

This visualization presents a filterable bar chart of data on individuals under custody, using a nested hierarchy to organize records by status and priority. The interactive page, built with React and rendered as SVG, loads JSON data from a GitHub Gist and processes it through the `d3.nest()` API to create the structured dataset. The code imports `nest`, `select`, and `remove` from D3 v5, with data cleaning and transformation handled by custom functions in `prepareData.js`, while the `d3.json` method fetches the remote source.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A nested bar chart displays the distribution of three values across two groups and three categories. The visualization uses D3 v3’s ordinal scales (`d3.scale.ordinal`) and linear scale (`d3.scale.linear`) to position bars, with SVG rendering. Data is loaded from CSV (`data.csv`) and structured via `d3.nest` into hierarchical group and category levels. Axes are drawn with `d3.svg.axis`, and nested `<g>` elements group bars by group and category.

Mmab3105
73% 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
73% 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
72% match
Loading thumbnail…

este

This interactive scatter plot explores the data from the Data Canvas Sense Your City Dataset, allowing examination of relationships between variables. The visualization uses D3.js and React, rendering SVG circles for data points with tooltips. While the code initially suggests a scatter plot with axis components and marks, it also includes a nested data aggregation structure using `d3.nest()`. The final rendering shows a bar chart using D3's ordinal and linear scales, with axes and tick formatting, though the implementation appears incomplete or experimental.

Mmpiedray
72% 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
72% match
Loading thumbnail…

Hierarchical Horizontal Bar Chart

This example presents a hierarchical horizontal bar chart that visualizes nested data as a drill-down navigation. Users click a bar to descend into its children or click the background to return to the parent level, with bars and text animating through position and opacity transitions. The visualization is built with D3 v3, using `d3.layout.partition` to compute the tree layout, `d3.svg.axis` for the scale, and `transition.attr` tweening to animate changes. It loads JSON data from a remote GitHub Gist and uses SVG for rendering, with color distinguishing parent from child nodes.

SStuart Sessions
71% match
Loading thumbnail…

Untitled

This example displays a hierarchical dataset as an interactive dendrogram or tree, allowing toggling between the two layouts via radio buttons. The visualization is built with D3 v4’s `d3.tree()` and `d3.cluster()` layout algorithms, animated with `d3.transition()` for smooth morphing of node positions and link paths. Data comes from `treedata.csv` containing a hierarchical structure with leaf values. The SVG rendering uses colored circles for internal and leaf nodes, with text labels and cubic Bézier diagonal links, all within a React framework.

Rrca0214
71% match
Loading thumbnail…

Untitled

This interactive treemap visualization displays hierarchical data using nested rectangles sized by a primary measure, with color encoding based on an optional secondary metric. The chart supports drill-down navigation through clickable parent nodes and shows tooltips on hover. Built with D3 v4, the implementation uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to transform flat data into a navigable structure, rendering SVG elements with smooth animated transitions between zoom levels.

Ttareefroustom
71% match