Skip to main content
SimilarExport ZIP
100%

Gubs Intro course

✓ Published2🌍 Public
Hhquazza@gmail.com
Last edited Jan 28, 2025
Created on Jan 19, 2025
Forked from HTML Starter

This visualization displays dummy survey data for groups A through D, using black circles to represent each group’s total count with area proportional to the value via `d3.scaleSqrt`, while opacity encodes the total relative to 50. Group labels appear centered within each circle as white text. Built with D3 v7 and React, the SVG rendering positions circles horizontally with a fixed spacing, and the code demonstrates basic data binding with `selectAll().data().join()` for both circles and text elements.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Gubs Intro course

A fork of an introductory course example renders dummy categorical data as a bubble chart using the d3 v7 `pack` layout on an SVG canvas. Each of four groups (A–D) maps to a circle with area proportional to its `total` value, while the `percentResponse` field is logged but not visualized. The code selects the `#chart` div, appends an SVG, and applies the hierarchical circular packing algorithm to position and size the leaves.

GGabriel Ing
82% match
Loading thumbnail…

Circles with D3 and React

The visualization displays fourteen circles of varying radii and colors positioned across a 960-by-500 SVG canvas, with each circle’s center, size, and fill defined by a static array of objects. Built with React 19 and D3 v7, the app uses a `useRef` hook to select the SVG element and applies a D3 `select` and `.join` operation to bind the data array to circle elements. The code sets each circle’s `cx`, `cy`, `r`, and `fill` attributes directly from the data source, showing a straightforward declarative mapping of data to SVG shapes.

BBismark Kofi Owusu Sarfo
75% match
Loading thumbnail…

practice_with_h

This example shows a circle-packing visualization of eight data groups labeled A through H, where each circle’s area is proportional to a numeric value. Every two seconds, the visualization toggles between displaying the group’s total and its percentResponse metric. Using D3 v7’s `d3.pack` and `d3.hierarchy`, the circles animate smoothly to new positions and sizes via a `d3.transition` with a linear ease. The code renders to SVG, updating circle radii and text labels for the current value on each cycle.

GGabriel Ing
74% match
Loading thumbnail…

1 Circles with D3

A D3.js data visualization displays fourteen colored circles at fixed positions with varying radii and hex fills across an SVG canvas. The code imports circle data from a separate JavaScript module and uses D3's `select` API with a data join to append and configure each `circle` element. Rendering targets a 960 by 500 pixel SVG, with the visualization defined in a reusable function that binds the dataset to attributes like `cx`, `cy`, `r`, and `fill`.

BBismark Kofi Owusu Sarfo
74% match
Loading thumbnail…

Circles with D3

This example shows a set of seven colorful circles scattered across an SVG canvas, each with a distinct size, position, and fill color at 70% opacity. It demonstrates core D3.js v7 concepts including data binding, the General Update Pattern, and method chaining via `select`, `selectAll`, `data`, and `join` to render `circle` elements. The visualization uses static, data-driven coordinates and colors defined in a JavaScript array, rendered through an HTML import map loading D3 from a CDN. The code also showcases the `join` API for creating SVG circles within a container sized to the viewport.

CCurran Kelleher
73% match
Loading thumbnail…

Circles_1

A D3.js visualization renders four static shapes on an SVG canvas: two circles and two rectangles, each with hardcoded coordinates and fill colors. The circles appear at the top-left, followed by the rectangles further right and downward, demonstrating how to bind data arrays to SVG elements. The code uses d3.select, append, data, and enter to create the shapes, grouping circles into a dedicated SVG group element (`g`) before setting their positional and styling attributes via function callbacks. The example uses d3.v4 from the official CDN and displays no interactivity or animation.

MMettiHoof
73% match
Loading thumbnail…

Circles with D3 Cleaned Up

Fourteen colored circles, each with a unique position, radius, and color, are rendered on a 960×500 SVG canvas. The visualization demonstrates a clean, data-driven approach to drawing circles using D3 v7. The code binds an array of circle data to SVG circle elements using `selectAll`, `data`, and `join`, setting the `cx`, `cy`, `r`, and `fill` attributes directly from each data object. The data is defined in a separate module and the visualization logic is contained in a reusable `viz` function, making the example modular and easy to extend.

CCurran Kelleher
73% match
Loading thumbnail…

Circles with D3

This example displays a static collection of eight colored circles of varying sizes and positions on an SVG canvas. Each circle’s radius, stroke color, stroke width, and fill color are defined in a JavaScript array and rendered using D3’s data join with `selectAll`, `data`, `enter`, and `append`. The visualization demonstrates basic SVG shape creation with D3 v7, using attributes like `cx`, `cy`, `r`, `stroke`, and `fill` to map data properties directly to visual elements.

BBismark Kofi Owusu Sarfo
73% match