Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Oct 16, 2022

Created on Oct 16, 2022

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This fork of D3 Starter demonstrates a minimal D3 version 7 setup, rendering a static grid of colored rectangles in an SVG canvas. The visualization shows a simple categorical heatmap-like pattern with varied blue, green, and yellow hues. The code imports the `select` function from D3 and uses it to update the page body text, while the SVG layout is hand-coded in HTML. No data loading or interactive behavior is included, focusing solely on the basic wiring of a D3 project.

Dd-schwabe

83% match

Loading thumbnail…

HTML Starter

This example demonstrates a basic treemap visualization using D3.js within an HTML page. It displays hierarchical data from a CSV file as nested rectangles, with each leaf node rendered as a colored square with a white text label. The code uses `d3.stratify()` to convert the flat CSV data into a hierarchy, `d3.treemap()` to compute the layout positions, and SVG `rect` and `text` elements for rendering. The rectangles are filled with a teal color and outlined in black, following the structure of the provided one-level dataset.

Ssgalhamdani

82% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple D3.js starter template that renders a grid of rectangles across the full window. The visualization uses nested loops to create SVG groups at regular intervals, with each group containing multiple rectangles positioned vertically. The code imports `select` and `range` from the d3.v7 library and uses data joins with `.join('rect')` to append elements. The page scales text to 13em and includes a YouTube tutorial link, while the JavaScript calculates grid margins based on window dimensions and sets the SVG size to fill the viewport.

JJeppeOEM

81% match

Loading thumbnail…

Fork of D3 Starter

A dynamic bar chart animates ten rectangles across the screen using D3 v7. The bars scale in height and width based on their index, with positions computed from the data values. The code selects the body, appends an SVG sized to the window, and uses `d3.range` to generate the dataset. Each rectangle’s position and size are set with attribute functions, creating a diagonal, staggered layout with light-blue fills.

Fferneyhoughedward@gmail.com

81% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the basic setup for a D3 visualization using version 7, with the body text styled at an extremely large font size. The page loads D3 from a CDN and includes a separate bundle.js script, showing the standard pattern of separating library imports from custom code. The visualization itself appears as a blank canvas with the word "Fork" rendered at 13em, serving as a template for users to build upon. The code relies on D3's core library, loaded via the unpkg CDN, with no additional data sources or specific D3 APIs invoked in the visible markup.

MMohamedMOsman

81% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic D3.js v7 setup with an SVG canvas, showing two outlined columns: a left column with a static blue circle and text label, and a right column that maps an array of seven numeric values to green circles of varying radii. It uses `d3.select` and the standard append/attr chain to construct the SVG structure, then applies `d3.scaleLinear` to map data domain [100,700] to a range of [1,10] for circle sizing. The right column’s circles are positioned linearly by index, while a text element is transformed and anchored. The code runs in a simple HTML file with D3 loaded via unpkg.

PPedram

81% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js starter template, rendering a single empty SVG rectangle on an 800x400 canvas. The visualization shows how to set up a basic D3 project with an HTML5 document structure and inline SVG. The code loads D3 version 7.0.4 from the unpkg CDN and uses JavaScript to define a simple graphic element, providing a foundation for building more complex data visualizations with the D3 framework.

Aanoptic

81% match

Loading thumbnail…

Fork of D3 Starter

This example shows a hierarchical tree of food categories, with Fruits, Vegetables, Grains, and Proteins branching into individual items. It uses d3.hierarchy and d3.tree to compute the layout, then renders links with d3.linkHorizontal and nodes as SVG circles and text labels. The data is embedded as a JavaScript object, and the visualization uses d3.v7 with an SVG rendering approach, assigning distinct colors to each category and its child nodes.

BBhargav Reddy

80% match