D

Donald Bagwell

@drbagwell·55 public vizzes

Loading thumbnail…

D3 selection and Exploration

A collection of animated circles moves across the screen, their positions and sizes oscillating in a wave-like pattern over time. The visualization demonstrates dynamic data binding and updates in D3 v7, using `select`, `range`, and the `.join()` method to create and modify SVG circle elements at 60 frames per second. The animation is driven by `setInterval`, recalculating each circle's x-coordinate, y-coordinate, and radius based on sine functions that incorporate a continuously incrementing time variable.

Loading thumbnail…

Fork of Circles with D3

This example showcases five static, semi-transparent circles scattered across an SVG canvas, each with a distinct size, position, and color. The code uses D3 v3’s `select` and data joins to bind an array of circle objects to SVG elements. Rendering is driven by setting attributes like `cx`, `cy`, `r`, and `fill` directly from the data, with a fixed opacity value of 0.5. The visualization is a minimal demonstration of D3’s declarative approach to creating simple geometric shapes from a hardcoded dataset.

Loading thumbnail…

Fork of D3 Transitions drb

Six colored circles of varying radii animate onto a light green canvas, each growing from zero to its target size at a staggered pace. The circles then reposition themselves to new coordinates with a quicker, linear easing transition, while any removed circles shrink back to nothing. Built with D3 v7, the example demonstrates the `transition` API, using `selection.join` to handle enter, update, and exit states, with explicit `duration` and `easeLinear` settings controlling the two distinct animation speeds.

Loading thumbnail…

march 2024 Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 Runtime Environment's "Hello World" starting point, showing how a simple `main` function exported from `index.js` renders HTML directly into a provided container DIV. The code sets a fixed `fontSize` of 214 pixels and injects a styled div with centered text, showcasing the streamlined entry point that replaces traditional `index.html` files. Hot reloading enables live editing, where dragging a number while holding the Alt key updates the font size in real time, supported by the runtime's interactive widgets.

Loading thumbnail…

Fork of Viz Function Conceptdrb

This example demonstrates a reusable "viz function" pattern for structuring D3.js graphics. It renders a simple rectangle with configurable margins, dimensions, and fill color, computed from the container size. The code separates the visualization logic in `viz.js`, which accepts an SVG selection and an options object, while `index.js` initializes the SVG using D3's `select` and `join` methods. This refactoring highlights how to encapsulate and parameterize chart code for flexibility.

Loading thumbnail…

Fork of Marginsdrb

This example demonstrates how margins define the inner rectangle of a visualization, reserving space for axes while constraining the area for marks. It uses D3.js version 7.9.0, specifically the `select` API, to render an SVG that fills the container. The code calculates the inner width and height by subtracting fixed 50-pixel margins from the container dimensions, then draws a gray rectangle (`#B5B5B5`) positioned at those margin offsets. The rendered output is a static filled rectangle, serving as a template for layout structure.

Loading thumbnail…

Fork of Solar Systemdrb

This animated visualization displays the planets of the Solar System in a horizontal sequence, with relative sizes scaled proportionally but orbital distances compressed. Each planet appears as a colored circle with a label, animating its radius from zero to its final size when the scene loads. The code uses D3’s `transition` and `easeLinear` methods to control the growth and update animations, while binding data from Wikipedia’s list of gravitationally rounded objects. The SVG elements are styled with solid fills, and the visualization runs as a self-contained animation within a black background.

Loading thumbnail…

Annual Scholarship Amounts

This example visualizes the ten most populous countries as of January 1, 2024, using a bar chart where bar height encodes population in thousands. The visualization is built with D3.js, leveraging `scaleBand` for categorical x-axis placement and `scaleLinear` for the continuous y-axis, while axis labels and ticks are rendered via custom helper functions. Data comes from the `@curran/un-population-estimates-2024` package, filtered to countries and sorted in descending order to isolate the top ten. The chart includes a gray inner rectangle backdrop and margin-based layout, with bars styled using D3 selections.

Loading thumbnail…

Fork of HTML Starter

This interactive scatter plot visualizes the classic Iris dataset, showing the relationship between sepal length and petal width for 150 flowers. Built with React and D3 v7, the visualization cycles through different column combinations every two seconds, updating the x-axis scale and re-rendering the SVG circles using a custom `scatterPlot` function. The code leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and draw axes, while the animation is driven by `setInterval` and repeated calls to the chart’s render function. Circle positions are recalculated dynamically as the selected variable changes.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates the minimal setup required to render text on a webpage using D3.js within a React project. It shows a simple HTML page that loads the D3 library from a CDN and uses the `select` function to target the body element and insert the text “Bundle Hello HTML.” The code relies on D3’s `select` and `text` methods, with styling defined via CSS for font size and alignment. It serves as a basic starter template for integrating D3 with HTML and JavaScript.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the basic workflow of a VizHub project, showing how D3.js v5 and local ES6 modules are combined to display text on a webpage. It uses d3.select to target a div element and set its content to a string imported from a separate module. The page loads D3 from UNPKG via a CDN script tag, while the main JavaScript logic is bundled and executed in the browser. The visualization is minimal, consisting solely of a large, center-aligned message with no data or interactive elements.

Loading thumbnail…

Fork of US states map : with colorScale. One color for each country

This choropleth map displays US states, each filled with a distinct color from a categorical palette. The visualization uses the D3.js library, specifically `d3.geoPath` with `geoAlbersUsa` projection, to render the map from a TopoJSON file loaded from the us-atlas package. The color scale assigns colors based on the state's name, and hovering over a state turns it green via CSS. The map also includes tooltips that reveal the state name using the `.append('title')` method.

Loading thumbnail…

Fork of United States Educational Attainment - Choropleth Map

This choropleth map displays the percentage of adults aged 25 and older with a bachelor's degree or higher across U.S. counties, using a purple sequential color scale and gray for missing data. Built with React and D3 v5, it renders county boundaries via `geoPath` and TopoJSON, with a threshold scale mapping education values to colors. Hovering reveals a tooltip showing the county name, state, and percentage. A legend below the map uses `scaleThreshold` and `invertExtent` to display color breaks, while data comes from FreeCodeCamp's education and county JSON files.

Loading thumbnail…

Fork of USA Country Map

This fork of the USA Country Map displays the 50 states using an SVG-based geographic projection. It colors each state green and shows white interior borders, with a hover effect that changes the fill to orange. The visualization uses `d3.geoPath` with the `geoAlbersUsaTerritories` projection, and loads geographic data from the `us-atlas` TopoJSON source. React manages the rendering, while D3 and TopoJSON handle the geographic feature and mesh processing.

Loading thumbnail…

Fork of Sized Points on a Map

A map visualization plots world cities with populations exceeding 50,000 as sized points, using a square-root scale to encode population via circle radius. The map uses `geoNaturalEarth1` projection with `geoPath` for land, graticules, and country interiors. City data comes from Simplemaps’ World Cities Database, rendered in React with SVG circles. The visualization is built with d3.v5, featuring a clean, light-styled map with semi-transparent teal circles showing population distribution globally.

Loading thumbnail…

Fork of Zoomable Icicle

This interactive icicle chart visualizes the Flare-2 dataset, a hierarchical file directory structure. Users can click any rectangle to zoom into that branch, revealing its children while smoothly animating the layout. Built with D3 v7 and React, the visualization renders SVG elements, using a partition layout and an ordinal color scale based on the rainbow interpolator. Clicking a node triggers a 750-millisecond transition that recalculates the positions of all descendants, scaling and translating each rectangle while fading text labels in and out.

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This example presents a zoomable sunburst visualization of hierarchical data, where each ring segment represents a category and its size corresponds to a numerical value. Built with D3 v5, it uses the `d3.partition` layout to compute the angular and radial coordinates for the hierarchical structure. The visualization is rendered as SVG, with a click interaction on each arc that triggers a smooth animated zoom via `d3.transition` and `attrTween`. Node labels rotate to align with their segments. The example is an updated version of Mike Bostock's original, ported from Observable, and uses the `flare.csv` and `flare.json` datasets.

Loading thumbnail…

Fork of Fork of SiteBulb Graph

A force-directed graph maps the network of connections from the Kenneth Rainin Foundation's website, using node size to distinguish main hub nodes from child and leaf nodes. Built with D3 v6, the visualization uses `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position elements, while `d3.drag` and `d3.zoom` enable interaction. Node colors are defined in an exported palette from `colors.js`, and all SVG elements render in an HTML page.

Loading thumbnail…

Reusable D3 Scatter Plots

This example demonstrates a reusable scatter plot built with D3.js, displaying the classic Iris dataset. The visualization cycles through the four data columns, animating the x-axis every two seconds to highlight different feature pairings. Implemented using D3's `scaleLinear` and `extent` for axes, the code employs the `join` operator for efficient SVG circle updates and `setInterval` to drive the automated transitions.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This D3.js scatter plot visualizes the Iris dataset, mapping petal width and sepal length to the x and y axes. Each of the three iris species is represented by a distinct symbol from the `d3.symbols` collection, using the `scaleOrdinal` scale. The visualization uses `scaleLinear` for axes, `axisLeft`, and `axisBottom` for ticks, and renders as an SVG. The code creates a reusable `scatterPlot` function that accepts data, value accessors, and margin settings, with data loaded from a CSV file.

Loading thumbnail…

Fork of q3

This interactive scatter plot visualizes the relationship between trip distance and pickup hour, with color encoding for the day of the week. The visualization uses React and D3.js v5 to render SVG circles, implementing an interactive legend that highlights a selected weekday by dimming all other data points. Using `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical color mapping, and `d3.csv` for loading the dataset, the chart supports hover-based tooltips via SVG `<title>` elements and dynamic filtering of the rendered marks.

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot displays the Iris dataset, using D3 v6 to render SVG circles colored by species (red for setosa, violet for versicolor, orange for virginica). The visualization cycles through four flower measurements—petal width, sepal width, petal length, and sepal length—on the x-axis via `setInterval`, while sepal length remains on the y-axis. It uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and includes a static legend with labeled species points.

Loading thumbnail…

Fork of Multiple Line plot with Dropdown

This visualization presents monthly air quality measurements for London from January 2010 through August 2018, using data from the Kings College London Air Quality Dataset in the London Datastore. A dropdown menu lets users select which pollutant to plot on the y-axis, while colored lines show annual trends for each year. Built with D3 v5, the example uses `scaleTime`, `scaleLinear`, `nest`, and `line` to generate smooth curves, with a transition animation updating the chart when the selection changes. The chart includes a color legend and axis labels.

Loading thumbnail…

Fork of PM 2.5 Particle Change in US

This interactive choropleth map visualizes PM2.5 particle concentration changes across US counties from 2000 to 2018. A slider, oriented vertically on the left with auto-play, lets users scrub through the years, revealing shifting pollution hotspots. Each county polygon is filled using a `d3.scaleSequential` with `interpolateYlGnBu` color scale, where darker blues represent higher concentrations. Built with React and D3 v5, it uses `d3.geoPath` with an Albers projection on topojson data, and includes a gradient legend with tick marks for reference.

Loading thumbnail…

Fork of Rose Wind Plot

This fork of a wind rose plot visualizes wind speed and direction distribution using stacked radial bars around a circular axis. The chart displays eight wind speed ranges across sixteen compass directions, colored distinctly to show frequency percentages for each category. Built with D3 v6, the visualization uses `d3.arc`, `d3.stack`, and a custom `scaleRadial` to map data from a CSV file. SVG rendering includes circular gridlines, directional labels, and a legend, with the layout centered and rotated to align angular bands precisely.

Loading thumbnail…

Fork of Circles on a Map

This map visualizes global population by country, with circle area proportional to 2018 population figures. Users can pan and zoom, and hovering over countries reveals detailed population data with a tooltip. The visualization uses D3 v5 with `d3.geoPath` and `geoNaturalEarth1` projection to render world boundaries from TopoJSON, while `d3.scaleSqrt` sizes the circles. Population data comes from a CSV file merged with the geometry. A size legend and color legend provide reference, and SVG rendering supports interactive zoom events.

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

A fork of the "Selecting a Year on a Line Chart" example visualizes regional population changes over time from UN estimates and medium-variant projections. It displays multiple smoothed line paths, colored by region via `d3.scaleOrdinal` and `d3.schemeCategory10`, with a vertical black line marking a selected year. Users can drag the mouse over the chart to update the year, triggering a re-render that snaps the line to that date using `d3.mouse` and `d3.scaleTime.invert`. The SVG rendering uses d3.v5 and modular functions like `lineChart` and `colorLegend` for axes and legends.

Loading thumbnail…

Fork of Fork of map of epa data sites

This visualization displays EPA air quality monitoring sites across the contiguous United States, where each circle represents a sample location and its radius encodes the ozone AQI value. The map uses React with the `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries and interiors from a US Atlas TopoJSON source. EPA station data, loaded via `d3.csv`, is positioned by geographic coordinates, with circle sizes scaled using `scaleSqrt` to give visual weight to higher AQI readings.

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through radial arcs. Users can click on any arc to zoom into that portion of the hierarchy, with smooth animated transitions repositioning the layout. The visualization is built with D3 v5, using `d3.partition` to compute the layout, `d3.arc` for arc paths, and `transition.attrTween` to animate changes between states. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and labels rotate to remain readable at various depths.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization presents a pie chart of the top 10 countries by deaths in 2020 attributed to air pollution, with each slice labeled with the death count in thousands and accompanied by a legend listing country names and values. The chart uses d3.pie and d3.arc to generate the slices, with d3.scaleOrdinal assigning a fixed set of colors to the data. Data is loaded asynchronously via d3.csv from a gist URL, and the SVG is rendered with D3 v5. Text labels are positioned using the arc generator’s centroid method.

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization, titled "A Week in San Francisco," uses a smooth basis curve to connect data points from the Data Canvas - Sense Your City dataset. The chart is rendered as an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and the `line` generator with `curveBasis` to create the path. Data is loaded via D3's `csv` function and parsed for temperature and timestamps.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

An interactive scatter plot of the Iris dataset, rendered as SVG in a React app, lets users explore relationships between four numeric flower measurements. Two dropdown menus, built with ReactDropdown, control which attributes map to the x- and y-axes. The visualization uses D3 v5 scales and extent functions to compute domains, and custom React components render the axes and circular marks. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file.

Loading thumbnail…

Fork of Menu: Social Media MQP

This visualization displays survey responses across social media platforms as a diverging stacked bar chart, with each bar segmented by six Likert-scale agreement or frequency categories. The bars are sorted by the proportion of positive responses, and a legend identifies the color-coded scale items. Built with D3 v7, the example uses `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and the `schemePuOr` color scheme. Data is loaded from a CSV file via `csvParse`, aggregated with `d3.rollup`, and rendered with SVG rect elements. A dual-mode filter restricts the comparison to two selected platforms.

Loading thumbnail…

Fork of Historical Space Launches on a map

This visualization combines a world map with a time-series histogram to explore historical space launches. The map displays launch sites as proportional circles, using a square-root scale for circle radius, while the histogram shows launch frequency by month and includes a brush for filtering the map by date range. Built with D3 v7 and React, it uses `geoEqualEarth`, `geoPath`, and `geoGraticule` for map rendering, `bin` and `brushX` for histogram binning and interactive filtering, and loads land topology from a world-atlas TopoJSON source.

Loading thumbnail…

Fork of Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This scatter plot visualizes COVID-19 vaccination rates and reported case counts over time, using a dual y-axis to compare the two metrics. The chart demonstrates a reduction in cases as vaccination increases, with blue circles representing vaccination proportions and gray circles showing seven-day average case counts. The visualization uses D3 v6 with `scaleTime`, `scaleLinear`, `d3.axisLeft`, `d3.axisRight`, and `selection.join` for animated circle updates. Data comes from Our World in Data and the New York Times rolling averages, rendered as SVG elements with CSS-styled axes.

Loading thumbnail…

Fork of Fork of Sankey Particles

An interactive Sankey diagram visualizes energy flows between sources and consumers, with animated particles traveling along links to represent the magnitude of each transfer. The SVG renders nodes and link paths using D3.js and the sankey layout plugin, while a separate Canvas layer draws moving particles computed from each link's path geometry. Particles are generated based on a frequency scale derived from link values and fade over time, creating a dynamic sense of flow intensity across the network.

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religious breakdown of the world’s 20 most populous countries, scaled by population. Hovering over a bar reveals a tooltip with the exact population count for that religion and country, while hovering over the legend highlights bars for a selected religion. Built with D3.js, it uses `d3.layout.stack`, `d3.svg.axis`, and `d3.legend.color` for rendering, with data sourced from Pew Research’s Global Religious Landscape.

Loading thumbnail…

Fork of Earth Surface Temperature HeatMap

This fork of the Earth Surface Temperature HeatMap visualizes monthly global temperature anomalies from 1753 to 2015, using a base temperature offset to display absolute values in Celsius. The SVG rendering employs D3 v5's `scaleTime`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to position cells by year and month, while a custom color legend maps temperature ranges to a blue-to-red palette. Interactive tooltips, powered by the d3-tip library, reveal exact temperature and variance data on hover, with data fetched from a GitHub-hosted JSON file.

Loading thumbnail…

Fork of Volcano

This interactive visualization animates contour lines of the volcano dataset, showing a smooth morphing effect as the contour thresholds transition between successive intervals. The display uses a plasma color scale to differentiate elevation bands, with white strokes delineating each path. The code constructs GeoJSON MultiPolygons from the gridded `volcano.json` data using `d3.contours` and projects them with `d3.geoNaturalEarth1` and `d3.geoPath`. A continuous loop drives a `transition` of 2000ms duration, interpolating threshold values and updating both the path shapes and fill colors to create a perpetual pulsing animation.

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a scatter plot visualizes the Iris Dataset using React and D3 v5, plotting petal length against sepal width for each flower sample. The chart renders as an SVG, with axes created through custom React components that map D3 scales to SVG elements. The code uses D3’s `csv`, `scaleLinear`, `extent`, and `format` utilities to load and transform the data, compute scales, and format tick labels. Each data point is drawn as a circle with a tooltip showing the petal length value, styled with a clean Poppins font and muted teal color scheme.

Loading thumbnail…

D3 selection and Exploration Bubble Force Chart

This example shows a bubble force chart of music sales data, with circles sized by sales volume and clustered around a central point. The visualization loads CSV data from an external URL and renders it as SVG circles using D3.js v7. It employs `d3.forceSimulation` with `forceX` and `forceY` to gently pull points toward the center, while `forceCollide` prevents circle overlap based on their scaled radii. Users can click individual bubbles to log the corresponding data to the console, and the chart responds to window dimensions.

Loading thumbnail…

Halo Lidar Wind Profile Data

This animated visualization displays vertical wind profile data from a Halo Doppler Lidar system, using moving circles to represent wind speed and direction at different altitudes. The code loads text-based lidar data files, parses them with a custom `jsonCreator` function, and renders the results as SVG animations on a bisque-colored webpage. It relies on D3.js for selecting and updating circle elements, with an animation loop driven by `setInterval` that updates positions and radii at 60 frames per second. The project also references PapaParse for potential CSV parsing and Bootstrap for page layout.

Loading thumbnail…

colour Scale test

This example displays a correlation matrix as a square grid of colored cells, using a diverging red-white-navy color scale to represent values from -1 to 1. The dataset is a correlation matrix of automobile metrics (from the classic `mtcars` data), with each cell showing a correlation coefficient or variable name. The lower triangle uses text values, while the upper triangle renders circles whose radius scales with the absolute correlation. Built with D3 v3 and SVG, it includes a custom color legend axis generated with `d3.svg.axis` and a series of colored rectangles.

Loading thumbnail…

Fork of Scatter Plot Daniel Chen

This interactive scatter plot visualizes the classic Iris dataset, plotting sepal and petal measurements against each other. The visualization uses D3 v7 to render animated SVG circles that transition to new positions when the user changes the X-axis or Y-axis variable via the dropdown menus. The code demonstrates modular ES6 imports, d3.scaleLinear for axis scaling, d3.scaleOrdinal for categorical coloring by species, and d3.axisLeft and axisBottom for creating labeled axes with grid lines.

Loading thumbnail…

SOL Lewitt with D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js version 7.8.5. It displays a grid of horizontal and vertical striped rectangles that form a circular mask pattern at the center of the screen, rendered as SVG. The code builds the visualization with `select`, `range`, and `.join('rect')`, layering two sets of rectangles and applying SVG `<mask>` elements to create the intersecting shapes.

Loading thumbnail…

SOL Lewitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.8.5, generating horizontal and vertical striped rectangles that form a grid pattern. A circular mask, created with SVG `mask` elements and inverted using a second mask, crops the intersecting lines to create a distinctive circular window in the center of the canvas. The code constructs the SVG and masks programmatically via the DOM API, appending 100 alternating horizontal and vertical rects. The visualization fills the entire browser viewport, using `window.innerWidth` and `window.innerHeight` to set the canvas dimensions.

Loading thumbnail…

SOL Lewitt Final Stage

This example renders a generative pattern inspired by Sol LeWitt's wall drawings. It displays a dense grid of horizontal and vertical hairlines, with a circular region in the center left uncovered, effectively creating a negative-space circle. The artwork uses JavaScript to dynamically create SVG elements, employing two SVG masks—`circle-mask` and the inverted `circle-mask-2`—to control which rectangles are visible. The code builds 100 horizontal and 100 vertical `<rect>` elements directly, without any external libraries, to form the final static composition.

Loading thumbnail…

SOL Lewitt Graphics

This visualization generates a grid of thin horizontal and vertical black stripes across the full screen, inspired by Sol LeWitt’s wall drawings. It uses the SVG API to create repeating `<rect>` elements, with a circular `<mask>` applied to the horizontal bars so they appear only inside a centered ring, while the vertical bars remain unmasked. The page is a single HTML file with no external libraries, and it uses `document.createElementNS` to construct the vector graphic dynamically.

Loading thumbnail…

mySVGwork

This example displays a full-screen SVG canvas filled with one hundred vertical rectangles, each ten pixels wide and spaced twenty pixels apart. The code generates the graphic dynamically using the Document API's `createElementNS` method to construct SVG elements. The rectangles span the entire height of the browser window, creating a striped pattern that responds to the current viewport dimensions. The rendering approach uses a simple loop to position each shape incrementally across the horizontal axis.

Loading thumbnail…

A Sol Lewitt Repo

A Sol Lewitt Repo reproduces a Sol LeWitt drawing as an interactive web page. The page displays a blank white canvas with no visible visualization, only a console log that prints "hello worlds". The code uses a plain HTML structure with a div element and a minimal CSS style to remove margins and hide overflow. The JavaScript is currently limited to a single console.log statement, with no data or drawing libraries, such as d3 or Three.js, imported or invoked. The example represents an unfinished starting point for a generative art reproduction.

Loading thumbnail…

myHTML Starter

A static SVG rectangle changes color and stroke width when hovered. The page uses HTML, CSS, and JavaScript, with a CSS `transition` property animating the `fill` and `stroke-width` changes over 3000 milliseconds. The rectangle is defined directly in the SVG markup, and the hover effect is triggered by the CSS `:hover` pseudo-class. The example demonstrates a minimal interactive styling technique without external libraries or data sources.

Loading thumbnail…

Fork of reuable sPlot with symbols

This example presents a scatter plot of the Iris dataset, mapping petal width against sepal length and distinguishing the three flower species through different D3 symbol shapes. It uses a reusable `scatterPlot` function built with D3 v7 APIs such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` to generate the SVG paths. Data is loaded asynchronously via `d3.csv` and parsed into numeric values. The visualization renders directly to the browser window with SVG output, featuring adjustable margins and symbol sizing.

Loading thumbnail…

Dynamic sPlot with symbols

This dynamic scatter plot visualizes the Iris Dataset, mapping petal width against sepal length while encoding the three iris species with distinct D3 symbol shapes. The visualization uses `d3.scaleLinear` and `d3.scaleOrdinal` to position points and assign symbols, with `d3.axisLeft` and `d3.axisBottom` providing labeled axes. Each data point renders as an SVG path generated by the `d3.symbol` generator, sized at 100 pixels squared, and the chart updates transparently when the dataset or encoding functions change through its reusable `scatterPlot` module.

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example renders a vertical Sol LeWitt-inspired composition using raw SVG and JavaScript. It creates 100 rectangle elements, each 10 pixels tall and spaced 20 pixels apart, stacked vertically across the full width of the browser window. The rectangles are appended directly to an SVG element created via the Document API, with the total canvas size determined by `window.innerWidth` and `window.innerHeight`. No additional libraries are used; the code relies solely on native DOM manipulation and SVG attributes.

Loading thumbnail…

SVG Fundamentals

This example introduces fundamental SVG rendering by generating a grid of 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, across the full browser window height. The code uses native DOM manipulation with `document.createElementNS` and the `http://www.w3.org/2000/svg` namespace to construct the SVG elements dynamically in a loop. It also demonstrates viewport sizing via `window.innerWidth` and `window.innerHeight`, with CSS applied globally to remove margins and hide overflow.