Skip to main content
100%

Foster Family Details and Demographics

✓ Published0🌍 Public
Aadilyalcin
Last edited Dec 3, 2016
Created on Dec 3, 2016

This visualization shows foster family details and demographics as a node-link diagram, with each record positioned spatially and linked by shared attributes. The left panel summarizes categorical fields like willingness to adopt, provider type, and gender served, while the right panel displays demographic values such as gender, ethnicity, and marital status. A middle panel shows birth dates on a time scale. The implementation uses d3.forceSimulation to lay out nodes, with data loaded from a Google Spreadsheet via the gist’s configuration. Panels use custom label widths and categorical splits to organize the multi-dimensional summary.

AI-generated description

Similar vizzes

Loading thumbnail…

Fosterly Census 2016 Survey

Fosterly Census 2016 Survey visualizes survey responses from companies using D3.js, with interactive panels for exploring categorical, numerical, and geographic data. The visualization employs d3.forceSimulation for layout and d3.geoPath for mapping state and county locations. Summary panels on the left and right aggregate responses into filterable categories, while the middle panel displays geographic distributions. Data originates from a Google Sheets document loaded via the gist source, with custom JavaScript functions transforming raw survey answers into derived feature sets, technology stacks, and consumer types for multi-dimensional filtering and analysis.

Aadilyalcin
76% match
Loading thumbnail…

Fosterly Intern Match

Fosterly Intern Match visualizes intern applicants as an interactive scatterplot, where each point represents a candidate and clusters reveal patterns across schools, degrees, job types, and preferred locations. The left panel filters by academic attributes like school and graduation date, while the right panel shows geographic preferences, and the middle panel breaks down categorical fields such as majors and job interests. Built with d3.forceSimulation for point layout and d3-geo for map-based location views, the visualization pulls live applicant data from a Google Sheets document, enabling dynamic filtering and zoomable record details through the KSHF configuration framework.

Aadilyalcin
73% match
Loading thumbnail…

Social Network graphic

This social network graphic visualizes family relationships using a force-directed layout, with nodes representing individuals and links showing connections weighted by line thickness. The red circular nodes display names and support dragging, while blue links scale their stroke width based on relationship weight. Built with d3.v4 and the legacy d3.layout.force API, the visualization loads data from family.json and renders everything as SVG. The simulation applies gravity, charge, and distance parameters to position nodes dynamically.

Ssumanthsomu1
63% match
Loading thumbnail…

Famil Tree

This visualization shows a family tree with colored circles representing individuals and lines connecting parents to their children. The data is hardcoded as a list of parent-child relationships, and the tree layout is computed using D3's `d3.stratify()` and `d3.tree()` functions. Rendered as an SVG with animated transitions, nodes are drawn as circles styled with pink fills and blue strokes, while text labels appear inside each circle. The animation uses D3's `.transition().duration()` to smoothly draw connections and reveal nodes over time.

SSnigdha6698
61% match
Loading thumbnail…

Social Network

This social network visualization displays family relationships using a force-directed graph, with orange links connecting labeled nodes that represent individuals such as “husband,” “wife,” and “daughter’s son.” The code loads family data from a JSON file and uses `d3.layout.force` with gravity, charge, and distance parameters to position the nodes. Node circles are styled with a blue fill, and link thickness reflects each relationship’s weight. Text labels are placed beside each circle using SVG groups, and node dragging is enabled via `force.drag`.

Ppavankalyan1507
60% match
Loading thumbnail…

network

A force-directed network graph maps family relationships from a CSV dataset, with nodes representing individuals and links showing connections. Node colors encode generation depth, computed via breadth-first search from root nodes, and labels identify each person. Dragging nodes repositions the simulation, while hovering reveals additional details in a tooltip. The visualization uses d3.forceSimulation for layout, d3.drag for interaction, and SVG rendering with D3 v7.

Sshreelasya.bezawada@gmail.com
60% match
Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed organization graph shows the relationships between five main nodes—Mama, Papa, Felix, Jutta, and Oma—each linked to child nodes with numerous leaf connections. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes, while SVG circles and lines render the network. Drag interaction allows manual repositioning, and node sizes vary from main nodes (40px) to leaves (5px), with colors defined in a separate colors.js module. The data structure is generated programmatically in data.js.

MMariusPaulRichter
60% match
Loading thumbnail…

CYF Active 2010 to 2016-11-09

This visualization shows the active youth population from 2010 to November 2016, with each individual represented as a point on a timeline. It displays demographic summaries like gender and race in left panels, alongside temporal spans for involvement start and end dates, birth dates, and current age in the middle panel. The visualization uses custom panel layouts configured through a JSON file, pulling data from a Google Spreadsheet via its public API. It relies on d3.js for rendering time-based intervals and categorical summaries, with the data processed through custom JavaScript functions for filtering and age calculation.

Aadilyalcin
60% match