J

jwlam83

@jwlam83·33 public vizzes

Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

A world map displays migrant deaths by location, with circle size proportional to the total dead and missing. A linked time-series histogram below shows monthly death totals and supports brush selection, filtering the map to show only deaths within the selected date range. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for map rendering, `brushX` for interactive filtering, and `scaleSqrt` for circle sizing. Data comes from a CSV of Missing Migrants records, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Multiple Views with Brushing

This example shows a world map of missing migrants, with circles sized by total dead and missing, alongside a time histogram of the same data. Brushing on the histogram filters the map to show only incidents within the selected date range. The visualization uses React with D3 v5, including `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.brushX` for brushing, and `d3.bin` for histogram binning. Data comes from the Missing Migrants Project, rendered as SVG.

Loading thumbnail…

Multiple Views Cleanup

This example combines a bubble map with a date histogram to visualize missing migrants data. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render world landmasses, graticules, and country borders, with circle sizes scaled by `d3.scaleSqrt` based on the total dead and missing. The histogram below bins reported dates into monthly intervals using `d3.histogram` and `d3.timeMonths`, summing casualties per bin with `d3.sum`. Both views render as SVG within a React component structure, pulling data from a CSV of migrant incidents and TopoJSON world atlas boundaries.

Loading thumbnail…

Missing Migrants Multiple Views

This interactive visualization presents missing migrant incidents on a world map with proportional bubbles, alongside a time-series histogram of monthly deaths. The React-based interface renders geographic data using `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`, with bubble sizes scaled via `d3.scaleSqrt`. The histogram bins reported dates by month using `d3.histogram` and `d3.timeMonths`. Both views display data from a CSV of Missing Migrants Project records, loaded with `d3.csv` and overlaid on a World Atlas TopoJSON basemap.

Loading thumbnail…

Missing Migrants on a Map

This visualization displays a world map of the Missing Migrants Dataset, where each circle represents a reported event and its size encodes the total number of dead and missing individuals. The map uses a natural Earth projection through d3.geoNaturalEarth1 and d3.geoPath to render landmasses, country borders, and graticules. Data points from a CSV are plotted as semi-transparent circles, with radii scaled using d3.scaleSqrt. The React application loads TopoJSON from World Atlas and SVG is used for all rendering.

Loading thumbnail…

Missing Migrants Date Histogram

This visualization shows the total number of dead and missing migrants over time, aggregated into monthly bins from the Missing Migrants Dataset. A histogram displays the count of deaths per month, with the height of each bar representing the sum of reported deaths in that period. The code uses React with D3 v5 functions such as `scaleTime`, `scaleLinear`, `histogram`, and `timeMonths` to bin data and render an SVG chart. The axes are generated by custom React components, and tooltips reveal exact values per bar.

Loading thumbnail…

Missing Migrants Scatter Plot

A scatter plot visualizes the Missing Migrants Dataset, showing each reported event as a point along a time axis against the total number of dead and missing. The plot uses d3.scaleTime and d3.scaleLinear for axes, with React components rendering SVG circles for marks. Data is loaded via d3.csv from a gist, and the axis labels and tick marks are generated using d3 time formatting.

Loading thumbnail…

Using Size with Points on a Map

This example uses a natural Earth projection to render a world map with country boundaries and graticules, overlaid with circles representing cities with populations above 50,000. Circle size encodes population using a square root scale, with a maximum radius of 15 pixels. The visualization is built with React and D3 v5, employing `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for the map, and `scaleSqrt` for sizing. City data comes from the Simplemaps World Cities Database, rendered as semi-transparent SVG circles.

Loading thumbnail…

Points on a Map

This example displays a world map with small, semi-transparent dots marking cities with populations over 50,000. The map is rendered as SVG using D3’s `geoNaturalEarth1` projection, with landmasses, graticules, and country interiors drawn via `geoPath`. City locations are projected from latitude and longitude coordinates loaded from a CSV file, with each point drawn as a circle. The React application uses custom hooks to fetch the world atlas and city data, with styling applied through CSS classes.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, encoding petal length on the x-axis, sepal width on the y-axis, and species as color. Hovering over a color legend item fades all other species’ data points, highlighting the selected category. The visualization uses D3’s `scaleLinear` and `scaleOrdinal` for axes and color, with React components for rendering SVG marks and interactive state management.

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flowers. Each data point is a circle colored by species, with a color legend positioned to the right displaying the three species categories. The visualization is rendered as a React component using SVG, with axes and marks generated through custom code that leverages D3 v5 utilities like `scaleLinear`, `scaleOrdinal`, and `extent`. The axes are drawn with reusable `AxisBottom` and `AxisLeft` components, and hovering reveals a tooltip with the formatted x-value.

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flowers. Each point is colored by species using a d3.scaleOrdinal with a categorical color range, and the plot includes labeled axes with tick marks formatted using d3.format. The visualization is built with React, rendering SVG elements through reusable AxisBottom, AxisLeft, and Marks components that leverage d3.scaleLinear for positioning and d3.extent for domain calculation.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes for the X and Y axes via dropdown menus. The visualization uses React for state management, d3.scaleLinear for axis scaling, and d3.extent to compute domains, rendering circles as SVG marks with native tooltips. Axis components display tick marks and labels, while the data is loaded asynchronously via d3.csv and formatted using d3.format for concise tick values.

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset, rendered with SVG in React, lets users select which of four flower measurements to plot on the x- and y-axes via two dropdown menus. The visualization reads data with d3.csv, scales the axes with d3.scaleLinear, and formats tick labels using d3.format. Each circle’s tooltip shows its x-value via an SVG `<title>` element. The chart updates dynamically when a menu selection changes.

Loading thumbnail…

Menus with React

This example demonstrates interactive dropdown menus built with React. The application displays a "Choose a pet" label alongside a select element populated with a list of pet options, including Dog, Cat, Hamster, Parrot, Spider, and Goldfish. The interface uses React's `useState` hook to manage the selected value, with the `Dropdown` component receiving options and a callback to update the state. ReactDOM renders the application to the root element, while the HTML page loads React and ReactDOM from unpkg CDN and uses a custom `bundle.js` for the compiled code.

Loading thumbnail…

Smiley Face Part VI

A grid of eighteen randomly generated smiley faces fills the screen, each with unique eye positions, radii, mouth sizes, and stroke widths. Built with React components, the visualization renders faces as SVG circles and paths. The code imports D3’s `arc` generator to create the mouth shapes and `range` function to produce the face array, while React manages the component hierarchy from `FaceContainer` down to individual facial features.

Loading thumbnail…

Smiley Face Part V

A smiling face rendered in SVG using React components and D3’s `arc` API for the mouth. The face is centered within a fixed 960×500 viewport, with a yellow background circle, two black eyes, and a curved mouth generated by an arc path. Layout constants for eye offset, radius, and stroke widths are passed as props to modular React components. D3 v5 supplies the arc generator, while React handles component composition and rendering into the SVG DOM.

Loading thumbnail…

Smiley Face Part IV

A smiley face rendered as an SVG using React components and D3’s arc generator. The yellow circular face, black stroke outline, two eyes, and a thick mouth arc are all drawn via React elements within an SVG group, centered at 960×500. The mouth uses d3.arc with inner and outer radii and fixed start/end angles. The code defines reusable React components, such as BackgroundCircle, and passes props for radius, offsets, and stroke width. D3 v5 and React 16.9 are loaded from CDNs, with rendering handled by ReactDOM.

Loading thumbnail…

Smiley Face Part III

A yellow smiley face rendered as an SVG circles and an arc path, centered on a 960-by-500 canvas. React 16.9 defines the component structure, while D3 v5's `arc()` generates the mouth shape with specified inner and outer radii and angular start and end points. The face uses stroke settings for the outline and fixed coordinates for the eyes, with no interaction or animation.

Loading thumbnail…

Smiley Face Part II

A React application renders a full-screen smiley face using SVG primitives. The face is centered on the window, with a yellow circle for the head, two black eyes, and a mouth implied by the head’s boundary. The code uses React’s `ReactDOM.render` to mount the component, calculating dimensions from `window.innerWidth` and `window.innerHeight`. Positions for the eyes are derived from fixed offsets, while the head radius scales to the window height, demonstrating responsive layout with React and SVG.

Loading thumbnail…

Let's Make a Face Part I

A static SVG face composed of three circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically. The circles are drawn using raw SVG elements, with coordinates and radii hardcoded directly in the markup. This example uses plain HTML and CSS, with no JavaScript libraries or data sources, to demonstrate basic shape composition and styling within an SVG canvas.

Loading thumbnail…

Polished World Map

This example displays a polished world map using a Natural Earth projection, showing country boundaries, graticules, and interior borders. The visualization is built with React and D3 v5, using `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to render SVG paths. Country shapes come from the World Atlas TopoJSON dataset, with land filled in teal and graticules in gray. The code demonstrates a clean, stylized approach to geographic data visualization.

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature over time, using a smooth, natural curve to connect the data points from San Francisco week temperature data. The visualization, built with React and D3 v5, renders as an SVG with axes and labels, employing d3's scaleTime, scaleLinear, line, and curveNatural functions. The chart's aesthetic is defined by Poppins typography, a muted color palette for ticks and labels, and a teal stroke for the path, with axis labels included for clarity.

Loading thumbnail…

Working with Time

This scatter plot visualizes temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. It uses React to render SVG elements and D3 v5’s `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` to map data to coordinates and format weekday labels. The dataset is loaded via D3’s `csv` from a GitHub gist, and hovering over a circle reveals its timestamp through an SVG `<title>` tooltip.

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. Each circle represents an individual iris flower, with hover tooltips revealing the precise petal length value. Built with React and rendered as SVG, the visualization uses d3.scaleLinear and d3.extent to compute scales from the CSV data loaded via d3.csv. Custom React components handle axes and marks, with styling applied through CSS classes for ticks, labels, and the teal-colored data points.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of the ten most populous countries using a horizontal layout with custom-styled axes and a teal color palette. The visualization loads UN population data from 2019 via a CSV file, then renders the chart as an SVG using React components and D3’s `scaleBand` for the categorical country axis and `scaleLinear` for the population scale. The bottom axis formats tick labels using D3’s `format` utility, converting large numbers from billions to abbreviated form, with tooltips provided by SVG `<title>` elements.

Loading thumbnail…

Refactoring a Bar Chart

This bar chart displays the population of the top 10 countries from the UN Population 2019 dataset. React components render SVG rectangles for each bar, with the x-axis scaled by `d3.scaleLinear` and the y-axis using categories from `d3.scaleBand`. The code defines reusable `AxisBottom`, `AxisLeft`, and `Marks` components, and loads data asynchronously with `d3.csv` inside a custom `useData` hook, while D3 utilities like `max` and `scaleBand` handle the scaling logic.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of the top ten most populous countries in 2020, using data loaded from a CSV file via `d3.csv`. React renders the SVG elements, while scales from D3 (`scaleBand`, `scaleLinear`) position the bars and axes. Manual axis construction uses `xScale.ticks()` and `yScale.domain()` to generate grid lines and tick labels, with country names and population values mapped to rectangular `rect` elements.

Loading thumbnail…

Making a Bar Chart with React & D3

This example shows a horizontal bar chart of the top ten countries by 2020 population, rendered as SVG with React. The code loads UN population data from a CSV file using `d3.csv` and transforms each row by parsing the “2020” field. React’s `useState` and `useEffect` manage data loading, while D3 scales `scaleLinear` and `scaleBand` map population values and country names to pixel positions. Each bar is a `<rect>` element generated by mapping over the data array inside a React component.

Loading thumbnail…

Rendering Data with React

This example displays all CSS named colors as a circular color wheel, with each color occupying a wedge-shaped slice. Using React hooks to load and store the dataset, the visualization maps the data to SVG paths computed with D3’s `arc` and `pie` functions. The pie chart starts at the 12 o’clock position and renders each color’s hex value as its fill. The code references the CSS colors CSV from a GitHub gist and sets the outer radius to the full chart width.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset of CSS named colors using React and D3. It uses React state to store the fetched data and D3’s `csv` and `csvFormat` utilities to parse and measure the file. The rendered output displays the dataset’s size in kilobytes, row count, and column count. The page relies on a custom `message` module to format the summary text.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7, displaying the file size, row count, and column count in a large text element. It fetches a remote CSV file of CSS colors using `d3.csv`, which returns a parsed array of objects, and formats the file size with `d3.csvFormat`. The code also includes commented-out alternatives using native `fetch` and `d3.csvParse`, and uses plain HTML and CSS for a minimal page layout.

Loading thumbnail…

Mouse Follower

A black circle follows the user's mouse cursor across an SVG canvas. The visualization uses React state to track mouse coordinates via an `onMouseMove` event handler, updating the circle's `cx` and `cy` attributes in real time. D3's `range` function is imported but unused in this example. The rendering relies on React's `useState` and `useCallback` hooks to manage and memoize the position updates, with no external data or complex interaction beyond the positional tracking.