g1g10

@g1g10·14 public vizzes

Fork of AQI Data in Bangor, Maine Over Time

This visualization displays a line chart of Air Quality Index (AQI) data for Bangor, Maine, plotted over time using a natural curve. The chart uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear handling the axes. Data is loaded via d3.json from a TopoJSON world-atlas file, though the map features are not visualized. Interactive tooltips appear on each data point via SVG title elements. The visualization is styled with Poppins font and teal-colored marks, with the line and circles drawn using d3.line and explicit circle elements.

Oct 14, 2022

Loading thumbnail…

Iris Scatterplot 06 - Dropdowns

An interactive scatter plot of the Iris dataset lets users switch the x- and y-axis variables via dropdown menus. The chart displays sepal and petal measurements as scaled symbols, colored by species. The D3.js code uses `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for marker shapes, and transitions to animate marker positions when the axis selections change.

Sep 6, 2022

Loading thumbnail…

Iris Scatterplot 01

This example shows a scatterplot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis as small circles. The x and y scales are linear, with axes rendered using `d3.axisBottom` and `d3.axisLeft`. The code loads data with `d3.csv` from a remote URL, parses numeric fields, and uses `d3.scaleLinear` to position marks within an SVG. Point radius is fixed at five pixels, and the visualization is sized to the full browser window.

Sep 6, 2022

Loading thumbnail…

Iris Scatterplot 07 - Dropdowns with different data type

This interactive D3.js scatter plot visualization of the Iris dataset allows users to dynamically select which flower measurements (sepal length, sepal width, petal length, or petal width) to display on the x and y axes using dropdown menus. The visualization handles both numerical and categorical data types, rendering the three Iris species (Setosa, Versicolor, Virginica) as distinct symbols. Points are colored and positioned using D3's `scaleLinear` and `scalePoint` scales, with `transition` animations smoothly interpolating between states when users change axis selections via the `menu` component.

Sep 1, 2022

Loading thumbnail…

Iris Scatterplot 05 - Animations

This example cycles through all pairwise combinations of numeric columns in the Iris dataset, animating a scatter plot between states every three seconds. Each state transitions markers to new positions and updates axis titles, with staggered delays and durations controlling the visual flow. The visualization is rendered as SVG using D3 v7, with custom symbol shapes encoding species and linear scales mapping data values to coordinates. The animation leverages D3 transitions and a reusable scatter plot module, pulling data from a remote CSV file.

Aug 18, 2022

Loading thumbnail…

Iris Scatterplot 04 - Animations

This example visualizes the Iris dataset as an animated scatter plot, cycling through the four measured attributes (sepal length, sepal width, petal length, petal width) on the x-axis every two seconds, with sepal length fixed on the y-axis. Species are encoded using distinct symbols from `d3.symbolsFill`. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft`. Marks and axes update smoothly via `transition().duration(2000)`, creating a looping comparison of feature relationships while the SVG fills the viewport.

Aug 16, 2022

Loading thumbnail…

Iris Scatterplot 03

This interactive scatter plot animates through the four numerical measurements of the Iris dataset, cycling the x-axis every two seconds while keeping sepal length on the y-axis. D3’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs render distinct species shapes with axis ticks. The visualization uses `setInterval` and the `scatterPlot` reusable function, processing data loaded via `d3.csv` from a GitHub Gist, with an SVG output.

Aug 16, 2022

Loading thumbnail…

Iris Scatterplot 02

This scatterplot displays the Iris dataset, plotting petal length against sepal length for each flower specimen. The visualization uses a React framework with SVG rendering, employing D3.js functions like `scaleLinear` for axis scaling and `scatterPlot` for the mark generation. The code reads the data from a remote CSV file, parses numeric values, and renders circles with a fixed radius. Axes are labeled using D3's `axisBottom` and `axisLeft` positioned according to specified margins. The chart fills the entire browser window, adapting to the viewport dimensions.

Aug 15, 2022

Loading thumbnail…

D3-Arrays - merge

A green sine wave of circles moves continuously across the screen, with each circle’s vertical position and radius oscillating over time. The animation uses D3 v7’s `line` generator to draw a connecting path behind the circles, while `selectAll` and `join` update both the path and circle elements. Circles are generated fresh each frame via a custom `makeData` function, with rendering handled through SVG and a `setInterval` timer that adjusts the wave’s amplitude.

Aug 12, 2022

Loading thumbnail…

D3-Arrays

Fifteen black circles undulate in a vertical sine-wave pattern across a full-screen SVG. Each circle updates its vertical position based on a time-incremented angular offset, creating a smooth, animated wave. The example uses D3 v7's `select`, `range`, and `symbol` APIs, with a JavaScript `setInterval` driving the animation loop. Data is generated on the fly as an array of position objects, bound to circle elements via D3's data join, while SVG attributes are updated each tick.

Aug 12, 2022

Loading thumbnail…

Sol LeWitt Reproduction in d3 - multi pane01 -exercise

This example reproduces a Sol LeWitt wall drawing as a generative grid of black horizontal and vertical stripes, whose visibility is controlled by mask layers. The SVG rendering uses custom d3 selections and joins to create bands of `rect` elements, while d3’s `symbol` and `symbols` APIs generate the paths used inside the masks. Two mask definitions, created with `renderMask`, alternate filled and empty regions based on symbol parity, producing an interlocking pattern of geometric shapes across the canvas. The composition adapts to the full browser window size.

Aug 12, 2022

Loading thumbnail…

Sol LeWitt Reproduction in d3 - multi pane01

This example reproduces a Sol LeWitt wall drawing using overlapping black stripes and masked geometric symbols. Two sets of thin rectangles are drawn, one horizontal and one vertical, with each set clipped by a distinct SVG mask. The masks are built from large star-shaped paths generated with the d3 `symbol` API, and the entire composition is rendered as SVG. The code uses d3’s `select`, `range`, and `join` methods to construct the elements and applies the masks via `attr('mask', ...)`.

Aug 12, 2022

Loading thumbnail…

Sol LeWitt Reproduction in d3 - multi pane

This visualization reproduces a Sol LeWITT-style geometric composition using overlapping black grid lines. Horizontal and vertical stripes are drawn across the full screen, with two masks applied to reveal a diamond shape at the center. The inner mask cuts out the diamond from the horizontal lines, while the outer mask obscures the vertical lines outside that shape. Built with d3-selection, d3-range, and d3-symbol, the SVG rendering uses 100 rects per axis and a centered path symbol to define the mask regions.

Aug 12, 2022

Loading thumbnail…

Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt-style drawing using d3 and SVG. It shows a grid of thin black horizontal and vertical lines, arranged in bands, with a circular mask that reveals the lines in the center while hiding them elsewhere and a second mask that creates a central black circle outline. The code uses d3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the shapes. The program reads the full browser window dimensions for its canvas and draws a 100-band grid, placing the circle masks at the screen’s center.

Aug 11, 2022