M

Michael Bergerson

@anxietyattacked·56 public vizzes

Loading thumbnail…

React & D3 Starter

A rotating torus knot rendered in three.js WebGL demonstrates a React component lifecycle. The App component instantiates a Three.js scene, perspective camera, and WebGL renderer, appending the canvas to a ref-mounted div. A `MeshPhongMaterial` with a neon specular highlight receives directional lighting, while the animation loop increments rotation on both axes. The example integrates React with imperative Three.js setup, using `useEffect` for scene creation and cleanup.

Loading thumbnail…

NBA Hex Shot Chart Comparison Playoff

This visualization compares the playoff shooting efficiency of Stephen Curry and Jayson Tatum through the 2022 NBA Finals. Drawing shot-location data from the NBA API, it projects each player's field-goal percentage relative to the league average onto a basketball court as a hexbin heatmap. Using d3-hexbin, the chart renders hexagonal bins whose size encodes shot frequency and whose color—via a red-yellow-blue sequential scale—indicates performance against the league average. The SVG court is enhanced with a legend, while the player names and team affiliations are displayed through custom text elements.

Loading thumbnail…

Fork of NBA Hex Shot Chart v3

This dashboard compares playoff shot charts for Stephen Curry and Jayson Tatum, displaying hexagonal bins colored by field goal percentage relative to league average and sized by shot frequency on a rotated basketball court. It uses d3.hexbin to aggregate shot coordinates into hexagons, with d3.scaleSequential and interpolateRdYlBu for color encoding, and loads data from CSV files via d3.csv. The SVG rendering includes dual courts, legends, and player labels, all styled with custom CSS.

Loading thumbnail…

NBA Hex Shot Chart v2

This visualization compares NBA shot charts for Damian Lillard and Giannis Antetokounmpo, displaying hexagonal bins colored by each player’s field goal percentage relative to the league average, with hexagon size reflecting shot frequency. It uses D3’s `hexbin`, `scaleLinear`, `scaleSequential`, and `interpolateRdYlBu` to render SVG hexagons over a basketball court path. Shot data is loaded from CSV files, and separate legends for frequency and FG% differential are generated via a custom `legendChart` function.

Loading thumbnail…

NBA Hex Shot Chart

A hexbin shot chart maps Damian Lillard’s 2019-20 regular season field goal attempts onto a stylized NBA court. Each hexagon’s size encodes shot frequency, while its color shows the player’s field goal percentage relative to the league average, using a blue-to-red sequential scale. The visualization is rendered as an SVG with D3.js, using `d3.hexbin` for binning, `scaleLinear` for court coordinates, and `scaleSequential` with `interpolateRdYlBu` for color encoding. Shot data is loaded from a CSV file, and a separate legend explains the frequency and percentage scales.

Loading thumbnail…

Fork of D3 Selection Exploration

Two clusters of thin vertical rectangles orbit and pulse around a central point, alternating between red and pink fills as they shift position every frame. The animation runs on a 60fps interval, regenerating a 30-point dataset from sine and cosine functions to update each rectangle's x, y, and fill properties. The example uses D3 v6 selections with `.data()` and `.join("rect")` to bind the dynamic data to SVG elements, while the commented-out circle code and `vizData` module suggest alternative rendering approaches.

Loading thumbnail…

NBA Heat Map Shot Chart

This visualization shows Damian Lillard’s 2019-20 regular season shot locations as a heat map overlaid on an NBA court. Kernel density contours, generated with `d3.contourDensity` and colored via `scaleSequential` with `interpolateInferno`, highlight shooting frequency, while white semi-transparent circles mark individual attempts. The court path is drawn with `d3.geoPath`, and the chart uses an SVG rendering with data loaded from a CSV file.

Loading thumbnail…

NBA Shot Chart

Damian Lillard’s 2019-20 regular season shot chart visualizes every field goal attempt as a colored point on a basketball court, with green for made shots and red for misses. A separate heat map overlay, rendered using `d3.contourDensity` with the Inferno color scale, reveals shot frequency patterns. The SVG court is rotated for a player’s perspective, and the data is loaded via `d3.csv`.

Loading thumbnail…

Scatter Plot with NBA season data

This interactive scatter plot visualizes Damian Lillard's NBA 2019–2020 regular season game statistics, allowing users to compare any two quantitative stats through dropdown menus. Built with D3 v6, the visualization uses an SVG renderer with animated transitions as axes and circles update to reflect selected metrics. Hovering over a point reveals a tooltip displaying the exact stat values for that game. Data is sourced from the NBA API via a CSV file, with all numeric fields parsed for plotting.

Loading thumbnail…

Scatter Plot with Species

This scatter plot visualizes the Iris Dataset, allowing interactive exploration of relationships between sepal and petal measurements. Users select quantitative or categorical variables for the X and Y axes via dropdown menus. The visualization uses D3 v6 with `scaleLinear` and `scalePoint` for axes, and `selection.join` with transitions to animate point movement and axis updates. Points grow from radius zero on initial render, and staggered delays create a cascading effect when data changes.

Loading thumbnail…

Animated Reusable Scatter Plot w/ Menus

This example visualizes the Iris Dataset with an animated scatter plot that lets users switch both axes independently via dropdown menus. The visualization supports both quantitative and categorical variables, using D3 scales and transitions to smoothly animate circle positions and axis updates over 2 seconds. The chart is built with reusable D3 functions `scatterPlot` and `menu`, rendering SVG elements with `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` for the axes and controls.

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This example visualizes the Iris Dataset as an animated, reusable scatter plot built with D3 v7. It displays sepal and petal measurements as circles, cycling the x-axis variable every two seconds among petal width, sepal width, petal length, and sepal length. Using `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function, it smoothly transitions circle positions and axis scales over a 2000-millisecond duration with `transition`. SVG rendering handles the marks, labels, and axes.

Loading thumbnail…

Reusable D3 Scatter Plot

This example displays the Iris Dataset as an animated scatter plot, cycling through different dimension pairs (petal width, sepal width, and length) every two seconds. The visualization uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data points and render axes, while a reusable `scatterPlot` function updates circles and axes in place. Data is loaded via `d3.csv`, and the animation is driven by `setInterval`, with SVG rendering handled throughout.

Loading thumbnail…

Reusable D3 Scatter Plot w/ symbols

This reusable D3 scatter plot visualizes the Iris Dataset, mapping petal length against sepal length with each species represented by a distinct symbol from `d3.symbols`. The chart uses `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` to assign symbols based on the species, and includes axis labels via SVG text elements. The code is structured as a configurable function that accepts width, height, data, margins, and label properties, with the dataset loaded asynchronously from a CSV using `d3.csv`. All rendered output is SVG.

Loading thumbnail…

D3 scatter plot

This scatter plot visualizes the Iris flower dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each of the 150 data points appears as a circle, positioned using linear scales and the extent of the data. The SVG renderer uses D3 v7 methods like `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data, compute scales, draw marks, and add axes. The plot fills the browser window.

Loading thumbnail…

Fork of Fork of D3 Selection Exploration

This example demonstrates a generative animation of circles that smoothly undulate across the screen, with each circle's position and radius oscillating over time. Built using the D3.js library, the visualization runs a continuous loop at 60 frames per second, recomputing the dataset based on a sine wave that controls both the number of circles and their lateral and vertical movement. The rendering relies on D3's selection and join API to update `<circle>` SVG elements, while the data is generated by a custom `makeData` function.

Loading thumbnail…

Fork of season bar chart v1

This visualization displays game-by-game statistics for a basketball player, with bars representing the selected metric (points, rebounds, assists, etc.) across game dates. A dropdown menu lets users switch between different statistical attributes, updating the y-axis and bar heights accordingly. The chart is built using React with D3 version 5 for scales, axes, and rendering SVG elements, pulling data from a CSV file of Giannis Antetokounmpo’s game log. The code uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and custom React components for axes, marks, and the dropdown.

Loading thumbnail…

season bar chart

This bar chart displays video game sales across different gaming platforms, with a dropdown menu allowing viewers to switch between global, EU, JP, NA, and other regional sales figures. The visualization uses React with D3 v5, employing `d3.scaleBand` for the categorical platform axis and `d3.scaleLinear` for the sales values. SVG rectangles render each bar, and D3 utilities like `axisLeft` and `axisBottom` style the axes, while tooltips show formatted sales values. Data comes from a CSV of top 500 games sourced from Kaggle.

Loading thumbnail…

Working with Time

This example visualizes a week of temperature readings from the Data Canvas Sense Your City dataset. It is a scatter plot with a smooth natural curve line connecting the points, where the x-axis represents time and the y-axis shows temperature in degrees. The visualization is rendered in SVG using React and D3 v5, leveraging `scaleTime` and `scaleLinear` for axes, and `line` with `curveNatural` for the path. Hovering over any circle reveals its exact timestamp via a tooltip.

Loading thumbnail…

More Basketball Shot Charts

A basketball shot chart displays LeBron James’s field goal attempts as red and green dots on an SVG court, with misses in red and makes in green. The court is drawn using React components and D3 scales and radial line generators. Shot data comes from a CSV loaded via D3’s `csv` method, and the visualization maps player coordinates to court positions using `scaleLinear`.

Loading thumbnail…

Basketball Shot Chart

This visualization displays an NBA basketball shot chart, plotting made and missed field goals as red and green circles on a detailed court diagram. The court, including the three-point line, free-throw lane, and basket, is drawn with React components and D3’s `scaleLinear`, `lineRadial`, and `arc` methods. Shot data is loaded from a CSV using `d3.csv` and mapped to positions. Makes are green, misses red, with the court rendered in SVG.

Loading thumbnail…

Basketball Court

This example renders a regulation NBA basketball court as a static SVG diagram using React and D3 v6. It shows the court’s full layout, including the key, three-point arc, free-throw circle, and backboard, all scaled to real court dimensions. The code uses `scaleLinear` for coordinate mapping, `lineRadial` to generate arc paths, and `Math.atan` to compute the three-point line angle. The implementation derives geometry from an Observable notebook by Will Hou, drawing all markings with styled SVG primitives and path elements.

Loading thumbnail…

Corona Virus Line Chart

A line chart tracks cumulative COVID-19 deaths over time, using a time-scaled x-axis and linear y-axis. The React component `LineChart` builds an SVG path via `d3.line`, `scaleTime`, and `scaleLinear`, while `useData` fetches the Johns Hopkins CSSE global deaths CSV and aggregates daily totals. The black, 15-pixel-wide stroke renders the full dataset at window dimensions.

Loading thumbnail…

Summarizing Coronavirus Data

This example displays the current global death toll from the COVID-19 pandemic as a large, plain-text message. It uses `d3.csv` to fetch the Johns Hopkins University time-series dataset from GitHub, extracts the last date column, and sums all reported deaths with a `reduce` operation. The final count and date are formatted using `d3.format` and written directly into the page’s DOM via `textContent`. The visualization is intentionally minimal, offering a stark numeric summary without charts or graphics.

Loading thumbnail…

HIV/AIDS Making a Choropleth Map

This example visualizes the share of the population infected with HIV/AIDS for countries worldwide in 2017, using a choropleth map rendered with SVG paths. Countries lacking data appear gray, while others are colored using a sequential yellow-orange-red color scale via `d3.scaleSequential` and `interpolateYlOrRd`. The map is built with React, D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for graticules, alongside country boundaries from the world-atlas TopoJSON. Data comes from an IHME CSV joined to numeric country codes via ISO-3166 codes.

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, showing each event as a point with the reported date on the x-axis and the total dead and missing on a logarithmic y-axis. The visualization uses D3 v5 scaling functions, including `scaleTime` and `scaleLog`, to map the data to SVG coordinates within a React component. Individual data points are rendered as circles via the `Marks` component, with tooltips revealing the exact date on hover.

Loading thumbnail…

Missing Migrants Multiple Views with Brushing React Performance Optimization

This visualization shows the geographic distribution and temporal trends of missing migrants worldwide, with a bubble map of incident locations and a linked date histogram for time-based filtering. Brushing the histogram filters the map’s circles in real time. Built with React and D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering, `d3.scaleSqrt` for bubble sizing, and `d3.brushX` for interactive selection, with `useMemo` and `useEffect` optimizing performance. Data comes from the Missing Migrants Project CSV.

Loading thumbnail…

Missing Migrants Multiple Views with Brushing

This visualization combines a bubble map and a date histogram to explore global missing migrant data from a CSV dataset. Users can brush across the histogram to filter the map by date range, with linked views updating simultaneously. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for country boundaries, while the histogram applies d3.bin with timeMonths thresholds and d3.brushX for selection. React manages state for the brush extent, and d3.scaleSqrt sizes bubbles by the total dead and missing count.

Loading thumbnail…

Missing Migrants Multiple Views Cleanup

A composite visualization combines a bubble map with a time-series histogram to show global migrant deaths and disappearances. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries and graticules, with circle areas scaled by `d3.scaleSqrt` based on total dead and missing. The histogram bins reported dates by month using `d3.bin` and `d3.timeMonths`, summing casualties per bin. Both views use React and D3 v5, drawing to SVG, with data from the Missing Migrants Project.

Loading thumbnail…

Multiple Views

This example combines a bubble map with a date histogram to visualize missing migrant incidents. The map uses a d3.geoNaturalEarth1 projection with graticules and country boundaries from the World Atlas TopoJSON, while circles sized by d3.scaleSqrt represent the total dead and missing. The histogram bins the data by month using d3.bin and sums the casualties with d3.sum, displaying the temporal distribution. Both views are rendered as SVG in React, reading data from a CSV of the Missing Migrants Project.

Loading thumbnail…

Missing Migrants

This visualization shows the total number of dead and missing migrants over time, aggregated by month. The chart uses a bar histogram to display the data, with each bar representing the sum of casualties within a monthly bin. Built with React and D3 v5, it employs `scaleTime`, `scaleLinear`, and `histogram` to bin the data, while SVG renders the axes and marks. The dataset comes from the Data Canvas Sense Your City project, loaded via `d3.csv`.

Loading thumbnail…

Missing Migrants Part III - On a Map

This visualization displays the global distribution of migrants who have died or gone missing, mapped as circles positioned by geographic coordinates and sized proportionally to the reported total dead and missing. The map uses a Natural Earth projection, with country boundaries, graticules, and landmasses rendered as SVG paths. Data comes from the Missing Migrants Project, while the world map and interiors are built from the World Atlas TopoJSON. The React app loads the data and topology using the D3 `csv` and `json` functions, and the circle sizes are scaled using D3's square-root scale, all rendered through SVG.

Loading thumbnail…

Using Size

A world map displays cities with populations over 50,000, using circle size to encode population magnitude with a square-root scale. The map includes country boundaries, graticules, and a sphere outline, rendered as SVG via React. It uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, with data from the Simplemaps World Cities Database and World Atlas TopoJSON, processed through `topojson.feature` and `mesh`.

Loading thumbnail…

Points on a Map

This example displays global city locations as semi-transparent circles on a natural Earth map projection. It renders the world using `geoPath` and `geoNaturalEarth1` from d3-geo, with graticules and country interiors overlaid via TopoJSON world atlas data. City coordinates are projected from latitude/longitude pairs using the same projection, drawing each point as an SVG circle. The data comes from the Data Canvas Sense Your City Dataset, loaded through d3.csv, with React managing the component state and SVG rendering.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width while encoding species through color. The visualization uses a React-based color legend with d3-scaleOrdinal to create a clickable legend that filters and highlights specific species. When hovering over a legend item, the corresponding data points remain fully opaque while all other circles fade to 20% opacity, created through conditional opacity logic. The chart uses d3.scaleLinear for both axes and renders as SVG, with data loaded via d3.csv from a GitHub gist.

Loading thumbnail…

Making A Color Legend

This interactive scatter plot visualizes the classic Iris dataset, mapping petal length against sepal width. Each point is colored by species using a `d3.scaleOrdinal` color scale, with a custom color legend built from React components that displays the species names alongside colored circles. The visualization uses `d3.scaleLinear` for both axes, includes formatted tick labels, and incorporates tooltips via SVG `<title>` elements. Rendering is done through React and D3 v5, with data loaded asynchronously from a CSV file.

Loading thumbnail…

Scatterplot w/ color

This interactive scatterplot visualizes the Iris dataset, plotting petal length and sepal width on the x- and y-axes, with points colored by species. Two dropdown menus allow users to switch which flower measurements are displayed on each axis. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and custom React components for rendering SVG axes and circle marks.

Loading thumbnail…

Polished Scatter Plot with Menus

A polished scatter plot of the Iris Dataset, rendered with SVG and React, visualizes relationships between four flower measurements. Interactive drop-down menus, built with `ReactDropdown`, let users select which measurement appears on the x-axis and y-axis, with axis labels updating accordingly. The plot uses `d3.scaleLinear` for scales, custom `AxisBottom` and `AxisLeft` components for ticks, and circles with `<title>` tooltips for data marks. Styling uses the Poppins font and muted teal and gray colors.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, showing relationships between numeric attributes while allowing users to change the X and Y variables through dropdown menus. The visualization uses React for state management and rendering, with D3.js v5 scales and SVG marks. Axis components generate ticks via scale methods, while circle elements with embedded titles serve as tooltips. The plot retrieves CSV data using d3.csv and scales the axes with scaleLinear.

Loading thumbnail…

Fork of Working with Time

This example renders a world map using a natural Earth projection, displaying landmasses, country borders, graticule lines, and a sphere outline. The map is generated from the World Atlas TopoJSON dataset, with geographic features extracted via `topojson.feature` and `topojson.mesh`. The visualization is built with React and D3 v5, using `d3.geoNaturalEarth1` and `d3.geoPath` to project and draw the SVG paths. Styling via CSS applies a teal fill for land and neutral tones for borders and graticules.

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length along the x-axis and sepal width along the y-axis. Each flower is rendered as a circle with a tooltip showing its sepal dimensions. The visualization uses React to generate SVG elements, with D3 v5 providing scaling, extent calculation, and tick formatting through `d3.scaleLinear` and `d3.format`. The axes and marks are constructed from reusable components, with custom styling applied via CSS classes for fonts and colors.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React and D3 v5 to render SVG rectangles whose widths are scaled by population, with a linear scale for the x-axis and a band scale for the y-axis. Population values are formatted in billions with a custom tick formatter, and hovering reveals exact values through native SVG titles. The design features a Poppins font and teal bars against a clean background.

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart ranking the ten most populous countries by their 2020 population estimates. The visualization loads data from a CSV file containing UN population figures, then renders a clean SVG layout with labeled category axes, using React to manage component structure and D3’s scaleBand and scaleLinear to map data values to pixel coordinates, with a visible network request for the external data.

Loading thumbnail…

Axes with React and D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, using React to render SVG elements while D3 provides scales and data loading. It uses `d3.csv`, `scaleBand`, `scaleLinear`, and `max` to process the UN Population 2019 dataset and compute the chart layout. Ticks from the x-axis are drawn manually with lines and text, while y-axis labels and rectangles are mapped directly from React state.

Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top 10 most populous countries from UN population data. React manages the component state, fetching the CSV via `d3.csv` and storing the parsed data. The chart uses `scaleBand` for the y-axis country categories and `scaleLinear` for the x-axis population values, with bars drawn as SVG `rect` elements inside a translated group to respect the margin. The visualization shows how margins create space for potential axes while keeping the plot area clean.

Loading thumbnail…

Pathetic Bar Chart

A bar chart displays the ten most populous countries from a UN population dataset, with horizontal bars encoding each country's 2020 population via length. The visualization uses React hooks (`useState`, `useEffect`) to load and slice the CSV data, while D3's `scaleBand` and `scaleLinear` compute bar positions and widths. Rendered as SVG rectangles, the chart currently lacks axis labels or tooltips. Loading feedback appears as oversized "Loading..." text styled via a `pre` element with a large font size.

Loading thumbnail…

Rendering Data with React & D3

A radial burst of CSS named colors fills a circular SVG, with each wedge representing one color from a CSV dataset. React manages the loading state and renders the paths, while D3's `csv` fetches the data, `pie()` computes the angular layout, and `arc()` generates the path geometry. The visualization updates once the data arrives, initially displaying a loading message.

Loading thumbnail…

Fork of Vega-Lite API

This example shows a line chart of temperature over time, styled for a clean, dark-on-light appearance with large axis labels and a tooltip that displays temperature values. The visualization is built entirely through the Vega-Lite API, using `vl.markLine`, `vl.x().fieldT()`, and `vl.y().fieldQ()` to encode the data, which is loaded from a CSV file via D3’s `csv` function. It registers Vega, Vega-Lite, and the Vega-Tooltip handler, then renders an SVG with automatic resizing to fit the window.

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and display CSV data within a React application using D3 utilities. The app fetches a dataset of CSS named colors from a GitHub gist via the `d3.csv` method, storing the result in React state with the `useState` and `useEffect` hooks. Once loaded, a summary message is rendered as large SVG text, showing the file size in kilobytes, row count, and column count using `d3.csvFormat`. While data is loading, the display simply shows the text “loading,” providing a clear visual state transition.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying a summary of the CSS Named Colors dataset that includes file size, row count, and column count. It uses `d3.csv` to asynchronously fetch the remote CSV file and parse it into a tabular structure, then formats the summary using `d3.csvFormat` and `Math.round`. The visualization appears as large text rendered in an HTML `<pre>` element. The code also includes commented alternatives using `fetch`, `async`, and `await` with `d3.csvParse`.

Loading thumbnail…

Mouse Follower

A circle rendered as an SVG element follows the mouse cursor across the full browser window. The React component tracks pointer coordinates via the `onMouseMove` event handler, storing them in state with the `useState` hook. It re-renders the circle's `cx` and `cy` attributes to match the cursor's `clientX` and `clientY` values, using `useCallback` for the event handler. The visualization demonstrates real-time pointer tracking with minimal code, relying on React's declarative rendering to update the SVG circle's position.

Loading thumbnail…

Smiley Face Part V

The example displays a grid of eighteen randomly parameterized smiley faces, each rendered as an SVG with a yellow circular background, black stroke, two eyes, and an arc-based mouth. The faces are generated using React components split across multiple files, including `Face`, `Eyes`, `Mouth`, and `BackgroundCircle`, which leverage ES6 modules and React Fragments. The `Mouth` component uses `d3.arc` to construct the smile path, while `d3.range` in `index.js` creates the grid layout. Rendering relies on ReactDOM with D3 v5 and React 16.9.

Loading thumbnail…

Smiley Face Part IV

A smiling face is drawn as a yellow circle with black outline, two eyes, and a curved mouth, centered in an SVG canvas. The React components `BackgroundCircle`, `Eyes`, and `Mouth` compose the figure, with the mouth’s path generated using D3’s `arc()` function. Rendering uses React 16.9 and D3 v5, with fixed pixel dimensions for width and height.

Loading thumbnail…

Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG graphic. The face is drawn using a large circle for the head, two smaller circles for the eyes, and an arc for the mouth, all positioned relative to a central point. Built with React and D3, the code uses D3’s `arc` generator to define the mouth’s path and React’s `ReactDOM.render` to construct the SVG elements. The layout is computed dynamically from fixed width and height constants.

Loading thumbnail…

Smiley Face Part II

This example shows a large yellow smiley face rendered as a responsive, full-window SVG. The face includes eyes with pupils, raised eyebrows, and a red mouth, all built using React components and D3’s `arc()` generator for the curved shapes. The code uses D3 v5, React 16.9, and renders purely with SVG primitives like `circle`, `rect`, and `path`. Component dimensions and positions are derived from `window.innerWidth` and `window.innerHeight`, with each facial feature positioned relative to the center.

Loading thumbnail…

Hello HTML

A bare-bones HTML page demonstrates the minimal structure of a web document. The example contains only the standard `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` elements, with a `<title>` tag reading "Hello HTML". No external libraries or JavaScript APIs are used, and the body is empty. It serves as a starting point for any web-based visualization by showing the simplest valid HTML skeleton that can later be extended with D3.js, Canvas, or other rendering tools.