ma-jacobs

@ma-jacobs·12 public vizzes

maple oak scatterplot

This scatterplot uses leaf-shaped SVG symbols to compare the distribution of maple and oak observations across two numeric coordinates. The visualization loads external maple and oak illustration SVGs from an Amazon S3 bucket, converts them into reusable patterns via `d3.xml`, and applies them as fill patterns using D3 v5’s selection and scale APIs. Points are plotted with the `d3.symbolSquare` marker, while axes and titles are generated through `d3.axisBottom`, `d3.axisLeft`, and a custom text element. The chart’s data consists of nine labeled coordinate pairs representing the two tree species.

May 23, 2023

Loading thumbnail…

svg sample

This example displays the Wikipedia wordmark SVG logo inside a 500 by 500 pixel canvas, rendered as a static vector graphic. The page fetches the logo from the Wikipedia static-content URL and uses D3.js’s `select` and `xml` APIs to parse the external SVG file, then appends the parsed child nodes into an SVG container created with `d3.select`. The body’s 13-em font size is the only styling, with no interaction or animation.

May 16, 2023

Loading thumbnail…

Fork of Another tooltip example

This example shows a grid of small, simplified diagrams of what appears to be a plant or industrial layout, with each diagram containing several connected geometric shapes. Three nearly identical copies of the same diagram are placed side-by-side, with slightly varied positions and styling. The code uses nested SVG elements to embed the diagram definitions, and the JavaScript (utilizing `d3.select`) attempts to dynamically size and position station rectangles based on an array of station data, applying a `scaleFactor` of 0.8. However, the page is rendered statically, as the dynamic script is disconnected from the actual SVG markup.

May 15, 2023

Loading thumbnail…

Another tooltip example

This example demonstrates how D3 binds data to SVG rectangles that are rotated at different angles to create a plant-station diagram. The visualization uses d3.select and data joins to update rectangle properties like width, height, position, and fill color based on a hardcoded dataset. The SVG elements are transformed with rotate commands, while the markup also includes a separate hand-drawn schematic of a device with paths and circles. The code relies on D3 v6's selection methods and attribute manipulation, though the dataset shown in the script differs from the static rectangles in the HTML.

May 15, 2023

Loading thumbnail…

Rotation testing

This example tests how SVG rotation transforms reposition geometric shapes. It draws outlined reference squares at different coordinates, then overlays filled squares that have been rotated using both static SVG transform attributes and dynamic JavaScript calculations. The D3.js v6 code uses `select` and `append` to create rectangles, while a custom `rotate` function computes rotated coordinates for one placement. The SVG also includes a complex path of a suitcase, demonstrating how rotation interacts with detailed vector graphics. The visual compares rotation behavior across three test cases, showing direct rotation, rotation with translation, and rotation around a custom origin point.

May 1, 2023

Loading thumbnail…

join example (rect)

A sequence of five squares illustrates data joins with D3 v6, where each square's rotation is fixed to 45 degrees and its fill color depends on the data value. The example uses `d3.select` and `.data().join()` to bind an array of numbers to SVG `rect` elements, appending a `g` container for each new datum. Values above 30 appear orange, while others are light gray, demonstrating how join callbacks manage enter selections and apply visual encodings through attribute and style setters. The SVG rendering is handled directly in the browser.

Apr 11, 2023

Loading thumbnail…

join example

This example demonstrates a basic data join with D3.js v6, showing how an array of five numeric values becomes a set of circles in an SVG chart. Each circle’s radius is proportional to its corresponding data value, and circles with values above 30 are colored orange while others are light gray. The code uses `d3.select` and `selectAll` with `.data()` and `.join()` to bind the data to circle elements, updating the `cx`, `cy`, `r`, and `fill` attributes. The data is hardcoded as `myData`, and the rendering targets an SVG `<g>` element.

Apr 6, 2023

Loading thumbnail…

D3 Gallery tooltip example

This example shows a heatmap of the `heatmap_data.csv` dataset, with each cell colored according to its value using the `d3.scaleSequential` interpolator with the Inferno color scheme. Hovering over a cell triggers a tooltip that displays the exact value of that cell, implemented via mouse events and the `d3.select` API. The SVG rendering includes axes built with `d3.axisBottom` and `d3.axisLeft`, and the tooltip's position is set using `d3.mouse`.

Apr 4, 2023

Loading thumbnail…

Tooltip example

This example demonstrates a basic tooltip interaction: hovering over a green circle reveals a text box that follows the mouse cursor. The tooltip is created as a separate HTML `div` element positioned relative to the page. The code uses `d3.select` to append an SVG circle and the tooltip div, and employs the `.on("mouseover")`, `.mousemove`, and `.mouseout` event handlers with `tooltip.style` to control visibility and position based on `event.pageX` and `event.pageY`. It runs on d3.v7 and renders all visual elements as SVG.

Apr 4, 2023

Loading thumbnail…

D3 Starter

This example demonstrates a minimal D3 starter project that renders a single rotated red SVG rectangle, with an interactive tooltip that appears on mouseover. The page uses D3 v7, imported via a bundled script, to select the body element and append both the SVG and a tooltip div. JavaScript event handlers on the rectangle trigger D3 selections and transitions to control the tooltip’s opacity and text content, while the tooltip’s position is set using the event’s page coordinates. The visualization is purely static apart from this interaction, showcasing basic SVG drawing and event handling in D3.

Apr 4, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3 to generate a grid of alternating horizontal and vertical bands across the full viewport. Two masks reveal circular cutouts: the first exposes a black circle on a transparent background, while the second creates an inverse pattern. The code uses D3's `select`, `append`, and `join` APIs to efficiently construct SVG rectangles from `range(n)` data, with masks defined via SVG `mask` elements containing `rect` and `circle` shapes, rendering entirely as vector graphics.

Mar 30, 2023

Loading thumbnail…

Map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue ocean background. It uses D3.js version 5 to load geographic data from the World Atlas TopoJSON file and convert it to GeoJSON features. The map is drawn with the `d3.geoPath` and `d3.geoNaturalEarth1` projection, while `topojson.feature` extracts country boundaries from the dataset. The code appends paths for the sphere and each country, applying basic styling from an external CSS file.

Mar 29, 2023