D3 Starter Circle Packing

100%

D3 Starter Circle Packing

✓ Published0🌍 Public

Last edited Apr 17, 2021

Created on Apr 16, 2021

This example demonstrates a basic D3 circle packing layout using movie studio data loaded from a CSV file. It shows how to fetch and parse data with d3.csv, then converts string values to numbers for fields like budget, revenue, and popularity. The visualization relies on D3 version 5’s data handling APIs to prepare the dataset, though the packing layout itself is not yet implemented in the visible code. The page includes a JavaScript bundle and styles the body with a large text size, while the accompanying README links to a D3 v6 tutorial video.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Simple Circle Pack (d3 v4; CSV; 50 Lines)

This example demonstrates a circle packing visualization that encodes hierarchical data as nested circles, where the area of each circle represents a numeric size value. The visualization shows a dataset of car acquisition and trading history, with parent-child relationships defined by the CSV structure. The implementation uses d3.v4's `d3.stratify` to process the tabular data, `d3.hierarchy` with a size summation function to compute the tree structure, and `d3.pack` to generate the circle layout. Circles are rendered as SVG elements with white strokes and semi-transparent blue fills.

Oocean1225

78% match

Loading thumbnail…

Simple Circle Pack (d3 v4; CSV; 50 Lines)

This circle packing visualization uses a hierarchical treemap-style layout to display car ownership data from a CSV file. It presents nested circles representing categories like "cars," "owned," and "traded," with leaf nodes sized according to their numerical values. The visualization uses d3.stratify() to build the hierarchy from the flat CSV, d3.hierarchy() with a sum aggregation to compute node sizes, and d3.pack() to calculate circle positions and radii. Fifty lines of code render the result as semi-transparent SVG circles with white strokes on a fixed 300×200 canvas.

DDeanna Bosschert

75% match

Loading thumbnail…

D3 Starter Updating scatter plot

This example demonstrates how to build an updating scatter plot with D3 v5, visualizing the budget and revenue of the top 100 films by budget from 2000–2009. The plot uses `d3.csv` to load movie data, `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks, with circles representing each film. Axes include formatted tick labels and dashed gridlines. Hovering over a point changes its fill to red, though no tooltip is implemented. The visualization is rendered as SVG within a container, styled via an external CSS file.

Mmaxthamt

75% match

Loading thumbnail…

Circle-Packing II

This example visualizes a flat dataset of names and values using a circle-packing layout, where each person’s name appears as a separate circle. The visualization shows the hierarchical structure of the data through nested circles, with each circle’s size proportional to its value, though all values are equal here. The code uses the d3.pack layout to compute circle positions and radii, then appends SVG circles and text labels with clip paths to keep text within the circles. Data is loaded from a CSV file via d3.csv, and the hierarchy is built with d3.hierarchy and .sum().

CCBasis

74% match

Loading thumbnail…

Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV dataset containing movie rankings using D3.js. It displays the dataset's file size, row count, and column count on a webpage alongside a custom SVG image created in Figma. The code uses the `d3.csv` method to fetch data from a GitHub Gist URL, then formats and presents the metadata within an HTML `<pre>` element. The visualization combines static SVG graphics with dynamic data-loaded information.

SSharmilaChowdhari

74% match

Loading thumbnail…

Fork of D3 Starter

A scatter plot maps the area and perimeter of ten synthetic shapes, with points colored by shape category (round, triangle, quadrilateral, or polygon) using a legend. The visualization loads a CSV file via `d3.csv`, parses numeric fields, and renders SVG circles with `d3.scaleLinear` axes for area and perimeter. Shape grouping is determined by the number of sides, and `d3.schemeSet2` provides the categorical color palette. The chart uses margin conventions and axis labels to present the relationship between geometric measurements.

Bbalaaswitha@gmail.com

74% match

Loading thumbnail…

D3 in Action Chapter 5 - Example 10

This example demonstrates a stacked bar chart built with D3.js version 3.5.5, using the `d3.layout.stack()` API to layer six movie data series across 142 days. The visualization shows stacked rectangles representing daily values for each movie, with color encoding via `d3.scale.category10`. The chart includes custom axes rendered as SVG lines, with a numeric x-axis and y-axis displaying tick marks and gridlines. Data is loaded from an external CSV file (movies.csv) and rendered as SVG elements within a 500x500 pixel container. The code applies linear scales for positioning and height mapping, with bars drawn using SVG `rect` elements.

RRoxIv

73% match

Loading thumbnail…

Fork of Fork of Loading and Parsing CSV Data with D3.js

This example displays movie ranking data loaded from a CSV file, showing the file size, row count, and column count on a styled HTML page. The visualization includes a custom SVG image created in Figma, rendered alongside the data summary. The page uses D3.js version 7 to fetch and parse the CSV via the `d3.csv` method, then computes the output with `d3.csvFormat` to determine file size. Styling is handled with a separate CSS file, and the SVG is embedded as an external image.

SSharmilaChowdhari

73% match