csantiagopaz

@csantiagopaz·4 public vizzes

Fork of Fork of Scatter Plot with Menus Including Species

A scatter plot of the Iris dataset uses D3 v6 selection joins and transitions to animate circles between axes as users change the X and Y variables through two dropdown menus. The reusable scatterPlot module applies either d3.scaleLinear or d3.scalePoint depending on whether the selected column is quantitative or categorical, and renders axes with d3.axisBottom and d3.axisLeft. The menu component uses a d3.dispatch for change events.

Nov 14, 2023

Loading thumbnail…

Fork of Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus, built with a custom D3 menu component using `d3.dispatch`, control which quantitative or categorical attributes map to the x and y axes. The chart uses `d3.scaleLinear` and `d3.scalePoint` for scaling, with SVG circles animated via `d3.transition` and `selection.join` for smooth updates.

Nov 14, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows the Iris Dataset as an animated scatter plot. A reusable chart function, inspired by Mike Bostock's "Towards Reusable Charts," cycles through different x-axis variables every two seconds, updating the position of circles via D3's data join and scaleLinear domains. The code uses d3.csv to load the data, d3.scaleLinear, d3.axisLeft, and d3.axisBottom for rendering, with SVG output and a setInterval driving the animation. Circles represent individual iris flowers, with the y-axis fixed to sepal length while the x-axis rotates among petal width, sepal width, petal length, and sepal length.

Sep 3, 2023

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling within an HTML page. The visualization displays circles, rectangles, lines, and a path, with groups using inline attributes for fill and stroke colors, while CSS classes apply stroke properties to line elements. The SVG is scaled using a transform, and the code references D3.js through an import but primarily relies on standard SVG and CSS for rendering. The accompanying JavaScript, though incomplete, attempts to create SVG elements dynamically using the Document API.

Aug 8, 2023