Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
CClaire Ahn
Last edited Oct 22, 2021
Created on Oct 22, 2021
Forked from Untitled

This visualization shows the financial ecosystem of the U.S. prison system, mapping how government entities connect to private companies across sectors like healthcare, telecommunications, and construction. A circular dendrogram layout positions 76 nodes around the perimeter, with bundled radial links tracing relationships between entities. The code uses `d3.cluster` and `d3.radialLine` with `curveBundle` to draw the hierarchical connections. Hovering over a node highlights its direct connections in red and green, emphasizing source and target relationships. The data comes from a local `prisons.json` file containing nodes and links between government agencies and private corporations.

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

An interactive network graph displays funding relationships between development organizations as nodes and edges, with edge color indicating upstream or downstream flow. The visualization uses D3.js v4’s force-directed simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`) to position nodes, while SVG paths render edges with curved markers. Node dragging via `d3.drag` and zooming via `d3.zoom` allow exploration of the 200+ linkage data loaded from `links.csv`.

Bbglasgo
71% match
Loading thumbnail…

Untitled

A zoomable treemap visualizes crime data from a JSON hierarchy, with rectangles sized by offense counts and colored by rate of change from blue (negative) to red (positive). Users click parent nodes to drill down between broad categories like violent and non-violent crimes, while hover effects reveal child rectangles. The implementation uses `d3.treemap`, `d3.hierarchy`, and `d3.scaleLinear` for color, rendering animated transitions via D3 v4 in React with SVG. A separate `flare.json` dataset and parsed `friends.js` array are included but not shown in the main chart.

LL1EO
71% match
Loading thumbnail…

Untitled

This interactive bubble chart visualizes a hierarchical dataset from the imported `flare.json`, organizing terms by crime categories such as theft, assault, and drugs. Built with D3 v4’s `d3.pack`, it renders circles as SVG nodes, with zoom and pan handled via `d3.interpolateZoom` and transition tweens. Clicking a node zooms to that subtree, while leaf nodes remain unfilled and only root-level labels display. The color scale uses HSL interpolation to denote depth.

LLaowei42
70% match
Loading thumbnail…

Under Custody

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.

XXiaoyu Su
69% match
Loading thumbnail…

Untitled

This visualization displays a circular arc diagram of node-link data, with nodes positioned along a horizontal axis and connected by curved paths. Hovering over a node highlights it and its associated links while dimming others and enlarging its label. The code uses D3.js v4 with d3.scaleOrdinal for group colors, d3.scalePoint for x-axis positioning, and d3.scaleLinear for node sizes. It renders as an SVG, loading data from a CSV file and applying a color palette from d3-scale-chromatic.

SSRC199
69% match
Loading thumbnail…

Untitled

This hierarchical org chart displays a credit risk analytics team, with employee names, titles, cities, and contact details shown in circular nodes connected by gray links. The visualization uses D3.js v5 with a tree layout to position nodes, SVG circles and text for rendering, and animated transitions to expand and collapse branches as users interact. The data represents Wells Fargo employees, structured as nested JSON objects with parent-child relationships. Axes are absent, but files indicate modularized components for bottom and left axes, marks, and data handling.

Ttbell12501
69% match
Loading thumbnail…

Fork of World Countries Hierarchy

This radial dendrogram visualizes a hierarchical dataset of crime-related terms, with three main branches: theft, assault, and drugs. The visualization uses a circular tree layout, placing the root at the center and spreading descendant labels outward along angular coordinates. The code employs D3 version 5 APIs including `d3.cluster`, `d3.hierarchy`, and `d3.linkRadial` to compute the layout and generate curved link paths. Text labels are rotated to align with their radial positions, and font sizes scale with tree depth via `d3.scaleSqrt`. The SVG rendering positions leaf labels with adjusted anchors, and the view supports interactive zooming through `d3.zoom`. The data comes from the local `data.json` file, which contains nested crime word frequencies.

Eericliu6178@gmail.com
69% match
Loading thumbnail…

Untitled

This radial hierarchy visualization displays nodes as text labels arrayed around a central point, with curved links connecting them based on their import relationships. The code uses `d3.cluster` to position nodes and `d3.radialLine` with a randomized curve bundle beta value to draw the links, rendered as SVG paths. Node sizes from the JSON data are loaded but not visually encoded. Data comes from a static `data.json` file defining the node names, sizes, and import dependencies.

Kkhalilha
68% match