Guus Lammers

@GuusLammers·8 public vizzes

Margins & Axes

This example displays the top 10 most populous countries as a bar chart, with country names on a band scale y-axis and population values on a linear x-axis, all framed by explicit margins. It uses React state to asynchronously load CSV data via `d3.csv` from the United Nations World Population Prospects 2019. The SVG rendering leverages `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` to compute scales, while ticks for both axes are generated manually using `xScale.ticks()` and the domain values, with a `translate` transform to offset the chart within the margins.

Mar 3, 2022

Loading thumbnail…

Bar Chart

A horizontal bar chart displays the top 10 countries by population in 2020, using data from a CSV file loaded via `d3.csv`. React renders SVG `<rect>` elements, positioning each bar with `d3.scaleBand` and scaling widths with `d3.scaleLinear` and `d3.max`. The bars appear in descending population order without axes or labels. The example demonstrates integrating D3 data loading and scales with React’s component-based rendering for a simple SVG visualization.

Mar 3, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automotive data, showing the relationship between vehicle weight and horsepower. Each circle’s position encodes these quantitative fields, while color represents the country of origin and size encodes miles per gallon (mpg). Hovering reveals the car’s name via a tooltip. The visualization is built with the vega-lite-api, which wraps Vega-Lite and Vega, and uses d3.csv to load the auto-mpg dataset. The code configures axes, scales, and styling through the vega-lite-api’s fluent method chaining.

Mar 1, 2022

Loading thumbnail…

Loading Data React

This example shows the loading state of a React app as it fetches a CSV file of CSS named colors from a GitHub gist. The interface displays a formatted text summary with the file size in kilobytes, row count, and column count once the data arrives, preceded by a “Loading…” message. The code uses React hooks `useState`, `useEffect`, and `useCallback` to manage the asynchronous `d3.csv` fetch, while a separate `Message` component computes the statistics using `d3.csvFormat`. Data is rendered as HTML text within a `<pre>` tag.

Mar 1, 2022

Loading thumbnail…

Loading Data With D3

This example demonstrates how to load and summarize CSV data using D3 v5 within a React framework. It fetches a dataset of CSS named colors from a GitHub gist and reports its size, row count, and column count in a large HTML `<pre>` element. The code uses `d3.csv` to parse the remote CSV file, leveraging Promise-based loading, and `d3.csvFormat` to compute the data’s byte size. The interface remains static, displaying only text statistics without any visual charts or interaction.

Feb 28, 2022

Loading thumbnail…

Mouse Follower

A smiley face drawn as an SVG circle follows the mouse cursor across the viewport. Built with React and D3 v5, the component tracks pointer coordinates via React's `useState` and `useCallback` hooks within an `onMouseMove` event handler. The circle's `cx` and `cy` attributes update to match the mouse position, rendering at a fixed radius of 100 pixels.

Feb 28, 2022

Loading thumbnail…

Smiley Face Part VI

A modular React component renders a yellow smiley face using D3’s arc generator for the mouth and SVG circles for the eyes and background. The face is centered via a translated group, with parameters like eye offset, radius, and stroke width passed as props. The example demonstrates composing reusable React components for simple data visualization.

Feb 28, 2022

Loading thumbnail…

Smiley Face Part IV

A simple smiley face is rendered as an SVG graphic using React components for each facial feature. The background circle, eyes, and mouth are defined as separate reusable components, with the mouth drawn using the `d3.arc` generator from d3-shape. The face is centered by translating a group element, and all positions and sizes are controlled through props and constants. The example demonstrates composing D3-generated paths with React’s declarative rendering style.

Feb 28, 2022