P

poppy

@poppy-nicolette·22 public vizzes

Loading thumbnail…

Untitled

A force-directed graph visualizes patent litigation and licensing relationships among technology companies, with nodes representing firms and links showing suit, licensing, or resolved cases. The visualization uses d3.layout.force to simulate physical forces, positioning nodes and enabling dragging, while SVG circles and text labels display the network. Data from a Thomson Reuters blog post about mobile patent suits drives the layout, with circular areas expanding on mouseover via transition animations. The graph runs in React, leveraging d3.v3 for the force simulation and tick-based position updates.

Loading thumbnail…

Untitled

This visualization generates a dense packing of animated circles that grow from the center of an SVG canvas. Using a quadtree data structure to optimize collision detection, the algorithm iteratively places new circles in the largest available gaps, gradually increasing the number of candidate positions per circle. The code uses `d3.quadtree()` for spatial indexing and SVG `circle` elements with `transition()` animations to scale each circle's radius from zero. The process continues for 25,000 circles, with fill opacity randomly varied between 50% and 100%, creating an organically growing, space-filling composition.

Loading thumbnail…

Untitled

A cursor-driven animation creates expanding, fading circles in response to mouse movement. Each pointer position triggers a new circle that grows from a tiny point to a radius of 100 pixels over two seconds while its stroke opacity fades to zero, then removes itself from the SVG. The code uses d3.v3 with SVG transitions, appending circles with `transition().duration(2000).ease(Math.sqrt)` and styling each stroke with a rotating `d3.hsl` color. A transparent background rect captures mouse and touch events to drive the particle generation.

Loading thumbnail…

Untitled

An interactive force-directed graph lets users create nodes by clicking, with new nodes automatically linking to any existing nodes within a 30-pixel radius. The visualization uses d3.layout.force for physics simulation, SVG circles for nodes, and lines for links, rendered in a React-free vanilla HTML page with d3.v3. A brown cursor circle tracks the mouse, and nodes are draggable via force.drag.

Loading thumbnail…

reusable_Scatterplot_w_symbols

This example visualizes the Iris dataset as a scatterplot, mapping petal length and sepal width to x and y axes, with each species distinguished by both color and symbol shape. It uses D3 v7 with the reusable `scatterPlot` module, which applies D3 scales, ordinal color and symbol scales, and SVG path generation. Axes are rendered with `axisLeft` and `axisBottom`, while the toggle function hides or shows the line layer. Data is loaded asynchronously from a CSV via `d3.csv`.

Loading thumbnail…

reusable_Scatterplot

This scatterplot visualizes the Iris dataset, mapping petal length against sepal width, with points colored by species using a D3 ordinal color scale. The visualization is built with a reusable `scatterPlot` function that leverages D3 scales (`scaleLinear`, `scaleOrdinal`) and axes (`axisLeft`, `axisBottom`). Data is loaded asynchronously via `d3.csv` from a GitHub gist, and the SVG rendering is driven by a data-join pattern. The chart includes adjustable margins, point radius, and a toggleable path element.

Loading thumbnail…

D3_vanilla_html_Scatterplot

This example presents a scatterplot of the Iris flower dataset, plotting petal length against sepal width. Each point is colored by species using a d3.scaleOrdinal with a custom color scheme, and d3.axisLeft and d3.axisBottom render the axes. The code loads CSV data via d3.csv, parses numeric fields, and maps data to pixel coordinates with d3.scaleLinear. SVG circles are joined to the data using selection.join, with a toggle function that can hide or show a line element, though that line is not initially rendered.

Loading thumbnail…

Jayess in Achteeemel

This piece is a typographic display that renders the phrase "Jayess in Achteeemel" as a large, centered text message. The visualization is implemented with D3 v7, using the library's `select` API to query and manipulate the Document Object Model, while the page structure is defined in HTML and styled with embedded CSS. The visual output is driven by the text content presented in the browser, with the rendering approach depending on D3’s selection and DOM interaction capabilities.

Loading thumbnail…

epi 5 d3 selection and exploration

This example shows a dynamic point cloud of fifteen circles that continuously orbit and pulse in size around the screen’s center. A thick, fixed purple polyline connects the points in sequence, while the circles themselves are rendered in cyan with a thin stroke. The animation updates sixty times per second via `setInterval`, using D3’s `line` generator and `select` API to bind new data to SVG `path` and `circle` elements. The data is generated procedurally with sine and cosine functions, varying each point’s position and radius over time, with no external dataset.

Loading thumbnail…

d3 sellection and exporation

Fifteen circles orbit around the center of the screen, their radii pulsing as they move along a tangent path. The visualization demonstrates d3 data joins using `selectAll`, `data`, and the `join` method to bind an array of objects to SVG circle elements. Each animation frame generates new data with `d3.range` and updates the circles' `cx`, `cy`, and `r` attributes inside a `setInterval` loop. The example uses d3 v6 with SVG rendering and continuous animation.

Loading thumbnail…

epi 5 js arrays and stuff

This example demonstrates JavaScript array manipulation and sorting techniques using D3’s `ascending` function. It creates a numeric range, filters, reverses, maps, and reduces the array while logging intermediate results. The code also sorts an array of object entries alphabetically by their `key` property using D3’s comparator, showing how to organize structured data. The data is generated programmatically and explores functional programming patterns with `forEach`, `filter`, `map`, and `reduce`.

Loading thumbnail…

epi 5 js arrays and other

This example demonstrates the simplest possible D3.js version 7 output: a single line of text, "Hello D3 version 7", rendered in the browser body. The code imports the `select` function from the D3 library and applies it to the document's body element, setting its text content. The page uses a 13em font size and no explicit data source, serving purely as a minimal verification that the D3 v7 library loads and executes correctly.

Loading thumbnail…

episode 5 js arrays

This example creates a grid-based generative drawing by rendering 100 horizontal and vertical black stripes overlaid with two SVG masks. The masks use large symbols from D3’s `symbols` API to carve circular and other geometric patterns into the stripes, producing a Sol Lewitt–inspired composition. The code uses `d3.select`, `range`, and the `.join` method to build the stripes, while the `renderMask` function dynamically appends `mask` elements and paths. The result is a layered, monochrome visual that combines repetitive linework with symbolic cutouts.

Loading thumbnail…

Fork of epi 4 full sol_lewit_repro with D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js to render intersecting horizontal and vertical black stripes across the full viewport. The stripes are masked by two overlapping patterns of D3’s built-in symbol shapes, created with the `symbol` and `symbols` APIs inside SVG masks. The first mask uses an inverted fill to carve out stripes, while the second applies a non-inverted mask, producing layered geometric contrast. The code builds an SVG via `select`, `append`, and `join` from D3 v6.6.1.

Loading thumbnail…

epi 4 full sol_lewit_repro with D3

Two layered grids of horizontal and vertical black stripes cover the full browser window, creating a dense crosshatch pattern. A large diamond-shaped cutout is visible in the center, formed by two inverted SVG masks that reveal the pattern beneath. The piece uses D3 selections and data joins to render 100 rectangles per direction, while the `symbol` API generates the diamond path used in each mask. This is a programmatic reproduction of Sol LeWitt’s geometric wall drawing style, rendered as dynamic SVG.

Loading thumbnail…

full sol_lewit_repro with D3

This work visualizes a Sol LeWitt-inspired wall drawing using cyan horizontal and magenta vertical stripes, both shaped by circular masks to create a central circular reveal. The piece renders as a full-window SVG using the D3.js library, leveraging D3's `select`, `range`, and `join` APIs to generate 100 stripe rectangles per direction. Two SVG masks define the overlapping black-and-white circle patterns that reveal the stripes within a circular aperture, with the horizontal and vertical bands intersecting at right angles.

Loading thumbnail…

sol_lewit_repro with D3

A generative visualization reproduces Sol LeWitt's geometric wall drawings by combining cyan horizontal stripes and magenta vertical stripes across the full viewport, with two circular masks creating a central lens effect. Built with D3.js, the code uses `range(n)` to generate 100 rectangles per orientation and `selectAll().join()` to bind data to SVG rect elements. Masking is implemented through SVG mask elements where one circle punches a hole in a dark field and the other inverts the pattern, demonstrating D3's SVG manipulation and data-driven rendering capabilities.

Loading thumbnail…

sol_lewit_repro

This example recreates a Sol LeWitt-inspired drawing using JavaScript and the SVG API, dynamically creating a full-screen grid of 100 horizontal and 100 vertical stripes. The code uses `document.createElementNS` to build SVG elements and applies circular masks (`circle-mask` and `circle-mask-2`) to reveal the horizontal lines in the center while showing the vertical lines outside that radius. The horizontal stripes are black, while the vertical stripes are magenta, creating a geometric contrast. The composition is generated entirely through loops with `setAttribute`, with the SVG canvas sized to the browser window.

Loading thumbnail…

JSBasics

This example renders an empty SVG canvas, showing a blank workspace that belies its title. The code is a JavaScript learning exercise, with a series of commented-out lessons covering variables, loops, functions, and object creation. It uses no external libraries, only the built-in SVG element and the browser's JavaScript console for output. The display is minimal, with the primary action occurring in the commented code, which serves as a tutorial on programming basics.

Loading thumbnail…

line svg

This example demonstrates how CSS and inline styles interact to control the appearance of an HTML heading, using the Atkinson Hyperlegible font. A blue `h1` element overrides a green CSS rule and a purple text class, while a hover state increases the font size and adds a red fill with reduced opacity. The page renders a largely empty SVG element, with magenta-colored bars and text styled through CSS classes. The code relies on standard HTML5, CSS styling, and the Google Fonts API to load the typeface, with React not visibly used in this minimal static page.

Loading thumbnail…

svg2

This example demonstrates a static bar chart rendered as inline SVG within an HTML page, using React conventions but no external libraries. It shows six rounded bars in descending height, with CSS classes controlling fill color, opacity, and paint-order, while inline styles override class rules for the background rectangle. The chart includes labeled categories A through F using SVG text elements. The page also displays two HTML divs with text, and loads the Atkinson Hyperlegible font from Google Fonts, with CSS controlling layout and typography throughout.

Loading thumbnail…

SVG FUNdamentals

This show-and-tell of the SVG fundamentals uses only raw SVG markup, with no external libraries, to demonstrate primitives like `<rect>`, `<circle>`, `<path>`, and `<text>`. It displays how shape order affects layering, as seen with the overlapping pink and purple circles, and contrasts filled figures with stroked outlines. The graphic also illustrates path commands, including cubic and quadratic Bézier curves, relative line movements, and arcs, all rendered directly in the browser. Points A, B, and C are explicitly labeled to clarify the control points of the quadratic curve.