S

stefanpullen

@stefanpullen·23 public vizzes

Loading thumbnail…

Fork of 112 Multiple Views

A dashboard combines a map of the Netherlands with a date histogram, visualizing 112 emergency call data. The map uses a d3.geoMercator projection to plot individual incidents as circles, while the histogram displays call counts over time using d3.bin and d3.scaleTime. A d3.brushX brush on the histogram filters the map's displayed points. The visualization is built with React and renders SVG elements, sourcing city data from a CSV and geographic boundaries from a TopoJSON file.

Loading thumbnail…

Fork of 112 on a Map

A map of the Netherlands displays individual 112 emergency reports as semi-transparent red circles, with each circle's geographic position derived from the report's latitude and longitude coordinates. The visualization uses a React component architecture with D3 v5, employing `d3.geoMercator` projection and `d3.geoPath` to render municipality boundaries from a TopoJSON file, while the incident data is loaded as CSV. A commented-out date histogram component suggests the potential for temporal analysis, but only the spatial bubble map is rendered in the final output.

Loading thumbnail…

Fork of Points on a Map

This example shows a world map with cities of population over 50,000 plotted as small, semi-transparent dots. The map uses a natural Earth projection with graticules and country borders rendered via `geoPath` and `geoNaturalEarth1` from D3 v5. City positions are projected from latitude and longitude coordinates loaded from a CSV file, while country boundaries come from the World Atlas TopoJSON. The visualization is built as a React component, with SVG circles representing the cities and styling applied through CSS.

Loading thumbnail…

Fork of 112 Date Histogram

This visualization shows the total number of dead and missing migrants per month as a histogram, with bars representing daily counts over time. The chart uses React to render SVG elements, relying on D3 v5’s `scaleTime`, `scaleLinear`, and `bin` functions to group date data from the Missing Migrants Dataset into daily thresholds. Axes are custom-built components, and bars include tooltips via the SVG `<title>` element.

Loading thumbnail…

Fork of Working with Time

This histogram displays the monthly total of dead and missing migrants from the Data Canvas Sense Your City Dataset. The chart aggregates individual incident records into monthly bins, with bar heights representing the summed death toll per month. Built with React and D3 v5, the visualization uses `d3.histogram` for binning, `d3.scaleTime` and `d3.scaleLinear` for axes, and renders interactive SVG rectangles with native tooltips. The axes, formatted with `d3.timeFormat`, clearly show temporal trends in the data.

Loading thumbnail…

Fork of Polished World Map

This interactive world map displays country boundaries, graticules, and city populations using a natural Earth projection. Cities are rendered as semi-transparent circles whose radii scale with population using a square-root scale. Built with React and D3 v5, it loads geographic data from the World Atlas TopoJSON, processes it via `topojson.feature` and `topojson.mesh`, and draws the visualization as SVG using `d3.geoPath` and `d3.geoGraticule`.

Loading thumbnail…

Fork of Fork of Fork of Stylized Scatter Plot

This interactive scatter plot lets users explore the classic Iris flower dataset by switching the x and y axes between sepal and petal measurements. Color encodes the three iris species, and hovering over a legend item fades all non-matching points to emphasize that group. The visualization uses D3 v5 utilities like `scaleLinear`, `scaleOrdinal`, and `csv` for data loading, with React managing component state. SVG rendering draws axes, circles, and the color legend, with native `<title>` elements providing tooltips.

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to compare flower measurements through dropdown menus that control the x and y axes. The visualization uses React with D3 v5 scales and SVG rendering, featuring a color legend that distinguishes iris species. Hovering over a legend item highlights matching data points while dimming others. The code employs `d3.scaleLinear`, `scaleOrdinal`, `extent`, and `csv` for data parsing and scaling.

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attributes appear on the x and y axes via React dropdown menus. The visualization uses d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.format for tick labels, with SVG circles rendered through React components. Data is loaded asynchronously using d3.csv from a GitHub gist, and the chart includes styled axes with tick marks, axis labels, and hover tooltips.

Loading thumbnail…

Menu box

This example shows a simple pet-selection dropdown menu built with React 16.9. It uses the `useState` hook to track the currently selected value and renders a `<select>` element populated from an in-memory array of pet options. The `Dropdown` component receives an `onSelectedValueChange` callback to update the state, and the current selection is logged to the console. The interface is styled with large fonts and rendered into a root div using `ReactDOM.render`.

Loading thumbnail…

Fork of Stylized Line Chart

This example, a fork of a stylized line chart, presents a world map using a natural Earth projection. It shows the planet’s landmasses in a teal fill, with graticules and country interiors rendered as light gray strokes. The visualization is built with React and D3 v5, using `d3.geoNaturalEarth1` and `d3.geoPath` to project and draw geographic features. TopoJSON data from the world-atlas package is fetched and processed with `topojson.feature` and `topojson.mesh` to populate the map.

Loading thumbnail…

Fork of Stylized Line Chart

This fork of the Stylized Line Chart visualizes the Data Canvas Sense Your City dataset, plotting priority against time. Written in React with D3.js v5, it renders an SVG line chart with x and y axes, axis labels, and tick marks. The line is drawn using D3's `line` generator with a `curveStep` interpolation, while the data is loaded via `d3.csv` and scales are created with `scaleTime` and `scaleLinear`.

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization displays temperature readings over time from the San Francisco week temperature dataset, plotting individual data points connected by a stepped line. Time appears on the x-axis using d3.scaleTime with weekday tick formatting, while temperature uses d3.scaleLinear on the y-axis. Built with React and d3.v5, the chart renders SVG elements including custom axis components, circles for data marks, and a curveStep path created via the d3 line generator. Tooltips on each circle reveal the timestamp when hovered.

Loading thumbnail…

Fork of Fork of Rendering Data with React & D3

This example visualizes the Iris dataset, plotting sepal width against petal length as a scatter plot. The visualization uses React for component-based rendering and D3 utilities like `scaleLinear` for scales, `extent` for domain calculation, and `csv` for data loading. The code defines reusable `AxisBottom` and `AxisLeft` components for ticks and labels, while the `Marks` component renders each data point as a circle with a tooltip. The SVG output includes styled axes and labels for the graph.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of Dutch housing data, displaying the average sale price of owner-occupied homes across ten provinces in 2020. React renders the SVG elements, while D3 v5 utilities handle data loading with `csv`, scaling with `scaleBand` and `scaleLinear`, and tick formatting with `format`. The chart includes labeled axes, a custom tooltip via SVG `<title>` elements, and a loading state, with all marks and axis components built as reusable React functions.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, vehicle weight, and origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization encodes weight as point size and color as origin, with tooltips revealing car names. It is built with the Vega-Lite API, running through Vega and Vega-Lite rendering pipelines, and dynamically sizes the chart to the browser window. Data is loaded asynchronously via d3.csv, while a custom configuration adjusts axis and label styling.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between automobile fuel efficiency (mpg), vehicle weight, and horsepower, colored by country of origin, using a scatter plot of circles with tooltips. It is built with the Vega-Lite API for D3.js, which constructs a specification rendered via Vega and Vega-Lite. The visualization loads an auto-mpg CSV dataset from a GitHub gist, sets circle size and opacity via `markCircle`, and encodes fields using methods like `.fieldQ('mpg')` and `.fieldN('origin')`. The tooltip uses the `vega-tooltip` handler, and the chart resizes to fit the window.

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile data, mapping engine displacement on the x-axis and horsepower on the y-axis, with a tooltip displaying the vehicle name on hover. It uses the vega-lite-api to construct the visualization spec, which is then rendered through Vega-Lite and Vega, with d3.csv loading the data from a remote URL. The chart is configured with custom axis and label styling, and it automatically fits the full browser window.

Loading thumbnail…

Mouse follower

A smiley face rendered with React SVG follows the mouse cursor across the screen. The face consists of three circles: one large yellow circle for the head and two smaller black circles for the eyes. It uses React's `useState` and `useCallback` hooks to track and update the cursor position, re-rendering the SVG elements on every mouse move. The code is structured with separate `index.html` and `index.js` files, though the data-loading logic from a CSV is not active in this version.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how React state manages asynchronous data loading in a visualization. It fetches a CSV file of CSS named colors using D3's `csv` utility, then displays a summary message with the file size, row count, and column count. The code uses React hooks like `useState` and `useEffect` to trigger the D3 data request and update the UI, showing a simple text-based visualization of data metadata rather than graphical charts.

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse CSV data from an external URL using the Fetch API. It fetches a text file containing CSS named colors from a GitHub gist and logs the raw text to the browser console. The code uses `fetchText`, an async function that retrieves the response and converts it to text, following a commented-out alternative using chained promises. The visualization does not render any graphics; it focuses solely on the initial step of acquiring and inspecting CSV data for subsequent processing.

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly generated smiling faces fills the viewport, each with a yellow circular head, black outline, two eyes, and an arc-shaped mouth. Built with React components and D3’s `arc` API, the faces vary in stroke width, eye offset, eye radius, and mouth dimensions. The project uses `ReactDOM.render` and a `range` function to generate the array of faces, rendering via SVG.

Loading thumbnail…

Fork of Fork of Hello HTML

This example shows a grid of 18 randomly generated smiley faces, each rendered as a yellow circle with black outlines, eyes, and an arc-shaped mouth. Built with React and D3 v7, the `Face` component composes smaller components for the background, eyes, and mouth, using D3’s `arc()` generator to create the mouth path. Each face varies its dimensions—stroke width, eye offset and radius, and mouth size—via `Math.random()`, producing an organic, quirky array of expressions.