Florian Kotthoff

@FlorianK13·8 public vizzes

Line Chart - Temperature

This line chart visualizes temperature readings over time, showing a continuous trend with individual data points marked as circles. The chart uses D3.js v5 within a React component, rendering SVG elements for precise control. Axes are generated with `scaleTime` and `scaleLinear`, while the line path is created using D3's `line()` with `curveNatural`. The data is loaded from a CSV file via D3's `csv` function.

Sep 9, 2021

Loading thumbnail…

World map

A world map renders the Earth's landmasses and graticules using a Natural Earth projection. The visualization displays countries as blue filled paths over a gray sphere, with internal country boundaries drawn in darker strokes. The code employs d3.geoNaturalEarth1 for projection, d3.geoPath for rendering, and d3.geoGraticule for grid lines, all within a React component. Geographic data comes from the world-atlas TopoJSON source, processed through topojson's feature and mesh functions. The SVG output is styled with CSS, showing land, sphere, interiors, and graticules as distinct layers.

Sep 7, 2021

Loading thumbnail…

Scatter Plot - Iris

This scatter plot visualizes the classic Iris dataset, showing the relationship between petal length and sepal length for three flower species. The D3 v5 code uses `scaleLinear` and `extent` to map data values to SVG coordinates, with React components handling axis rendering and circle marks. Each species receives a distinct color and opacity through CSS classes. The visualization includes labeled axes with formatted tick marks and a native SVG `<title>` tooltip that reveals the species name on hover.

Sep 6, 2021

Loading thumbnail…

Rendering Data with React and D3 - Bar Chart

This bar chart displays population data for ten countries, sourced from a UN 2019 dataset loaded via the `d3.csv` function. The chart is built using React components for rendering and D3 v5 scales, including `scaleBand` and `scaleLinear`, to position the SVG rectangles. Axes are generated with custom React components that draw ticks and labels, while D3’s `format` function converts tick values into abbreviated units. The loading state shows a simple "Loading.." message until the data is fetched asynchronously.

Sep 6, 2021

Loading thumbnail…

Rendering Data with React and D3

This example visualizes named CSS colors as a colorful donut chart. Each color is represented as a slice of a pie, with the fill matching the color’s own RGB hex value. The code uses React hooks (`useState` and `useEffect`) to load data from a CSV file via `d3.csv`, then renders SVG paths with `d3.arc` and `d3.pie`. React manages the component state and DOM updates, while D3 handles the data loading and geometry calculations.

Sep 6, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file of CSS named colors, displaying a summary of the dataset’s size in kilobytes, row count, and column count within a large HTML `<pre>` element. It fetches the remote CSV using d3.csv, which parses the data and returns a promise, then uses `d3.csvFormat` to measure the formatted length and access the parsed dataset’s columns. The visualization relies on D3 v5 and JavaScript’s promise handling to update the page text content.

Aug 30, 2021

Loading thumbnail…

A circle to follow the mouse

A yellow circle follows the mouse cursor across a 960x500 SVG canvas. The React app uses the `useState` hook to track mouse coordinates and `useCallback` to handle mouse movement events, updating the circle's `cx` and `cy` attributes. The SVG is rendered via ReactDOM, with the circle's position initialized to the canvas center.

Aug 30, 2021

Loading thumbnail…

Fork of Hello HTML

This visualization shows a simple smiling face built from basic SVG shapes, with a yellow circular background, two black eyes, and a curved mouth. It demonstrates how React components compose reusable visual elements like the background, eyes, and mouth into a single face. The mouth uses D3's arc generator to create the smile path, while the overall structure relies on React's component hierarchy and a central SVG group with a calculated transform for positioning.

Aug 30, 2021