F

FloorNummer

@FloorNummer·18 public vizzes

Loading thumbnail…

Points on a Map with Size

A world map displays city populations as semi-transparent circles, with point size encoding each city’s population value via a square-root scale. The visualization uses the Natural Earth projection via d3.geoNaturalEarth1 and renders graticules, land masses, and country interiors with d3.geoPath. City coordinates are projected from longitude and latitude, while the map geometry comes from World Atlas TopoJSON processed with topojson.feature and topojson.mesh. React components manage the SVG rendering, and the data is loaded asynchronously from a CSV of world cities using d3.csv.

Loading thumbnail…

Points on a Map

A world map displays country boundaries and graticules, with hundreds of semi-transparent points marking city locations. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses and interiors from World Atlas Topojson, while city coordinates are projected and drawn as SVG circles. React manages the component state, fetching data via `useEffect` and D3’s `csv` and `json` loaders.

Loading thumbnail…

Interactive Color Legend with menu and legend

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between different flower measurements. Users can change the X and Y axes via dropdown menus to compare sepal and petal dimensions. A color legend for species (setosa, versicolor, virginica) enables highlighting; hovering over a legend item fades all other data points for focused comparison. The visualization is built with React, utilizing d3.scaleLinear and d3.scaleOrdinal for scales, with SVG circles rendered through custom components.

Loading thumbnail…

Scatter plot with Color

This interactive scatter plot visualizes the Iris Dataset, using color to encode species alongside selectable X and Y axes. Users can switch between sepal and petal measurements via React dropdowns, with axes and scales updating dynamically. The visualization is built with React components rendering SVG circles, while D3 v5 handles data loading, linear scaling, ordinal color mapping, and axis generation.

Loading thumbnail…

Scatter plot with Color Legend

This visualization displays the Iris dataset as a scatter plot, using color to distinguish between the three iris species. The user can select different measurement attributes for the X and Y axes from dropdown menus. A color legend allows hovering to highlight data points belonging to a specific species. Built with React and D3.js (v5), the visualization uses SVG rendering, `scaleLinear` and `scaleOrdinal` for scaling, and custom components for axes, marks, and the interactive legend.

Loading thumbnail…

Scatter plot with menu

A scatter plot of the Iris dataset lets users choose which of the four measurements—sepal length, sepal width, petal length, or petal width—to map to the x- and y-axes via two React dropdown menus. Built with React and ReactDOM, the visualization renders as an SVG using d3.scaleLinear for axes and d3.extent to set domains. Points are drawn as circles with tooltips, and the code uses the d3.csv loader to fetch and parse the data from a GitHub gist.

Loading thumbnail…

Plot with select menu react

A React-based dropdown menu lets users select a pet from a fixed list of options, and the current selection is displayed in the console. The example combines React's `useState` and event handling with a custom `Dropdown` component that renders an HTML `<select>` element. D3.js is loaded but not used for drawing; instead, the visualization relies on React's state management to track the selected value. The dropdown and option elements are styled with large font sizes, and the selection changes are logged via `console.log`.

Loading thumbnail…

Rendering data with React and D3 colors

This example renders a dataset of CSS named colors as a full-screen pie chart, with each slice displaying its corresponding hex value. D3 utilities load the color data, while pie() and arc() compute the chart geometry and SVG paths. React manages the asynchronous data loading through useState and useEffect, then maps the data to SVG path elements, producing a vibrant, radial composition of all named web colors.

Loading thumbnail…

Rendering data with React and D3 colors

This example visualizes CSS named colors as a stacked sequence of horizontal bars, with each bar’s background color set to its corresponding RGB hex value. The data loads from a CSV file using D3’s `d3.csv` utility, while React’s `useState` and `useEffect` hooks manage the loading state and trigger the asynchronous fetch. Once the data arrives, React maps each row to a `<div>` element, setting its inline style for `backgroundColor`, width, and height. The page displays a “Loading…” message until the dataset is fully parsed.

Loading thumbnail…

Loading data with React and D3

A React component loads CSS named color data from a CSV URL using D3’s `d3.csv` and stores it in state via `useState` and `useEffect`. The app displays a text summary generated from the parsed data, showing file size in kilobytes, row count, and column count using `d3.csvFormat` and array properties. Before the data arrives, the view shows a loading message. The example relies on React 16.9, D3 v7, and a plain `<pre>` element for output.

Loading thumbnail…

Vega-Lite API Template I

This example shows a bar chart of population by country, with bars colored by religion and tooltips displaying population values on hover. Using the Vega-Lite API, it constructs a specification via `vl.markBar`, `vl.x`, `vl.y`, and `vl.color` encodings, then renders it through `vl.register` with Vega 5 and Vega-Lite 4. The data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV. Appearance is customized through a shared configuration object that adjusts axis and label styling.

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping engine displacement on the x-axis and horsepower on the y-axis, with each point representing a car model. The visualization is built using the Vega-Lite API, which programmatically defines the chart’s encoding and mark properties. Data is loaded as CSV from a remote URL via the `d3.csv` function, and the chart is rendered to an SVG canvas. The code also includes custom axis styling and a tooltip handler from the Vega Tooltip library to display car names on hover.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file using D3.js version 7. It fetches data from a GitHub Gist containing CSS color codes, then displays the file size in kilobytes, row count, and column count in a large pre-formatted text block. The code uses `d3.csv()` to fetch and parse the data, `d3.csvFormat()` to calculate the raw file size, and `data.columns` to determine the number of columns.

Loading thumbnail…

Mouse follower

A yellow circle follows the mouse cursor within an SVG canvas, updating its position in real time. The visualization uses React’s `useState` and `useCallback` hooks to track mouse coordinates via the `onMouseMove` event, and renders the circle with SVG elements. The code imports React and ReactDOM, and sets initial mouse position at the canvas center.

Loading thumbnail…

Fork of Smiley Face Part V

A grid of procedurally generated smiley faces, each with randomized stroke width, eye offset, eye radius, and mouth dimensions, renders inside a React app. The code separates components into ES6 modules, including a reusable `Face` composed of `BackgroundCircle`, `Eyes`, and `Mouth`. D3’s `arc` API defines the mouth’s path, while the `range` function generates the array of faces. The SVG output is nested within a shared `FaceContainer`, demonstrating modular React composition with fragments and props.

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face rendered as a static SVG using React and D3, composed of a yellow circle face, two black eye circles, and a D3-generated mouth arc. The example demonstrates how React manages SVG elements while D3’s `arc` API defines the mouth’s path geometry. The face is centered via a `translate` transform, with fixed dimensions and stroke properties set in code. This simple composition highlights the integration of React’s declarative components with D3’s shape generators for precise path calculations.

Loading thumbnail…

Smiley Face Part 1

This example shows a yellow smiley face built from a background circle, two eyes, and an arc-shaped mouth, all rendered as SVG elements in a React component. The code uses D3’s `arc()` generator to create the mouth path, calculates the circle and eye positions from fixed numeric constants, and draws everything inside a `<g>` element translated to the center of an SVG canvas. React manages the component structure, while D3 v5 provides the arc geometry. The background circle is a separate React component that receives radius and stroke width as props.

Loading thumbnail…

Adapted Smiley Face

This example shows a stylized smiley face built with React and D3, featuring a yellow circle head, two eyes, a mouth arc, and additional geometric decorations. The face is rendered as SVG inside a React component, with the code using `d3.arc()` to generate the mouth path and drawing eyes, eyebrows, and other shapes as basic SVG elements. The layout uses fixed pixel coordinates for positioning, and the visualization responds to no user interaction, presenting a static composition that mixes playful shapes with simple D3 path generation.