I

innocent thomas

@innthomas·26 public vizzes

Loading thumbnail…

Sol LeWitt with d3js full shapes

This example generates a grid of horizontal and vertical rectangles using D3’s `select`, `range`, and `join` methods, rendered as SVG. The full screen is filled with thin red lines, while two circular masks—one inverting the other—reveal a solid white circle at the center. The masks are built with D3’s `append` and `attr` calls, creating alternating visible and hidden regions. The code uses D3 v6 and runs entirely in the browser without external data, relying on window dimensions to size the composition.

Loading thumbnail…

Fork of Fork of Sol LeWitt with d3js 2

A grid of alternating horizontal and vertical black lines is masked so that only a circular area is visible. The example uses D3 v6 to generate SVG rectangles with `selectAll`, `data`, and `join`, and applies two SVG masks to invert the visibility pattern. `d3.range` creates the sequence for positioning, while masks define a central circle where lines appear or disappear.

Loading thumbnail…

Fork of Sol LeWitt with d3js

This visualization generates a grid of horizontal and vertical SVG rectangles that collectively form a geometric pattern inspired by Sol LeWitt’s minimal art. The code uses d3’s `select` and `range` to create 100 lines in each direction, then applies two circular masks to reveal or hide portions of the grid, producing a layered, cross-shaped effect. The rendering relies on SVG masks and fills, with the viewport sized to the full window.

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing entirely with SVG shapes, using two circular masks to create a layered grid of horizontal and vertical lines. A black-and-white mask limits the first set of 100 horizontal rects to a centered circle, while an inverted mask applies 100 vertical rects to the surrounding area. The code builds the scene dynamically via the DOM API (`createElementNS`, `setAttribute`), populating the SVG canvas across the full window size. No external libraries are used, relying purely on native SVG masking and rectangle elements.

Loading thumbnail…

sol Lewet

This example demonstrates the generation of a minimalist, abstract composition using vertical SVG rectangles. It displays 100 thin, evenly spaced bars that span the full height of the canvas, creating a rhythmic pattern across the width. The code creates an SVG element via the `document.createElementNS` API and populates it with `rect` elements in a loop, setting each bar’s `x` position incrementally. No data source is used; the visual is purely algorithmic, showcasing basic SVG shape creation and positioning with JavaScript.

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A scenic sunrise and sunset animation is rendered entirely as an SVG. It depicts a circular sun moving vertically against a dynamically changing sky and layered landscape, with colors transitioning to suggest a day-night cycle. The code uses native SVG elements like `radialGradient`, `linearGradient`, and `path`, along with the SVG `<animate>` API to continuously shift gradient stops and the sun’s `cy` attribute. No external JavaScript libraries are employed; rendering is purely through static SVG markup.

Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

This fork of a pseudo horizontal bar chart displays four labeled bars (A–D) using raw SVG rectangles and text elements. The first bar is blue with a thick black stroke, while the remaining bars are black, sized to approximate descending values. Rendered with inline SVG in an HTML page, it uses the Share Tech font and no JavaScript libraries or data-binding frameworks. The chart is a static approximation of a bar chart, with the SVG viewBox, rect positioning, and font styling defined directly in the markup.

Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental Scalable Vector Graphics (SVG) concepts using a bare-bones HTML page with embedded CSS and JavaScript. It demonstrates how to create and style basic SVG shapes directly in the browser, using the native `svg` element and its child tags like `rect`, `circle`, and `path`. The code relies solely on standard web APIs and document manipulation, without external libraries. It serves as a minimal starting point for understanding SVG markup and styling, with the rendered output appearing in the main document body.

Loading thumbnail…

Fork of HTML Starter

This example shows a simple smiley face rendered on a canvas. The visualization is built using raw SVG elements, with a large yellow circle serving as the head, and two smaller black circles for the eyes. The page uses basic CSS to remove default body margins and hide any overflow. The SVG markup is written directly in the HTML file, rendering static vector graphics without any JavaScript or external libraries.

Loading thumbnail…

Fork of Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt art piece using d3 to render horizontal and vertical striped rectangles within a circular mask, creating a geometric pattern that fills the browser window. The SVG output uses two masks—one circular and one inverted—to alternately reveal horizontal or vertical bands across the canvas. Built with d3.select and SVG attributes, the code generates 100 rect elements in each orientation, with the circular mask defined via mask elements and fill colors. The artwork dynamically adapts to the window’s width and height, reflecting LeWitt’s instructional-based aesthetic in a programmatic form.

Loading thumbnail…

Sol Luwit

An empty SVG canvas is rendered full-screen, with no data or visual elements drawn. The implementation uses the D3.js `select` method to append the SVG to the document body, setting its dimensions to the current window size. The page itself is minimal, with only a CSS reset for margins and overflow, and the JavaScript file imports only `select` from D3.

Loading thumbnail…

scatterplot

This example demonstrates basic SVG shape rendering, focusing on how simple primitives and paths can compose visual elements. The visualization features overlapping red and green circles, a navy diagonal line, a curved path, and a black polyline on a 960 by 500 canvas. Using raw SVG markup within an HTML document, the code explicitly defines coordinates and styling properties like fill, stroke, and stroke-width for each element. The included YouTube video embedded in the README provides additional context, though the interactive chart itself relies solely on static SVG shapes without data or user interaction.

Loading thumbnail…

world map

This visualization displays a temperature trend over time using a stylized line chart rendered as SVG. The graph plots temperature readings from a San Francisco dataset on the y-axis against timestamps on the x-axis, with smooth curves generated via d3’s `curveNatural` path interpolation. The React application loads geographic data from the world-atlas TopoJSON file, though the visible chart focuses on the line plot with axes created using scaleTime, scaleLinear, and custom tick components. The chart uses d3.v5, React hooks, and a light, modern style with Poppins typography.

Loading thumbnail…

Fork of Let's make a map with D3.js!

This fork of a D3.js mapping tutorial displays a natural Earth projection of the world, with countries filled in light green against a blue sphere. The visualization renders as an SVG using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while the topojson library’s `feature` function extracts country boundaries from the world-atlas dataset at 110m resolution. Country paths are drawn with a semi-transparent black stroke, and the map appears static without interaction.

Loading thumbnail…

working with time

A line chart displays temperature readings over a week in San Francisco, using a natural curve to connect daily data points. The visualization is built with React and D3 v5, leveraging `d3.scaleTime` and `d3.scaleLinear` for axes, while `d3.line` with `curveNatural` generates the smoothed path. Data is loaded as CSV from a remote gist, with timestamps parsed into JavaScript `Date` objects. Styled SVG elements include gray tick marks and teal strokes for the line, with axis labels rotated for clarity.

Loading thumbnail…

stylized scatterplot

This stylized scatterplot visualizes the classic Iris dataset, plotting sepal length against sepal width for 150 flowers. The chart uses React with D3 v5’s `scaleLinear` and `extent` functions to map data to SVG coordinates, with custom axis components rendering tick marks and labels. Each data point is drawn as a slightly oversized teal circle with a hover tooltip showing the x-value, while the axes and text use muted gray tones and the Poppins font. The visualization employs D3’s `csv` loader to fetch and parse the dataset asynchronously.

Loading thumbnail…

Untitled

This example displays a horizontal bar chart of the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. The bars are rendered as SVG rectangles using React, with scales from d3.scaleBand and d3.scaleLinear mapping country names and population values. Axes are generated as custom React components, with the x-axis formatted using d3.format to abbreviate numbers in billions. The chart uses a Poppins font and teal-colored bars, with data loading handled asynchronously via d3.csv.

Loading thumbnail…

Axis with React and D3

This example displays the top 10 most populous countries as a horizontal bar chart with axes, using React components to render SVG elements. The `useData` hook loads the UN World Population Prospects 2019 CSV and parses the population column. D3 scales (`scaleBand`, `scaleLinear`) map data to coordinates, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. React passes scales and data as props to these components, which use D3’s `ticks()` and domain methods to create the axis visuals.

Loading thumbnail…

The Margin Convention

This example demonstrates the "margin convention" in D3 by rendering the top 10 most populous countries as a simple bar chart, with visible spacing around the plot area. It uses React hooks to load and filter data from the United Nations World Population Prospects 2019 via `d3.csv`, then maps it to SVG rectangles with `scaleBand` and `scaleLinear`. The chart omits axes, drawing only the bars inside a translated `<g>` element, highlighting the margins as a foundational layout principle.

Loading thumbnail…

Fork of Loading Data with React and D3

This bar chart displays the 2020 population of various countries, sourced from a CSV file hosted in a GitHub gist. The React application loads the data asynchronously using D3's CSV parser, then configures a band scale for the categorical country axis and a linear scale for the quantitative population axis. Rendered as SVG rectangles via ReactDOM, each bar's width encodes the population value, with a loading message shown while the data is pending.

Loading thumbnail…

Loading Data with React and D3

A CSS color dataset loads from a remote CSV file via D3’s `d3.csv` and is rendered as a full-circle pie chart using `d3.pie` and `d3.arc` within a React component built with `useState` and `useEffect`. Each slice is drawn as an SVG `<path>` in React, with its fill derived directly from the row’s `RGB hex value` column. The example displays the raw data as a pie without aggregating values, using `value(1)` to assign equal weight to each row. A temporary "Loading..." message appears until the CSV arrives, and the chart renders with a fixed 960×500 viewBox centered in the SVG.

Loading thumbnail…

Fork of Smiley Face Part II

A steel-blue circle follows the mouse cursor across a full-window SVG canvas. The visualization uses React hooks to manage cursor position state, with an event handler on the SVG element updating coordinates on every mouse move. Rendering is done through React’s virtual DOM, producing the SVG circle dynamically. The code leverages React 16.9 and ReactDOM, with the circle’s center tied directly to the cursor’s clientX and clientY values.

Loading thumbnail…

Fork of Smiley Face Part II

A fork of the "Smiley Face Part II" example renders a full-window SVG smiley face using React components for the background circle, eyes, and mouth. The face scales to the browser window, with the yellow head positioned at the center and the mouth drawn using a D3 arc path. The code uses ReactDOM to render the app, while the d3 `arc` API generates the mouth's curved shape.

Loading thumbnail…

Fork of HTML Starter

This example displays the words “Hello HTML” centered on a plain white page. It demonstrates the fundamental structure of an HTML document, combining CSS for styling the text’s large font size and alignment with JavaScript for logging a message to the browser’s console via `console.log`. The page uses inline `<style>` and `<script>` tags within the `index.html` file.

Loading thumbnail…

Fork of HTML Starter

This example displays the words “Hello HTML” centered on a plain white page. It demonstrates the fundamental structure of an HTML document, combining CSS for styling the text’s large font size and alignment with JavaScript for logging a message to the browser’s console via `console.log`. The page uses inline `<style>` and `<script>` tags within the `index.html` file.

Loading thumbnail…

Fork of HTML Starter

This example displays the words “Hello HTML” centered on a plain white page. It demonstrates the fundamental structure of an HTML document, combining CSS for styling the text’s large font size and alignment with JavaScript for logging a message to the browser’s console via `console.log`. The page uses inline `<style>` and `<script>` tags within the `index.html` file.