Gorka Ribera

@riberagorka·2 public vizzes

d3 scatter plot

This example renders an interactive scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. Circles represent individual flowers, positioned using `d3.scaleLinear` for both axes, with margins and a fixed radius of 5 pixels. The visualization uses `d3.axisLeft` and `d3.axisBottom` to draw the y- and x-axes, and `d3.select` to append an SVG canvas that fills the browser window. Data is loaded asynchronously via `d3.csv` from a remote Gist URL.

May 17, 2024

Loading thumbnail…

basic circles d3

This example shows a simple D3.js visualization of seven semi-transparent circles in different colors and sizes on a light green background. The code demonstrates the D3 general update pattern and method chaining by selecting an SVG element, binding an array of circle data objects, and using the `join()` method to create circle elements. Each circle’s position, radius, and fill color are set via attribute functions. The example uses `d3.select` and `selectAll` with a hot-reload-friendly structure intended for tutorial purposes.

May 17, 2024