kathrynrbernard

@kathrynrbernard·13 public vizzes

D3 Scatterplot

This example visualizes the classic Iris dataset as a scatterplot, using D3 v7 to map sepal and petal measurements to x and y positions. It demonstrates the core D3 data-join pattern, binding CSV data from a GitHub gist to SVG circle elements via `d3.csv` and scale functions. The code initializes the visualization by loading the data, then relies on D3’s scales and axes to render the plot, with styling handled through inline CSS and JavaScript. A React starter variant is referenced in the README for framework integration.

Jan 20, 2023

Loading thumbnail…

JS in HTML

This example shows a minimal HTML page that combines plain text with the D3.js library, serving as a bare-bones starting point for web-based visualizations. The page renders the text “Hello HTML!” using CSS for styling with a large font size and center alignment. The HTML file loads D3 v7 via a CDN script tag, while a separate JavaScript file imports a named export from another module and logs both that imported value and the D3 object to the console. This illustrates basic module import and script loading patterns without any data or visual rendering.

Jan 13, 2023

Loading thumbnail…

D3 Selections - Exercise

This example demonstrates D3 selections and data joins by rendering a dynamic set of colored circles on an SVG canvas. The code generates data with `makeData`, producing evenly spaced circles with vertical sine-wave positioning, then binds it to the visualization using `selectAll` and the `.join()` pattern. Each circle receives random radius, fill color, and positioning attributes through D3’s selection API. The visualization relies on D3 7.8.0 and React, with the `vizData` function handling the enter-merge-update cycle for the circle elements.

Jan 13, 2023

Loading thumbnail…

D3 Selections

A set of circles animates vertically in a sine wave pattern, changing count over time to demonstrate D3 data joins. The code uses `select` and `data` to bind an array of objects with `x`, `y`, and `r` properties to SVG circles, then applies the `join('circle')` pattern to handle entering and exiting elements. Animation runs via `setInterval` at 60 frames per second, with `makeData` generating positions based on `Math.sin` and a time parameter. The visualization highlights the decoupling of data generation from rendering through a reusable `vizData` function.

Jan 10, 2023

Loading thumbnail…

JavaScript Arrays

This example demonstrates common JavaScript array operations using plain code and D3’s `ascending` comparator. It shows how functions like `range`, `forEach`, `filter`, `map`, `reduce`, and `sort` transform arrays, including sorting numeric values correctly and grouping entries by key. No visual output is rendered; the code logs intermediate results to the console. The example uses the `d3` library’s `ascending` function for stable sorts, building a practical reference for array manipulation basics.

Jan 9, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3 Exercise

This visualization reproduces a Sol LeWITT-style geometric composition using overlapping horizontal and vertical line grids. Four mask layers alternate line orientations and symbol shapes—including circles, diamonds, crosses, and triangles—to create a rhythmic interplay of foreground and background elements. The code uses D3 selections, `range`, `symbol`, and `symbols` APIs to generate SVG rectangles and paths, with masks defined via `renderMask` to invert or combine patterns across the full viewport.

Jan 6, 2023

Loading thumbnail…

Fork of GiRiB&W_Ep4-Sol_LeWitt-FullRepo Ex V2

This generative art piece reproduces a Sol LeWitt-inspired drawing using intersecting, masked striped rectangles. The work builds a grid of horizontal and vertical bars, which are selectively revealed through D3.js masks that contain geometric symbols from the `d3.symbols` API. Using D3 6.6.1, the code iteratively creates rectangles for each axis and applies custom SVG masks, using paths for rendering symbols like circles or crosses. The composition creates layered, overlapping forms driven by programmatic ranges and the `select`, `range`, and `join` functions.

Jan 6, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3 - Multiple Shapes

Two overlapping grids of horizontal and vertical rectangles form a Sol LeWitt-inspired composition, with each grid masked by a separate pattern of D3 symbols. The code uses d3.select, range, symbols, and symbol to generate SVG rectangles and mask shapes, defining two masks via svg.call and renderMask. One mask is inverted, creating intersecting geometric layering across the full browser viewport.

Jan 6, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3 - One Shape

This example reproduces a Sol LeWitt-inspired geometric artwork using D3 v3 with SVG rendering. It displays 100 horizontal and 100 vertical rectangles layered over each other, with circular masks creating a central circular reveal and its inverted counterpart. The code uses `d3.select` to append an SVG element, `d3.range` and data joins via `.join('rect')` to generate the rectangles, and SVG `<mask>` elements with appended rect and circle shapes to define the visibility patterns. The rendering dynamically fills the browser window based on `window.innerWidth` and `window.innerHeight`.

Jan 5, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces Sol LeWitt’s geometric wall drawing using the SVG API. It shows a grid of vertical and horizontal rectangles overlaid on the full window, with a central circular region left empty. Two SVG masks create the aperture: one hides the center for horizontal bars, the other hides everything except the center for vertical bars. The vertical bars are drawn first, then the horizontal bars are added and turn blue on hover. The piece is purely generative, using JavaScript to create SVG elements dynamically, with no external data source.

Jan 5, 2023

Loading thumbnail…

Pseudo Visualizations

A pseudo bubble chart shows a series of black circles of varied sizes positioned over a Cartesian coordinate grid, with axes drawn as black lines and a title labeling the graphic. Based on the code in `index.html`, the visualization is hand-coded as an SVG using plain `circle`, `line`, and `text` elements, with a Roboto font typeface and no data-driven binding. The example, authored by kathrynrbernard in the v3 source, serves as a static mockup rather than an interactive chart.

Jan 5, 2023

Loading thumbnail…

JavaScript Fundamentals

This example demonstrates JavaScript fundamentals through a minimal web page that logs a created person object to the browser console. The code walks through variable assignment, function declarations, arrow functions, and object mutation, ultimately using a concise ES6 arrow function with shorthand property names to create and output a person with first and last names. The page contains no visualization or external libraries, relying solely on native JavaScript and the console API to illustrate core programming concepts.

Jan 5, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and attributes on a simple HTML page. It shows circles, rectangles, lines, and paths, with comments explaining coordinate systems, fill colors, stroke properties, z-ordering, and path drawing commands like `M` (move to) and `L` (line to). The code uses plain SVG within an HTML document, with minimal CSS to remove default scrollbars, and no external libraries or data sources. The rendering approach is direct SVG elements, illustrating how primitives such as `<circle>`, `<rect>`, and `<path>` compose static vector graphics.

Jan 5, 2023