alexandermodell

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which numerical attribute appears on each axis, while the color legend identifies species using d3.scaleOrdinal. The visualization is built with React components, using d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.csv for data loading. The SVG rendering includes separate AxisBottom, AxisLeft, ColorLegend, and Marks components, with native browser tooltips on each circle showing formatted values.

Mar 2, 2022

Scatterplot with Color

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements. The chart uses dropdown menus to change which attributes appear on the x and y axes, with each of the three iris species represented by a distinct color. Built with React, the visualization uses D3 v7 scales for positioning and color encoding, rendering SVG circles with native `<title>` tooltips. The code leverages scaleLinear, scaleOrdinal, extent, and callback-driven state management.

Polished Scatterplot with Menus

This interactive scatterplot visualizes the Iris Dataset, allowing users to explore relationships between four flower measurements by selecting which attributes appear on the x- and y-axes via dropdown menus. The visualization uses React for the UI and D3 v7 scales (`scaleLinear`, `extent`) and SVG for rendering. Each data point is a circle colored teal, with axis labels updating dynamically based on the selected variables, and the code loads the dataset asynchronously with `d3.csv`.

Scatterplot with Menus

This interactive scatterplot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across different species. Two dropdown menus let viewers select which attributes appear on the x and y axes, with the plot updating dynamically. Built with React and D3 v7, the example uses D3’s scaleLinear and extent for axis scaling, and renders the scatterplot as SVG circles with tooltips. The data is loaded via D3’s csv function from a remote GitHub gist.

Menus with React

A React application demonstrates a controlled dropdown menu for selecting a pet, with the current choice logged to the console. The app uses React's `useState` hook to manage the selected value and renders a reusable `Dropdown` component, which maps over an array of pet options to populate a native HTML `<select>` element. The component receives `options`, an `id`, `selectedValue`, and an `onSelectedValueChange` callback, handling change events to update state. ReactDOM renders the app into a root div, with styling applied through inline CSS.

React starter

This example displays a minimal React application that renders the text “Hello React!” to the browser. It demonstrates how to integrate React with a visualization gallery setup, using `ReactDOM.render` to mount the component into a `#root` div. The code imports React and ReactDOM, defines a functional `App` component, and relies on a production build of React 16.9.0 loaded from a CDN. Styling removes default body margins and hides overflow, preparing the page for future visualization content.

World Map

This example displays a world map rendered as SVG paths, showing landmasses in teal with country borders in darker teal, overlaid on a graticule grid and pale sphere background. It uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to generate the geometric shapes, with TopoJSON `feature` and `mesh` extracting land and interior boundaries from the world-atlas dataset. The React component `Marks` maps each land feature to a path element, while the sphere and graticules are drawn first as base layers.

Feb 28, 2022

Working with Time

This example visualizes temperature over time in San Francisco, using a line chart to show how readings fluctuate throughout the week. The chart is built with React and renders as an SVG, using d3. `scaleTime` and `scaleLinear` handle the axes, while `line` with `curveNatural` draws a smooth path through the data points. The underlying CSV data is loaded asynchronously via `useData`, which parses timestamps and numeric temperature values.

Feb 28, 2022

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width using a stylized, minimalist design. The React application loads data via `d3.csv` with type coercion for numeric columns. SVG rendering relies on D3’s `scaleLinear` and `extent` for axes, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate tick marks and data points. Circle marks include native SVG tooltips, and the Poppins font and muted color palette enhance the clean aesthetic.

Feb 28, 2022

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population for 2020, using a horizontal layout with a Poppins font and teal-colored bars. The visualization loads United Nations population data via `d3.csv` and renders it as SVG elements through React components. Axes are constructed with `d3.scaleBand` for the categorical country names and `d3.scaleLinear` for the population values, with tick labels formatted using `d3.format`. Native SVG `<title>` elements provide tooltips on each bar, while the chart includes labeled axes and a clean, minimal aesthetic.

Refactored Bar Chart

A horizontal bar chart displays the top 10 countries by population for 2020, using UN population data loaded via D3's `csv` utility. The React app renders SVG rectangles through the `Marks` component, with scales from `d3.scaleBand` and `d3.scaleLinear` positioning bars and axes. Reusable `AxisBottom` and `AxisLeft` components generate tick marks and labels. The chart is built with React 16.9, D3 v7, and SVG rendering, isolating data-loading logic in a custom `useData` hook.

Axes with React and D3

A horizontal bar chart displays population data for ten countries in 2020, loaded from a CSV file via D3's `csv` utility. The chart uses D3's `scaleBand` and `scaleLinear` to map country names and population values to SVG coordinates, while React manages the component state and renders the SVG elements. Axes are drawn by iterating over ticks from the scales, with grid lines and labels positioned using React's map function.

The Margin Convention

This example presents a basic bar chart using a horizontal layout, displaying the top ten countries by population for 2020. The bars are drawn as SVG rectangles, with their lengths proportional to each country's population value. The chart's position within the viewport is controlled by a fixed margin on all sides, demonstrating the standard convention of reserving space for axes and labels. The code loads data from a CSV file using D3's `csv` utility, then uses D3's `scaleBand` for the categorical country axis and `scaleLinear` for the quantitative population axis. React manages the rendering of the SVG elements, while D3 handles the data loading and scaling.

Making a Bar Chart with React and D3

This example shows a horizontal bar chart ranking the top 10 countries by their 2020 population, rendered as SVG rectangles using React elements. The code loads CSV data from a GitHub gist using D3’s `csv` utility, then maps country names to y-coordinates via `scaleBand` and population values to x-widths via `scaleLinear`. Data loading and state management rely on React hooks (`useState`, `useEffect`), while D3 v7 provides the scales and `max` aggregation.

Feb 22, 2022

Rendering Data with React and D3

The example shows a pie chart of CSS named colors, where each slice represents one color from the dataset. It loads color data from a CSV file using D3's `csv` utility, then renders SVG paths with React, using D3's `pie` and `arc` functions to compute the slice geometry. The chart employs React's `useState` and `useEffect` hooks to handle asynchronous data loading, and each path's fill is set to the color's hex value from the data.

Feb 22, 2022

Vega-Lite API Template

This example visualizes the top five religions by country, using circle size to encode population and positioning to map country and religion attributes. It leverages the Vega-Lite API to construct a scatterplot, with data fetched via D3’s `csv` loader. The visualization is rendered as an SVG through Vega, incorporating a custom config for styling and automatic chart sizing to fit the viewport.

Feb 22, 2022

Loading Data with React and D3

This example demonstrates how to load external data in a React application using D3 utilities, displaying file size, column count, and row count from a CSV of CSS named colors. The code uses `useState` and `useEffect` hooks to manage the asynchronous `d3.csv` fetch, with `d3.csvFormat` calculating the data size in kilobytes. React conditionally renders a “Loading…” message until the data arrives, then passes the parsed data to a custom `message` function. The visualization appears as plain text, emphasizing integration between D3’s CSV parsing and React’s state management.

Feb 21, 2022

Loading and Parsing CSV Data

This example demonstrates two different methods for loading and parsing CSV data from a remote URL, using the CSS named colors dataset as the source. The visualization displays the file size, column count, and row count as plain text output. One approach uses the `fetch` API with async/await and `d3.csvParse`, while the other uses the higher-level `d3.csv` function, both ultimately producing identical summary statistics about the dataset.

Feb 21, 2022

Mouse Follower

A circle tracks the mouse cursor across a full-screen SVG canvas, redrawing its position in real time. The visualization demonstrates state-driven rendering with React, using the `useState` hook to store cursor coordinates and `onMouseMove` to capture events. A React component updates the circle’s `cx` and `cy` attributes dynamically, while the SVG viewport matches the browser window’s dimensions. The example uses the React and ReactDOM libraries to manage the interactive element without any external data source.

Feb 21, 2022