royable88

@royable88·32 public vizzes

Scatter Plot Including Species

This interactive scatter plot displays the Iris dataset, with petal and sepal measurements plotted on each axis. Users can switch between quantitative attributes and the categorical species column via two dropdown menus, which update the visualization through D3 transitions. The chart uses D3 scales, axes, and SVG circles with a 1000ms transition for smooth updates, while the menu system leverages a custom dispatch-based event handler.

Feb 16, 2023

Loading thumbnail…

Fork of Animated Scatter Plot with Menus bug

This example shows an animated scatter plot of the Iris dataset with interactive dropdown menus to switch which flower measurements are plotted on the x and y axes. Built with D3.js and React, it uses `d3.csv` to load data, `scaleLinear` and `extent` for axes, and `transition` with staggered delays to animate circle positions between selections. The plot renders as SVG, with menus created via a custom `menu` function using D3’s `dispatch` for change events.

Feb 14, 2023

Loading thumbnail…

Animated Scatter Plot with Menus

This interactive scatter plot, built with React and D3, visualizes the Iris dataset, allowing users to dynamically select which sepal and petal measurements to display on the x- and y-axes through dropdown menus. The visualization employs animated transitions, using D3's `transition` API to smoothly move the circles between positions as the axes change. The plot is rendered as an SVG, with axes drawn using D3's `axisLeft` and `axisBottom` functions, and the dropdown menus are created using a custom D3 module. The data is loaded from a CSV file using D3's `csv` function.

Jan 27, 2023

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through different flower measurements every two seconds. Built with React and D3 v7, it uses `scaleLinear` and `extent` for axes, with circles rendered via SVG. A reusable `scatterPlot` function updates positions using `transition` with staggered delays, while `axisLeft` and `axisBottom` refresh axes. Data loads from a CSV via `csv` and `parseRow`, and `setInterval` triggers re-renders with new x-values.

Jan 26, 2023

Loading thumbnail…

Fork of D3 Dynamic

This example shows a dynamic scatter plot of the Iris dataset, with the x-axis cycling through different flower measurements (petal width, sepal width, sepal length) every two seconds. Built with React and D3 v7, it uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes. Points are rendered as SVG circles via data joins, with the plot’s accessor functions updating the x-value mapping on each interval, re-calling the chart to animate transitions.

Jan 26, 2023

Loading thumbnail…

Fork of D3 Scatter Plot

This is an interactive scatter plot built with React and D3, rendering as an SVG. It visualizes the Iris dataset, plotting petal width on the x-axis against sepal length on the y-axis. The example uses D3's scaleLinear, extent, axisLeft, and axisBottom to map data points and draw the chart axes. It employs a chainable setter pattern in the scatterPlot function to configure its properties. The code also demonstrates how to load CSV data using D3’s csv function and how to dynamically size the visualization to the viewport.

Jan 25, 2023

Loading thumbnail…

Reusable D3 Scatter Plot Symbol

This example demonstrates a reusable D3 scatter plot symbol component, displaying the Iris dataset with petal width on the x-axis and sepal length on the y-axis. Different iris species are rendered using distinct symbols via the `d3.symbol` API, with `d3.scaleOrdinal` mapping categories to symbol types. The visualization is built for React using an SVG rendering approach, where `d3.scaleLinear` handles axis scaling, `d3.axisLeft` and `d3.axisBottom` generate the axes, and `d3.extent` computes data domains. The component is configurable through a chainable interface, allowing flexible specification of dimensions, margins, and value accessors.

Jan 25, 2023

Loading thumbnail…

D3 Scatter Plot

This example uses D3.js to create a scatter plot of the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis. The visualization displays each flower as a circle with a fixed radius, scaled using D3’s `scaleLinear` and `extent` functions, with axes generated via `axisLeft` and `axisBottom`. Rendering is done with SVG elements inside a React component, and the data is loaded asynchronously from a CSV file using `csv` from D3. The code’s custom `scatterPlot` function uses a getter-setter pattern to configure width, height, margins, and value accessors.

Jan 25, 2023

Loading thumbnail…

Fork of D3 Scatter Plot2

This visualization shows the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Each of the 150 flowers appears as a small circle positioned using D3’s `scaleLinear`, with axes generated by `axisLeft` and `axisBottom`. The code loads the CSV data via `d3.csv`, parses numeric fields, and renders the marks as SVG circles, with the chart sized to fill the browser window. The example uses D3 v7 within a React-independent HTML page.

Jan 20, 2023

Loading thumbnail…

Fork of D3 Scatter Plot2

This scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis with circular SVG marks. The code uses D3 v7’s `csv` loader to fetch and parse the data, then applies `scaleLinear` and `extent` to compute domains, with `axisLeft` and `axisBottom` rendering the axes. Data points are drawn as circles via the `join` pattern, sized at a fixed radius, within a full-window SVG canvas.

Jan 20, 2023

Loading thumbnail…

Function test 1

This example presents a nearly empty HTML page with an embedded YouTube video. The page’s only content is the video iframe, which plays the clip referenced by the URL embed code. The `index.html` file contains no JavaScript or data-processing logic, only a script tag left blank. The visualization consists solely of the external video content, with no custom rendering, libraries, or data sources used in the code itself.

Jan 16, 2023

Loading thumbnail…

Fork of D3 Selection Exploration

This example demonstrates dynamic data binding with D3 selections by rendering a set of circles that continuously change position, radius, and count over time. It uses the D3 v7 `select` and `range` functions along with the `join` method to manage enter, update, and exit states. The animation runs on a `setInterval` timer, updating a sine-wave-based dataset that controls each circle’s x-coordinate, y-coordinate, and radius. The visualization renders as an SVG canvas that fills the browser viewport, showing how D3’s data-join pattern efficiently handles fluctuating data sizes.

Jan 6, 2023

Loading thumbnail…

D3 Selection Exploration

A grid of ten circles undulates vertically in SVG, their radii and positions governed by sine waves. This animation explores D3's data joins by using `d3.selectAll`, `data`, and `.join('circle')` to bind an array generated with `range` to the circles. The setInterval-driven loop updates positions every 100ms, demonstrating how enter, update, and exit selections work, with the circle count oscillating between five and fifteen.

Jan 3, 2023

Loading thumbnail…

JS in HTML

This example demonstrates how D3 v7 can be embedded directly within an HTML page alongside modular JavaScript imports to create a simple text-based visualization. The page displays the static string “Hello HTML!” centered on a blank canvas, while the accompanying script logs output to the browser console using `console.log`. The code imports D3’s `select` function, along with custom modules, illustrating a modular structure where constants like `thing` and `something` are composed across files. The visualization itself is minimal, focusing on the integration of D3’s selection API within a standard HTML document.

Dec 29, 2022

Loading thumbnail…

Fork of D3 Selection Exploration

Animated circles move in a sine-wave pattern across an SVG canvas, with their vertical position and radius oscillating over time. This fork dynamically updates the number of visible circles between 5 and 15 based on a continuously incrementing time variable. The code uses D3 v7's `select` and `range` functions, along with the data-join `.join()` method to efficiently add and remove circle elements each animation frame.

Dec 19, 2022

Loading thumbnail…

Pseudo Scatter Plot

A pseudo scatter plot presents a field of black circles over a solid green background, with a single red circle accenting the upper right. The composition appears to be a static, abstract approximation of a data distribution, with points placed at arbitrary coordinates. The visualization is built with raw SVG elements inside an HTML document, using a `<rect>` for the background and `<circle>` tags for the data points. A `<triangle>` element is also included, though it is not rendered as a circle. The code relies on standard SVG APIs rather than a JavaScript library.

Dec 16, 2022

Loading thumbnail…

Fork of Fork of For of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, rendering a grid of horizontal and vertical SVG rectangles overlaid with two circular masks. The first mask creates a circular hole in the center of the horizontal lines, while the second mask reverses the effect, leaving a solid circle in the middle of the vertical lines. The code uses `d3.select`, `d3.range`, and the `.join()` method to construct the SVG elements, with masks defined via `append('mask')` and composed of `rect` and `circle` shapes.

Dec 16, 2022

Loading thumbnail…

Fork of Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 with SVG rendering, layering horizontal and vertical striped rectangles over masked symbol shapes. The code generates 50 horizontal and vertical bars positioned incrementally, then applies two masks—one containing a row of D3 symbols (circles, crosses, diamonds, etc.) and another with a large central triangle. The masks alternate inverted fills, creating intersecting cutout effects where the stripes show through the symbol shapes. The visualization updates dynamically to the browser window dimensions, demonstrating D3’s `range`, `symbol`, and `join` methods for procedural art.

Dec 16, 2022

Loading thumbnail…

JavaScript Arrays

This example explores JavaScript array methods using D3’s `ascending` and custom functions. It defines a `range` generator to create an array and demonstrates commented-out operations like `forEach`, `sort`, `map`, and `reduce`. The active code sorts an array of objects by their `key` property using `entries.sort((a,b) => ascending(a.key, b.key))`, logging the reordered result. No visual output is rendered; the focus is on console-based array manipulation with array methods and D3’s comparator.

Dec 15, 2022

Loading thumbnail…

Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of alternating horizontal and vertical rectangles. The rectangles are masked by two overlapping circular symbols, one inverted, to create the final visual composition. The code leverages `select`, `range`, `symbol`, and `symbols` from D3, rendering SVG shapes across the full window dimensions. The masks are built with appended `mask` elements and paths, using D3’s `join` for efficient data binding.

Dec 14, 2022

Loading thumbnail…

full Sol LeWitt Reproduction with D3

This example shows a full-screen abstract geometric composition inspired by Sol LeWitt, built with D3 v7 and rendered as SVG. Two sets of overlapping horizontal and vertical striped rects create a grid, while a diamond-shaped mask and a circular mask reveal different sections of the pattern. The code uses `d3.select`, `d3.range`, `d3.symbol` with a square symbol, and `.join()` to generate the shapes. The masks are constructed with `svg.append('mask')`, combining black and white rects and paths to control visibility.

Dec 14, 2022

Loading thumbnail…

Fork of For of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using pure SVG rendering. It generates 100 horizontal and 100 vertical rectangular strips that are clipped by two circular mask regions, creating a grid-based geometric composition. The visualization relies on D3.js v7 methods including `select`, `append`, `range`, and the `join` operator to efficiently create SVG elements. Two SVG masks (`circle-mask` and `circle-mask-2`) define the visible areas, with the first mask using a black rectangle and white circle, while the second inverts this pattern to achieve the final layered effect.

Dec 9, 2022

Loading thumbnail…

For of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical bars on an SVG canvas. The bars are masked by two circular regions, creating an intersection of striped patterns that reveal and conceal different areas of the composition. The code uses `d3.select` and `d3.range` to build the marks, and applies SVG `mask` elements with contrasting black-and-white rectangles and circles to shape the final visual. The rendering fills the entire browser window, with the artwork centered around a 200-pixel-radius circle.

Dec 9, 2022

Loading thumbnail…

Fork of Fork of Fork Sol LeWitt Reproduction Mask Inverse

A grid of horizontal and vertical SVG rectangles fills the screen, but two circular masks invert their visibility. A white circle in a black mask reveals a central block of horizontal lines, while a black circle in a white mask hides the same area from vertical lines. This creates a cross-hatched pattern with an empty circular void at the center. The code uses d3 selections, data joins, and SVG mask elements.

Dec 9, 2022

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This reproduction of a Sol LeWitt wall drawing uses SVG to display two sets of perpendicular, evenly spaced horizontal and vertical lines. A circular mask restricts the visible pattern to a central disc, creating a clean, geometric composition. The code uses the Document API (`document.createElementNS`) to build the SVG structure and applies a `<mask>` with a `<circle>` to clip the lines. It generates one hundred horizontal and vertical `<rect>` elements, each ten pixels thick, with the horizontal band masked. The visual effect directly mimics LeWitt’s instructional art, translating his line-based system into an interactive browser window.

Dec 8, 2022

Loading thumbnail…

Sol LeWitt Reproduction

This example displays a Sol LeWitt-inspired geometric composition, rendering a series of vertical black bars across a white background. The code creates a full-screen SVG canvas using the native JavaScript `document.createElementNS` API. It draws 100 rectangles, each 10 pixels wide and spaced 20 pixels apart, with heights set to match the viewport’s inner height. The rigid, repeated pattern mirrors LeWitt’s minimalist wall drawings, and the approach directly translates a simple algorithmic grid into scalable vector graphics.

Dec 8, 2022

Loading thumbnail…

JavaScript Basics

This example shows a blank SVG canvas with a hidden JavaScript lesson. The page contains numerous commented-out code snippets covering JavaScript basics such as variables, functions, objects, and loops. The only active code is an empty SVG element with fixed dimensions. The reproduction references a Sol LeWitt art piece but renders no visual output, as all logic remains commented and no drawing API is invoked. The SVG is static with no interactions or data bindings.

Dec 5, 2022

Loading thumbnail…

Fork of Pseudo Line Chart

The visualization approximates a horizontal bar plot using a single thick black polyline that zigzags across an 845x389 SVG canvas against a white background. Data points are connected sequentially, with the line’s vertical positions suggesting categorical values along a baseline. Rendered as static SVG, the chart employs the Share Tech font for text and relies on raw `<path>` coordinates rather than a charting library, demonstrating a hand-coded pseudo-chart approach. The SVG `stroke-width` and `stroke-linejoin` attributes define the bold, rounded line style.

Dec 4, 2022

Loading thumbnail…

Pseudo Horizontal Bar Plot

Four labeled bars approximate a horizontal bar plot using SVG rectangles. The first bar is red with a black outline, while the remaining three bars are dark gray. Two texts mark categorical labels A through D on the left axis. The HTML file defines a 960 by 500 pixel SVG canvas, using the Share Tech font at 72 pixels to display labels. The layout uses fixed coordinates to position each bar, but no interactive elements or data bindings are present.

Dec 2, 2022

Loading thumbnail…

Pseudo Bar Plot

This pseudo bar plot approximates a traditional bar chart using four wide, dark rectangles of varying heights arranged across a 960 by 500 SVG canvas. The rectangles, positioned at increasing x-coordinates with decreasing y-coordinates, visually suggest quantitative categories without any axes, labels, or data encoding. The rendering relies entirely on raw SVG `rect` elements defined in the HTML, without employing any external JavaScript libraries like D3 or Three.js. The design focuses solely on the geometric silhouette of bars, leaving all chart context and semantic information absent.

Dec 1, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles of varying sizes and colors, a line, and two paths with different stroke settings. It shows how basic geometric primitives can be positioned and styled within an SVG canvas. The code uses raw SVG elements like `<circle>`, `<line>`, and `<path>`, with attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width`. A commented-out `<rect>` suggests additional shape options. The rendering relies on the browser's native SVG support, with no external JavaScript libraries.

Nov 30, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG graphics by rendering a single circle element within an HTML page. The visualization uses the native SVG API through the `<svg>` and `<circle>` tags, which are written directly into the document structure. The circle is drawn without any explicit dimensions or styling attributes, so it defaults to the browser’s standard SVG rendering behavior. The code shows the minimal setup required for embedding vector graphics in a webpage, with the rendering handled by the browser’s built-in SVG engine rather than any external library.

Nov 24, 2022