Bryan Baird

@BryanBaird·5 public vizzes

Reusable Scatterplot with 3 variable menus

This interactive scatterplot displays the Iris dataset, allowing users to dynamically select which variable controls the x-axis, y-axis, and point radius through three dropdown menus. Built with D3 version 7, it uses `d3.csv` to load data and `d3.scaleLinear` and `d3.scaleSqrt` for scaling. SVG circles transition smoothly between positions and sizes via `d3.transition`, while axes update through `d3.axisLeft` and `d3.axisBottom`. The code implements reusable chart and menu functions, demonstrating D3's `dispatch` event system for handling user interactions.

Jul 2, 2023

Loading thumbnail…

Reusable Scatterplot with radius and animation

This interactive scatterplot visualizes the Iris dataset, letting users choose which variables map to the x-axis, y-axis, and point radius via dropdown menus. Built with D3 version 6, the reusable `scatterPlot` module uses `scaleLinear` and `scaleSqrt` for positioning and sizing, with smooth `transition()` animations on circle and axis updates. The interface is assembled from a custom `menu` component, and the SVG rendering responds instantly to any variable selection.

Jul 2, 2023

Loading thumbnail…

Reusable Scatterplot

This interactive scatterplot demonstrates a reusable D3 component that visualizes the Iris dataset, cycling through different combinations of sepal and petal measurements every two seconds. The chart animates smoothly as the x-axis, y-axis, and point radius change between variable pairings, using D3's transition API for the morphing effect. The implementation builds a custom `scatterPlot` function that leverages `scaleLinear`, `scaleSqrt`, and `axisBottom`/`axisLeft` to render axes, while the join operation handles circle updates and transitions. The JavaScript code fetches the CSV data from a GitHub gist and binds it to the plot's configurable `xValue`, `yValue`, and `radius` properties, showing how D3’s modular design supports adaptable, data-driven visualizations.

Jul 2, 2023

Loading thumbnail…

d3 in vanilla javascript

This example visualizes malaria deaths per 100,000 people across countries, comparing reported values from the years 2000 and 2001 on logarithmic scales. Circles representing countries are positioned by their death rates, with Angola and Kenya highlighted by larger radii. The code loads data from a CSV using d3.csv, employs scaleLog and extent for scaling, and renders an SVG with d3.select and join to create circle marks. Axes are added via axisLeft and axisBottom.

Jul 2, 2023

Loading thumbnail…

D3 Playground

This example demonstrates basic D3.js v7 shape generation and data binding on an SVG canvas. It renders a small bar chart from an array of four numbers, with black rectangles positioned through the enter selection pattern, and places a large red symbol from `d3.symbol` at the center of the viewport. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to draw the geometric forms, while sizing the visualization to match the full browser window dimensions.

Jun 26, 2023