Patric Tysk

@patrictysk·8 public vizzes

Swedish map

This example displays a choropleth map of Swedish counties, with each region filled in teal and interior boundaries highlighted in a contrasting color. It visualizes the geographic subdivisions of Sweden using geospatial data. The map is rendered as SVG with React, using the `geoMercator` projection and `geoPath` from D3 v5, and the TopoJSON data is converted to GeoJSON using the `feature` and `mesh` functions. The projection is fitted to the viewport via `fitExtent`. The data originates from a preprocessed TopoJSON file of simplified Swedish county boundaries.

Nov 27, 2021

Loading thumbnail…

Scatter plot

This example shows the top 10 most populous countries as a horizontal bar chart, with population values on the x-axis and country names on the y-axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG rectangles. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Axis ticks and labels are generated with custom React components, and population values are formatted using D3’s `format` with SI prefixes.

Nov 15, 2021

Loading thumbnail…

Stylized Bar Chart

This example presents a horizontal bar chart ranking the top 10 most populous countries using United Nations World Population Prospects 2019 data, with population values labeled in billions. The visualization is built with React components that render SVG elements, using D3 v5’s `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. Each bar is a `<rect>` element with a native SVG `<title>` tooltip showing the formatted population value. Custom axis components generate tick marks and labels, while the D3 `format` function converts raw numbers into compact “B” suffix notation.

Nov 14, 2021

Loading thumbnail…

Fork of Refactored Bar Chart

This bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, with countries on the y-axis and population on the x-axis. The visualization uses React to render SVG elements, with the `d3.scaleBand` and `d3.scaleLinear` functions from D3 v5 handling the axis scaling. It includes custom React components for the axes and bars, with the data loaded asynchronously via D3’s `csv` function. The chart also shows a loading message before the data arrives.

Nov 13, 2021

Loading thumbnail…

Bar Chart

This example presents the top 10 most populous countries as a horizontal bar chart, with bars extending right from country labels. The chart deliberately omits axes, relying only on bar lengths and faint gridlines to convey magnitude. Built with React and D3 v5, the code loads UN population data via `d3.csv`, then uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-scale. Rendering occurs through SVG `rect` elements inside a React component, with tick marks generated manually and styled minimally.

Nov 7, 2021

Loading thumbnail…

Loading data with React and D3

This example shows a circular color wheel built from CSS named colors, with each color represented as a slice of a pie chart. The visualization loads data from a remote CSV file using `d3.csv`, then renders SVG paths with React components. The code uses `d3.arc()` to generate each slice, with the fill color set from the `RGB hex value` column in the data. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, while the outer radius of the wheel matches the SVG dimensions.

Nov 6, 2021

Loading thumbnail…

Vega-Lite API

This example visualizes the relationship between engine acceleration and horsepower for vintage automobiles, with a tooltip revealing each vehicle’s name. It embeds a Vega-Lite specification built programmatically via the `vega-lite-api` package, which registers both Vega and Vega-Lite for SVG rendering and tooltip integration. The scatterplot uses an opacity of 0.1 and size 900 to show overlapping points, while axes and tick labels are customized through a Vega-Lite `config` object. Data is loaded asynchronously from a CSV using d3’s `csv` loader. The visualization automatically fits the browser window using `autosize`.

Nov 5, 2021

Loading thumbnail…

Fork of Hello HTML

The visualization shows a grid of 18 yellow smiley faces, each with black outlines, eyes, and a curved mouth. The faces are rendered as SVG circles using React components that compose a `FaceContainer` with `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents. The `Mouth` component uses the `d3.arc()` API to generate the path, while `eyeRadius` is randomized per face using `Math.random()`. The code imports React and ReactDOM, and the SVG is centered and scaled via `width` and `height` props.

Nov 1, 2021