L

Love Wessman

@Wessl·27 public vizzes

Loading thumbnail…

Missing Migrants Multiple Views, with Brushing

This example visualizes missing migrant incidents worldwide with a bubble map and a brushing-linked date histogram. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries and graticules, with circle sizes scaled by `d3.scaleSqrt` to represent the total dead and missing per incident. The histogram, built with `d3.bin` and `d3.scaleTime`, shows monthly totals and supports brushing via `d3.brushX`; when a date range is selected, the map filters its circles to matching incidents. Both views share data from a CSV of global missing migrants, rendered as SVG within React.

Loading thumbnail…

Fork of Scatterplot Dwarfviz?

This scatterplot visualizes the Iris dataset, mapping sepal length and width for individual flower samples. The visualization uses D3 v5 within a React 16.9 component structure, rendering SVG circles for each data point. Axes are generated using custom `AxisBottom` and `AxisLeft` components that build tick marks from D3's `scaleLinear` and `extent` APIs, while a tooltip displaying the formatted sepal length appears on hover. The chart is styled with the Poppins font and fixed color palette, with the displayed data loaded asynchronously via D3's `csv` function.

Loading thumbnail…

Missing Migrants Multiple Views

This visualization combines a geospatial bubble map with a temporal bar chart to examine global migrant deaths. The upper map projects each incident’s coordinates using `d3.geoNaturalEarth1` and `d3.geoPath`, with circle radius scaled by `d3.scaleSqrt` according to the reported dead and missing count. The lower histogram bins incidents by reported date using `d3.bin` and `d3.timeMonths`, aggregating the same count metric. Both views read from a CSV of Missing Migrants Project data, rendered as SVG within a React component.

Loading thumbnail…

Missing Migrants Date Histogram

This visualization shows the monthly count of dead and missing migrants over time, using a histogram with time-based bins. The x-axis displays reported dates in a time scale, while the y-axis encodes the total number of deceased or missing individuals per month. Built with React and D3 v7, the chart uses `d3.bin` and `timeMonths` thresholds to aggregate the CSV data into monthly intervals. SVG rectangles with native tooltips render the bars, with axes generated by custom React components.

Loading thumbnail…

Fork of Missing Migrants on a Map

This visualization combines a world map with a date histogram to show the geographic distribution and temporal trends of missing migrants. The map uses a bubble chart with circle size scaled by the total number of dead and missing, projected using `d3.geoNaturalEarth1` and rendered with `d3.geoPath`. The histogram bins reported dates by month and aggregates deaths using `d3.bin` and `d3.sum`. Data comes from a CSV of Missing Migrants incidents, with map boundaries from the world-atlas TopoJSON. Both components use React with D3 v7 for scales and SVG rendering.

Loading thumbnail…

Missing Migrants on a Map

A world map displays the global distribution of missing migrants, with semi-transparent circles sized by the total number of dead and missing per location. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, graticules, and country borders from TopoJSON data. Circle radii are scaled with `d3.scaleSqrt` based on the dataset's "Total Dead and Missing" values. The React component structure relies on the `useWorldAtlas` and `useData` hooks to load and process the world atlas and CSV data.

Loading thumbnail…

City sizes on a Map

This visualization displays global city populations using circles plotted on a world map, with dot radius scaled by the square root of population via d3.scaleSqrt. It uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and country interiors. React manages component state, while d3.csv and d3.json load city data from a gist and world-atlas TopoJSON. Circle opacity and fill are styled via CSS, showing cities over 50,000 inhabitants.

Loading thumbnail…

Points on a Map

A world map displays the locations of cities with populations over 50,000 as small semi-transparent dots, overlaid on landmasses with country borders and graticules. Using React, the visualization loads GeoJSON world-atlas topology and city data via D3’s `json` and `csv` methods, then projects coordinates with `geoNaturalEarth1` and renders SVG paths and circles through `geoPath`. The map’s gray land, interiors, and sphere are styled distinctly, while city points use D3’s `projection` to convert longitude and latitude into screen positions.

Loading thumbnail…

Stylized Refactored Bar Chart

This example visualizes the top 10 most populous countries by 2020 estimates using a horizontal bar chart rendered with SVG and React. The chart includes styled axes with tick marks and a labeled "Population" axis, while each bar displays a tooltip with formatted population values (e.g., "1.44B") on hover. The code builds the chart using D3 v5 functions such as `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and `format` for tick labels. Data is loaded asynchronously from a CSV file via `d3.csv` and filtered to the top ten rows.

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays the US population by age, sex, and year from 1850 to 2000, using grouped bars to compare age cohorts over time. Built with the Vega-Lite API, it encodes year on the x-axis, population counts on the y-axis, and age groups as color, with tooltips revealing sex and population values. The code loads CSV data via `d3.csv` from a GitHub gist, configures axes and label styling through the `config` object, and renders the chart using the Vega, Vega-Lite, and Vega-Tooltip libraries.

Loading thumbnail…

Interactive Color Legend

This interactive scatterplot displays the Iris dataset, allowing viewers to explore relationships between flower measurements by selecting different attributes for the X and Y axes via dropdown menus. Hovering over the color legend highlights points of a specific species while dimming others. The visualization is built with D3 scales for positioning and color, rendered as SVG within a React application, with interactive components managed through React state.

Loading thumbnail…

Polished Scatterplot with menus and colors

This interactive scatterplot displays the classic Iris dataset, letting users explore relationships between sepal and petal measurements through two dropdown menus that control the X and Y axes. Each of the three iris species is represented by a distinct color from a categorical scale, with a color legend clarifying the mapping. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and renders SVG circles with tooltips. The menus are implemented using the `react-dropdown` library, while data loading handles CSV parsing via `d3.csv`.

Loading thumbnail…

Polished Scatterplot with menus

An interactive scatterplot of the Iris dataset, built with React and D3, lets users explore relationships between sepal and petal measurements. Two dropdown menus select which quantitative attributes to plot on the x- and y-axes, while the scales and axes update accordingly. The SVG visualization uses D3 scales (`scaleLinear`, `extent`) to map data coordinates, with React components (`Marks`, `AxisBottom`, `AxisLeft`) rendering circles and tick marks. Data loads asynchronously via `d3.csv`, and hover tooltips reveal precise values using the SVG `<title>` element.

Loading thumbnail…

Scatterplot with menus

A scatterplot of the Iris dataset allows users to explore relationships between flower measurements by selecting which attributes appear on the X and Y axes via dropdown menus. The visualization uses React for component-based UI, with D3 v5’s `scaleLinear`, `extent`, and `csv` for data loading and scaling, rendering SVG axes and circle marks. Each point includes a tooltip showing the formatted X-axis value. The Iris data is fetched from a remote CSV file, and axis labels update dynamically based on the selected attributes.

Loading thumbnail…

Menus with React

This example demonstrates a simple interactive pet-selection form built with React. It renders a labeled dropdown menu where users choose from six pet options, with the current selection managed through React state and logged to the console. The app uses the `useState` hook to track the selected value and a custom `Dropdown` component that maps over option objects to populate a native `<select>` element. ReactDOM and React’s UMD production builds are loaded via CDN, and the interface is styled with inline CSS.

Loading thumbnail…

Fork of Linechart of SF temperatures

This example displays a world map using a natural Earth projection, rendered as SVG with React. The map shows land masses in teal, country borders in light strokes, graticules, and a light gray sphere background. It uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection and path generation, with TopoJSON data from the world-atlas package. The `feature` and `mesh` functions from TopoJSON extract land polygons and interior borders.

Loading thumbnail…

Linechart of SF temperatures

This line chart displays San Francisco temperature readings over a week, sourced from Data Canvas Sense Your City. The blue curve, rendered with d3.line and curveNatural, shows the temperature trend across time. Built with React and D3 v7, the visualization uses scaleTime and scaleLinear for axes, with SVG rendering. The data is loaded via d3.csv, and the chart includes labeled axes for time and temperature, with natural curve smoothing for a fluid line.

Loading thumbnail…

Scatterplot

This scatterplot visualizes the Iris dataset, plotting sepal length against sepal width for individual flower specimens. The React-based visualization uses D3’s `scaleLinear` and `extent` to map data to SVG coordinates, with axes rendered as reusable components. Points are drawn as SVG circles with tooltips, and the chart includes labeled axes and tick formatting. Styling uses the Poppins font, with axis lines, ticks, and marks styled via CSS classes.

Loading thumbnail…

Fork of Refactored Bar Chart

This bar chart displays the top 10 most populous countries for 2020, sourcing data from the United Nations World Population Prospects 2019 via a CSV file. The visualization uses React to render SVG markup, with D3 v5 for data loading and scaling via `csv`, `scaleBand`, and `scaleLinear`. Horizontal bars represent population counts, ordered by country along the y-axis, with axes generated by custom React components that map scale tick values to SVG lines and text.

Loading thumbnail…

Fork of Refactored Bar Chart

This example visualizes the top 10 most populous countries using horizontal bars, with the country names on the y-axis and population values mapped to bar lengths along the x-axis. The chart is rendered as SVG using React, with D3’s `scaleBand` and `scaleLinear` handling the axes and scaling. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the tick marks and rectangles, while D3’s `csv` loads data from the United Nations World Population Prospects 2019 dataset. The chart includes axes with tick labels, improving readability over a bare bar display.

Loading thumbnail…

Rendering data with React & D3

A radial burst of CSS named colors is rendered as an SVG pie chart, with each slice colored by its RGB hex value from a CSV dataset loaded via `d3.csv`. React manages the component state and lifecycle, while D3's `pie` and `arc` generators compute the slice angles and paths. The chart uses `ReactDOM.render` to mount the SVG, and D3 v7 and React 17 are loaded from CDNs.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes U.S. population by age group and sex from 1850 to 2000, using grouped bar marks over a time axis. It builds the chart with the vega-lite-api, registering vega-lite and vega for rendering, and enables a tooltip handler for interactivity. Data is loaded asynchronously from a CSV file via d3.csv, with appearance customized through a config object that adjusts label and title font sizes and colors. The visualization outputs as an SVG, fitted to the full window dimensions.

Loading thumbnail…

Loading data with React

This example demonstrates how to load and display CSV data in a React application, showing a text summary of the dataset size and structure. It uses React state (`useState`) to hold the fetched data and the `useEffect` hook to trigger the data loading. The code fetches a CSS named colors dataset via `d3.csv`, then formats the results with `d3.csvFormat` to count bytes, rows, and columns. A loading message appears until the data arrives, at which point the summary replaces it.

Loading thumbnail…

Parsing CSV data with D3

This example demonstrates how D3 version 7 can parse a remote CSV file and display basic statistics about the dataset. It fetches a comma-separated file containing CSS named colors from a GitHub gist using `d3.csv`, then computes and displays the file size in kilobytes, row count, and column count using `d3.csvFormat` and the `columns` property. The results appear in a large `<pre>` element styled at 7em, providing a clear, minimal readout of the parsed data’s structure.

Loading thumbnail…

Mouse Follower

An interactive SVG visualization renders a single circle that follows the mouse cursor across a 960-by-500 canvas. The React component tracks pointer movement via the `onMouseMove` event and updates the circle’s `cx` and `cy` attributes through `useState` and `useCallback`. Initially positioned at the canvas center, the circle moves smoothly with the cursor. The example demonstrates state-driven rendering in React 17 with D3 v7, using plain SVG elements rather than data joins or scales. No external data source is involved; the visualization purely reacts to user input.

Loading thumbnail…

Fetching data

This example demonstrates asynchronous data fetching in the browser, retrieving a CSV file of CSS named colors from a GitHub gist and logging its contents to the console. It uses the Fetch API’s `fetch()` method and the response object’s `text()` method within an async/await function, followed by a `.then()` promise chain to handle the resolved text. The code shows a minimal setup with no visual output, focusing purely on the network request and text extraction workflow.

Loading thumbnail…

Faces

A modular smiley face is drawn in an SVG canvas using React components for its background circle, eyes, and mouth. The face is centered via a translated group, with positioned features defined by props. D3’s `arc` generator creates the curved mouth path, while the yellow circle and black strokes come from simple SVG elements. The example demonstrates composable React structure and static SVG rendering without interactivity.