Sonja Ek

Scatter Plot with Color and Menus

A scatter plot of the Iris Dataset with interactive menus for selecting which attributes map to the x- and y-axes. The species of each flower determines the color of its circle, with a fixed ordinal color scale. The visualization uses React with the `react-dropdown` library to render the menus, and D3 v6 for data loading, scales, and SVG axis generation. Data is loaded from a CSV file using `d3.csv`.

Jun 8, 2021

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus, built with ReactDropdown, let viewers dynamically change which attributes map to the x- and y-axes, with axis labels updating accordingly. The plot is rendered as an SVG using D3 scales (scaleLinear) within a React framework, with circles colored teal and tooltips displaying precise values on hover. The code leverages D3’s csv loader to parse the data and D3’s format function for axis tick labels.

Jun 8, 2021

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between four numeric attributes—sepal length, sepal width, petal length, and petal width—by selecting any two for the X and Y axes via dropdown menus. Built with React and D3 v6, the visualization renders SVG circles with tooltips showing exact values during hover. The code uses `scaleLinear` for axes, `extent` to compute domains, and custom React components for axes and dropdowns. Axis labels update dynamically to reflect the selected attributes, making the plot adaptable for comparing different feature pairs.

Jun 7, 2021

Menus with React

This example shows a pet-selection dropdown menu built with React. A labeled `<select>` element displays six animal options, and choosing one updates the displayed selection state. The code defines a reusable `Dropdown` component that receives `options`, an `id`, `selectedValue`, and an `onSelectedValueChange` callback, using React’s `useState` hook to manage the selected value. ReactDOM renders the app into a `#root` div, with the dropdown styled using CSS. The implementation relies solely on React’s component and state APIs, with no external data or visualization libraries.

World Map

This example displays an interactive world map rendered with SVG, showing landmasses, country borders, graticules, and the Earth’s sphere. It uses a React component to load geographic data from the world-atlas TopoJSON source via `d3.json`, then converts it to GeoJSON with `topojson.feature` and `topojson.mesh`. The map is drawn using `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule`, with CSS styling for the land, interior boundaries, and graticule paths.

Stylized Line Chart with Circles

This example presents a stylized line chart of San Francisco weekly temperatures over time, with a smooth, natural curve connecting data points and small circular markers highlighting each observation. The React-based visualization uses D3 v6 scales and axes to map time and temperature, employing `scaleTime` and `scaleLinear` for coordinate mapping and `curveNatural` for the line interpolation. The SVG rendering includes lightweight XML tooltips that display the formatted day of each point, while axis labels and tick styling are customized through Poppins typography and muted color palettes. Data is loaded asynchronously via D3's `csv` function from a GitHub-hosted dataset.

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting sepal length against sepal width for individual flowers. The SVG rendering uses React components for the axes and data marks, with D3 scales and the `extent` function determining the plot’s domain. Axis labels are positioned with SVG transforms, and tick formatting employs D3’s `format` with SI prefixes. Circles representing data points include native SVG tooltips via the `title` element, with styling applied through CSS classes.

Stylized Bar Chart

This stylized bar chart displays the top ten countries by population for 2020, using horizontal bars drawn as SVG rectangles whose widths encode the population values. The chart is built with React and D3 (v6), using D3 scale functions to map data to coordinates and custom `AxisBottom` and `AxisLeft` components to render ticks. Data is loaded via D3’s `csv` and formatted with `format(".2s")` to show values in billions. Hovering over a bar reveals a tooltip with the exact population.

Jun 3, 2021

Refactored Bar Chart

This example presents a horizontal bar chart showing the population of the top 10 countries from a UN Population dataset. The chart uses React components to render SVG elements, with D3’s `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. The visualization is split into modular components, including `AxisBottom`, `AxisLeft`, and `Marks`, which draw the ticks and rectangles. Data is loaded asynchronously via `d3.csv`, and the chart updates upon data arrival.

Jun 3, 2021

Axes with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, with labeled axes and tick marks, rendered as SVG. The visualization combines React for component state and rendering with D3 utilities like `scaleBand`, `scaleLinear`, and `csv` for data loading. React’s `useState` and `useEffect` hooks fetch the UN population CSV data, while the `xScale` and `yScale` functions position the bars and axis labels within configured margins. Tick marks and text are generated manually from `xScale.ticks()` and `yScale.domain()`.

Jun 1, 2021

The Margin Convention

This example demonstrates the fundamental D3 margin convention by rendering a horizontal bar chart of the top 10 most populous countries from a UN population dataset. The visualization shows population values as proportional bars within an SVG, with the chart’s plotting area properly inset from the SVG edges using a margin object. Built with React and D3 v6, the code uses `d3.csv` for data loading, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. A `<g>` element is translated by the margin offsets to position all rectangles correctly.

Jun 1, 2021

Pathetic Bar Chart

This example displays a horizontal bar chart of the top ten countries by population for 2020, sourced from a UN population CSV. The chart is bare, containing only colored rectangles with no axes, labels, or annotations. Built with React and D3, the code uses D3’s `csv` loader, `scaleBand`, `scaleLinear`, and `max` functions to map data to SVG rectangles, with React managing the data state and rendering.

Jun 1, 2021

Multiple Faces (React & D3)

A grid of 18 smiley faces, each randomly varied in eye size, mouth width, and stroke thickness, demonstrates how React components can render SVG primitives while leveraging D3 for geometry. The example uses React to compose reusable `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components, with D3's `arc` generator defining the mouth path and `range` creating the grid array. Each face is drawn with randomized parameters, showing how declarative UI structure and imperative D3 math can coexist within a single visualization.

Tweaked Face (React & D3)

A stylized face built from SVG shapes in React, rendered through D3's `arc` generator for the mouth and nose, with circles for the eyes and face. The component defines fixed dimensions and hard-coded offsets for facial features, using React for the element tree and D3 v6 for path computation. The face displays a green-tinted circular head, white eyes with teal-outlined black irises, and curved mouth and nose paths, all centered within a 960×500 viewport.

Surprised Face (HTML)

A surprised face rendered as a simple five-circle SVG drawing. The face consists of a yellow circular head with a black outline, two small black eyes, and an open white mouth with a black border. Built with inline SVG elements inside an HTML document, the visualization uses no external libraries. The code defines each circle with explicit `cx`, `cy`, and `r` attributes for positioning, while styling appears through fill and stroke properties. The page sets its body margin to zero and hides overflow, keeping the graphic centered within a 960-by-500 viewport.

Smiley Face (React & D3)

A React component renders a smiley face as scalable vector graphics (SVG), composed of a yellow background circle, two dark eyes, and a curved mouth. The face is assembled from reusable components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which accept props for positioning and sizing. The mouth path is generated using D3’s `arc()` generator with specified inner and outer radii and angles, while the overall layout is centered via SVG transforms. The example demonstrates integrating D3 for geometry generation within a React component structure.

Rendering Data with React & D3

A radial burst of CSS named colors is rendered as a pie chart, with each wedge filled by its corresponding hex value. The visualization demonstrates combining React for component state and rendering with D3 utilities for data processing and shape generation. React’s `useEffect` and `useState` hooks fetch and store the CSV data, while `d3.csv`, `d3.pie`, and `d3.arc` compute the angular layout and path geometry. The chart uses SVG output, with a loading message shown before data arrives.

Nasu the Dog's Muscle Gains

This visualization shows the weight gain of a dog named Nasu over time, with a single line tracking weight across age. The chart uses a minimalist dark-themed style with a tooltip that reveals the date of each data point. Built with vega-lite-api, the line mark encodes age on the x-axis and weight on the y-axis, with data loaded from a CSV via d3.csv. The visualization is rendered as an SVG using Vega and Vega-Lite, with custom axis and label styling from a config object.

Loading Data with React & D3

This example demonstrates how to load and display dataset metadata using React and D3. The code fetches a CSV file of CSS named colors via D3’s `csv` utility, stores the parsed data in React state through the `useState` and `useEffect` hooks, and renders a summary using the `message` function. The summary reports the formatted file size in kilobytes, row count, and column count. D3’s `csvFormat` calculates the data size, while React manages the asynchronous loading state, showing “Loading...” until the data arrives.

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v6. It fetches a remote CSV file containing CSS named colors and displays a summary of the dataset, including its size in kilobytes, row count, and column count. The visualization uses `d3.csv` to fetch and parse the data asynchronously, then computes the formatted CSV string length with `d3.csvFormat` and accesses the parsed data’s `length` and `columns` properties. The result is rendered as large text in a `<pre>` element, illustrating basic data loading and metadata extraction.

Mouse Follower

This interactive visualization displays a single circle that follows the mouse cursor across an SVG canvas. Built with React, the example uses the `useState` hook to track the cursor's `clientX` and `clientY` coordinates within an `onMouseMove` event handler on the `<svg>` element. The circle's center position updates reactively via `setMousePosition`, rendering in real time as the user moves the mouse. The visualization demonstrates a simple, responsive interaction pattern using React's declarative state management and SVG rendering.