Janna Uutela

@jannamaria96·7 public vizzes

World Map

This example displays a world map rendered as an SVG using React and D3 v5. It loads geographic data from the world-atlas TopoJSON dataset and converts country boundaries into GeoJSON features with `topojson.feature`. The map is drawn as a collection of black path elements, one per country, using a line generator with natural curve interpolation. The visualization focuses on geopolitical outlines rather than thematic data, presenting a minimal, clean cartographic view.

Oct 13, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This scatterplot displays the Iris flower dataset, plotting sepal length against sepal width for individual specimens. The chart uses React with D3 version 5, rendering SVG elements through reusable axis and mark components. Data is loaded asynchronously via d3.csv, with linear scales created using d3.scaleLinear and extent. Axis components generate tick marks and labels, while circular marks include tooltips via SVG title elements. The visualization is lightly styled with the Poppins font and a teal color for data points.

Oct 12, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for a collection of automobiles, with each point’s color indicating the country of origin and its size representing vehicle weight. It was built using the Vega-Lite API, which compiles specifications into a rendered Vega visualization. The code reads the Auto MPG dataset from a CSV via `d3.csv`, then dynamically sets the chart’s width and height to fill the browser window. The visualization includes a tooltip handler and custom styling for axis labels and titles.

Oct 5, 2021

Loading thumbnail…

Loading Data with React

This example demonstrates a hybrid React and D3 workflow for loading and summarizing a CSV dataset. It uses the D3 `csv` utility to fetch data from a remote URL and React state to manage the asynchronous result. The app displays a loading message until the data arrives, then renders a text summary showing the file size in kilobytes, row count, and column count, all computed using D3’s `csvFormat` function. The rendering is a simple SVG-less HTML `<pre>` element, highlighting data loading rather than visual encoding.

Oct 3, 2021

Loading thumbnail…

Mouse follower

A yellow-bordered circle follows the mouse cursor across an SVG canvas inside a React application. The visualization updates the circle’s `cx` and `cy` attributes in response to `onMouseMove` events, using React state and the `useState` and `useCallback` hooks. The component renders through `ReactDOM.render`, maintaining a fixed canvas size of 960 by 500 pixels while the circle’s radius stays constant at 30.

Oct 3, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays the size and structure of a CSS Named Colors CSV dataset by rendering a multi-line message with the file size, row count, and column count. The visualization uses D3 v5’s `d3.csv` to load and parse the remote CSV file, then formats the result with `d3.csvFormat` to compute the kilobyte size. The code also contains commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, showing different methods for handling asynchronous data loading within a React framework.

Oct 3, 2021

Loading thumbnail…

Smiley Face Part I

This example displays a grid of eighteen smiley faces, each a yellow circle with black outlines, eyes, and an arc-shaped mouth. The faces are generated in React and rendered as SVG elements. The code builds each face from reusable components, including `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth drawn using a D3 `arc()` path generator. The faces are repeated using `d3.range` and `Math.random` to vary the eye radius, creating slight differences between them. The visualization demonstrates component composition and SVG rendering with React and D3 v7.

Oct 2, 2021