Fork

100%

✓ Published0🌍 Public

Last edited Apr 28, 2022

Created on Apr 28, 2022

This example visualizes a dataset of news themes and their associated article counts as a treemap. The React application parses a hardcoded object of themes, each containing news items, and uses D3 v7 to build a hierarchy with the `d3.hierarchy` and `d3.treemap` functions. Each theme is represented as a rectangle, sized by `news_count`, and colored via a `d3.scaleOrdinal` scheme. SVG rendering occurs through a selected `svgRef` element, with rectangles colored by category, though the display is incomplete as only a placeholder text is appended.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228

76% match

Loading thumbnail…

Fork - Colors pie with React & D3

This example demonstrates a simple React component that loads a CSV dataset from a GitHub gist and displays a summary message about it. The App component uses the useState and useEffect hooks to fetch the data with d3.csv, then passes it to a helper function that formats the file size, row count, and column count using d3.csvFormat. While the page is loading, it shows "Loading.." in a large preformatted text element. The visualization integrates React 16.9 for UI state management with D3 v5 for data parsing and formatting.

DDeepak Tomson

76% match

Loading thumbnail…

Fork - Data, D3, React

This example demonstrates how to load and summarize CSV data by combining D3 data utilities with React state management. The code uses D3's `csv` function to fetch a dataset of CSS named colors, then displays a text summary showing the file size in kilobytes, row count, and column count. React's `useState` and `useEffect` hooks manage the asynchronous data loading, with a "Loading..." message shown before the data arrives. The visualization is rendered as SVG in a minimal interface that dynamically updates once the data is parsed.

SScott Kanning

75% match

Loading thumbnail…

Fork of React & D3 Starter for Q2 SDV

This visualization presents a hierarchical tree of space exploration topics, covering celestial bodies, missions, and their subcategories. The D3 v7 tree layout positions nodes vertically, with custom shapes distinguishing each depth level: a red circle for the root, blue squares for the first tier, green triangles for the second, and small yellow circles for leaves. The SVG rendering uses `d3.hierarchy` and `d3.tree()` for layout, while `d3.linkVertical()` generates curved path links between parent and child nodes. The example is built within a React application using the `react-dom/client` API and D3 selection methods for DOM manipulation.

RRuthvik Bairaboina

74% match

Loading thumbnail…

Fork of Rendering Data with React

This fork renders CSS named colors as a vertical stack of horizontal strips, each colored by its hex value, loaded via `d3.csv` from a GitHub gist. Using React’s `useEffect`, `useState`, and `useCallback`, it fetches and maps the data into styled `<div>` elements. The visualization uses ReactDOM to inject the generated layout into the page, producing a simple, full-width color swatch column—a direct, non-interactive representation of the dataset’s order.

MMamveguh

74% match

Loading thumbnail…

Fork of sunburst react

This sunburst visualization displays hierarchical data from a CSV file containing publication metadata, showing the relationship between publication years, predicate types, and PMIDs. The visualization uses D3's partition layout and arc generator to create the radial layout, with slices colored according to the d3.scaleOrdinal color scale using schemeTableau10. React manages the component lifecycle through useEffect and useRef hooks, while D3 handles the SVG rendering of paths and labels, with a tooltip appearing on mouseover events to display additional date information.

MMark Lam

74% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a treemap visualization that recursively partitions a rectangular canvas into nested rectangles, with each leaf node sized proportionally to its value. The code builds the layout manually using D3’s `scaleLinear` for area allocation and `scaleOrdinal` with the `schemeCategory10` color palette. It also computes text dimensions with a custom `visualWidth` helper and uses CSS-based font-family detection for cross-system compatibility. The data is loaded from a local JSON file and rendered as SVG rectangles and text labels.

HhelloHailey-sketch

73% match

Loading thumbnail…

Fork of Tree

This fork-based visualization presents a tidy left-to-right tree showing programming languages organized by paradigm (root → paradigm → language → library), with shape encoding depth (★ paradigms, ▲ languages, ● libraries) and color encoding paradigm groups. Built with React and D3.v7, the example uses `d3.hierarchy` to construct the tree and `d3.tree().size()` to compute a tidy layout within an SVG canvas. The data is embedded directly in the script as a static JavaScript object.

Ppriyankachary1701@gmail.com

73% match