Skip to main content
Log in
L

LI, CHENG-TSE

@dudulalala996·7 public vizzes

Loading thumbnail…

Fork of Fork of Circles with D3

This example demonstrates how to create a scatterplot-style visualization of circles using D3.js, with each circle positioned by explicit x and y coordinates and colored with distinct fills. The code uses D3’s `select` function and method chaining to bind an array of data objects to SVG elements, dynamically setting each circle’s center, radius, and fill via `.attr()` callbacks. A semi-transparent opacity is applied to all circles, and the visualization resizes to fit its container, drawing from static, hard-coded data.

Mar 21, 2024
Loading thumbnail…

Fork of Fork of Circles with D3

This example demonstrates how to create a scatterplot-style visualization of circles using D3.js, with each circle positioned by explicit x and y coordinates and colored with distinct fills. The code uses D3’s `select` function and method chaining to bind an array of data objects to SVG elements, dynamically setting each circle’s center, radius, and fill via `.attr()` callbacks. A semi-transparent opacity is applied to all circles, and the visualization resizes to fit its container, drawing from static, hard-coded data.

Mar 21, 2024
Loading thumbnail…

Fork of Fork of Circles with D3

This example demonstrates how to create a scatterplot-style visualization of circles using D3.js, with each circle positioned by explicit x and y coordinates and colored with distinct fills. The code uses D3’s `select` function and method chaining to bind an array of data objects to SVG elements, dynamically setting each circle’s center, radius, and fill via `.attr()` callbacks. A semi-transparent opacity is applied to all circles, and the visualization resizes to fit its container, drawing from static, hard-coded data.

Mar 21, 2024
Loading thumbnail…

Fork of Fork of Circles with D3

This example demonstrates how to create a scatterplot-style visualization of circles using D3.js, with each circle positioned by explicit x and y coordinates and colored with distinct fills. The code uses D3’s `select` function and method chaining to bind an array of data objects to SVG elements, dynamically setting each circle’s center, radius, and fill via `.attr()` callbacks. A semi-transparent opacity is applied to all circles, and the visualization resizes to fit its container, drawing from static, hard-coded data.

Mar 21, 2024
Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and position circles using D3.js’s data join pattern. It renders a fixed dataset of seven circles, each with explicit x and y coordinates, radius, and fill color, onto an SVG canvas sized to its container. The code uses `select`, `selectAll`, `.data()`, and `.join()` to bind the data and generate circle elements, then applies attributes like `cx`, `cy`, `r`, `fill`, and `opacity` through method chaining. The visualization shows a colorful, overlapping composition with semi-transparent circles, highlighting basic D3 selection and rendering techniques.

Mar 21, 2024
Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and position circles using D3.js’s data join pattern. It renders a fixed dataset of seven circles, each with explicit x and y coordinates, radius, and fill color, onto an SVG canvas sized to its container. The code uses `select`, `selectAll`, `.data()`, and `.join()` to bind the data and generate circle elements, then applies attributes like `cx`, `cy`, `r`, `fill`, and `opacity` through method chaining. The visualization shows a colorful, overlapping composition with semi-transparent circles, highlighting basic D3 selection and rendering techniques.

Mar 21, 2024
Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and position circles using D3.js’s data join pattern. It renders a fixed dataset of seven circles, each with explicit x and y coordinates, radius, and fill color, onto an SVG canvas sized to its container. The code uses `select`, `selectAll`, `.data()`, and `.join()` to bind the data and generate circle elements, then applies attributes like `cx`, `cy`, `r`, `fill`, and `opacity` through method chaining. The visualization shows a colorful, overlapping composition with semi-transparent circles, highlighting basic D3 selection and rendering techniques.

Mar 21, 2024