Akramjon1995

@Akramjon1995·9 public vizzes

Fork of ICE8 - Family Tree

This interactive family tree visualization displays a hierarchical genealogy of the Sammaiah family using D3.js v3. The tree layout arranges colored nodes representing family members, with each node color-coded by generation type and connected by labeled links showing relationship directions. Users can click nodes to collapse or expand branches, while CSS tooltips provide additional information on hover. The visualization loads data from a JSON file and renders as an SVG with zoom and drag capabilities.

Apr 9, 2023

Loading thumbnail…

Fork of Tree Example: ICE-8

This interactive family tree visualizes the Bandi Reddy lineage using a hierarchical node-link diagram rendered with SVG and D3.js v3. The visualization shows multiple generations of family members, with parent-child relationships represented by curved gray links and each node styled as a circle with the person's name displayed beside it. Nodes are color-coded by generation level using hex color values from the data, and the entire tree expands from a single root ancestor. The code defines the tree structure inline as a JSON object and uses D3's tree layout, with click interactions enabled on nodes for potential exploration.

Apr 9, 2023

Loading thumbnail…

Fork of Jeevani ICE8

This radial tree diagram visualizes the hierarchical classification of animals, branching from "Animals" into vertebrates and invertebrates, with further subdivisions down to specific classes. The visualization uses the D3.js library with a custom tree layout (`d3.layout.tree`) and diagonal link projection to create curved edges between nodes. Node colors and stroke types differentiate taxonomic levels, from the root through phyla to individual classes, with hover-enabled cursor pointers and a color-coded legend implied by the `type` and `level` fields. The SVG rendering includes a 750-millisecond animation duration for smooth transitions between hierarchy updates.

Apr 3, 2023

Loading thumbnail…

Fork of Jeevani ICE8

This example shows a static, branching tree diagram of the animal kingdom, organizing species into a hierarchical structure from "Animals" down to specific classes like Mammals, Birds, and Insects. The visualization uses a collapsible node-and-link layout, where each node is a circle with a text label, and the connections are curved paths. Built with the D3.js library (version 3.5.17), the code defines the tree data as a JSON object and uses `d3.layout.tree` for positioning and `d3.svg.diagonal` to draw the connecting curves. The SVG canvas is generated directly in the HTML page, with node styling and colors specified via CSS classes.

Apr 3, 2023

Loading thumbnail…

Fork of Example

A collapsible D3 tree diagram visualizes the hierarchical relationships within a dataset on hip replacement rankings, organized by country, city, institution, and expert. The visualization uses a tidy tree layout calculated with `d3.tree()` and rendered with SVG paths. Data is loaded asynchronously from a CSV file via `d3.csv`, then processed into a nested tree structure. The hierarchy is built with `d3.hierarchy()`, and nodes use `d3.linkHorizontal()` for curved connecting links, with animations for collapsing and expanding branches.

Mar 27, 2023

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a minimal React component that asynchronously loads a CSV file of CSS named colors using D3’s `csv` utility, then displays summary statistics about the dataset. The app uses React hooks (`useState`, `useEffect`) to manage the loading state, showing “Loading...” until the data arrives. Once fetched, it renders a formatted message with the file size in kilobytes, row count, and column count via a custom `message` function. The visualization is purely text-based, highlighting the integration of D3 data parsing with React’s declarative state management.

Jan 29, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 in a React application. It displays the file size, row count, and column count of a CSS Named Colors dataset fetched from a GitHub gist. The code uses `d3.csv` to fetch and parse the data, then calculates metrics with `d3.csvFormat` and `data.columns.length`. An alternative approach using the Fetch API, `async/await`, and `d3.csvParse` is included as commented-out code. The results render into a large-text `<pre>` element via `textContent`.

Jan 29, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency and engine power for various car models, using a scatter plot where point color indicates country of origin and point size reflects vehicle weight. The visualization is built with Vega-Lite’s API, with the specification defined in `viz.js` and rendered via D3. Data comes from the UCI Auto MPG dataset, loaded asynchronously using `d3.csv`. The chart is configured with custom axis styling from `config.js`, and includes interactive tooltips via `vega-tooltip`.

Jan 26, 2023

Loading thumbnail…

Loading and parsing svc data

This example loads and parses a CSV file of CSS named colors using the Fetch API and D3 v7's `d3.csvParse`, logging the record count and file size in kilobytes to the console. The visualization itself is an interactive React component rendering an SVG circle that tracks the mouse position via `onMouseMove` and React state. A commented-out React starter alternative is included. The page demonstrates a minimal HTML setup with CSS styling, though the primary data-processing behavior is limited to parsing and console output.

Jan 8, 2023