Skip to main content
Log in
S

sophievanderhorst

@sophievanderhorst·24 public vizzes

Loading thumbnail…

Fork of Panning & Zooming on a Globe

This example shows an interactive orthographic globe that can be panned by dragging and zoomed with the mouse wheel. Dragging rotates the projection based on drag distance and scale, while zooming adjusts the projection’s scale factor. The globe renders country boundaries from the `world-atlas` TopoJSON dataset using `d3.geoOrthographic` and `d3.geoPath`. User interaction is handled through `d3.drag` and `d3.zoom`, with rendering updating dynamically on each event.

Oct 11, 2022
Loading thumbnail…

Polished scatter plot with color legend interactive

This interactive scatter plot displays the Iris flower dataset, mapping sepal and petal measurements to the x and y axes via dropdown menus. A color legend distinguishes the three species, with hovering over a legend item dimming all points except those of the selected species. Built with React and D3 v6, the visualization uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for colors, rendering SVG circles with accessible tooltips.

Oct 5, 2021
Loading thumbnail…

Working with time

A line chart displays temperature readings over a week, with time on the horizontal axis and temperature on the vertical axis. The visualization uses React to render SVG elements, with D3’s `scaleTime` and `scaleLinear` for scaling, `line` with `curveNatural` for the smoothed path, and `extent` to compute domains. Data comes from a CSV of San Francisco temperatures. Axis components generate ticks using `xScale.ticks()` and `yScale.ticks()`.

Sep 7, 2021
Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15–49 in 2017, using a yellow-orange-red sequential color scale. The code employs React with D3 v6’s `geoNaturalEarth1` projection and `geoPath` to render SVG country shapes, while `d3.scaleSequential` and `interpolateYlOrRd` map data values to colors. Countries without matching data appear gray, and the map includes graticules and interior borders. Data is sourced from IHME via CSV, with country codes matched using ISO-3166 metadata.

Jul 9, 2021
Loading thumbnail…

Fork of Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event plotted by date on the x-axis and total dead or missing on a logarithmic y-axis. The visualization uses React with D3 v5 scales, including `scaleTime` and `scaleLog`, to map data from a CSV loaded via the `csv` function. SVG circles are rendered through React components for axes and marks, with tooltips showing formatted dates. The log scale compresses large casualty counts while preserving detail for smaller events.

Jul 9, 2021
Loading thumbnail…

Brush Missing Migrants

This interactive visualization shows global migrant deaths and disappearances, combining a world map with a time-series histogram. Users can brush over the histogram to filter the map, dynamically revealing incidents within a selected date range. The project uses React for state management, D3 v5 for map projections (`geoNaturalEarth1`), the `topojson` library for world atlas data, and D3's `brushX` for the brushing interaction. The rendered map and histogram are built with SVG elements, and the world atlas is sourced from the `world-atlas` package.

Jun 3, 2021
Loading thumbnail…

Fork of Missing Migrants of a map

This visualization combines a bubble map with a time-series histogram to display missing migrant incidents. Migrant deaths and disappearances are plotted as semi-transparent circles on a natural Earth projection using `d3.geoNaturalEarth1` and `d3.geoPath`, with circle size scaled via `d3.scaleSqrt` by total casualties. Below the map, a date histogram aggregates the same data by month, using `d3.bin`, `d3.scaleTime`, and `d3.scaleLinear` to show temporal patterns. The map and chart both render as SVG elements within a React component, pulling data from a Missing Migrants CSV subset and world atlas TopoJSON.

Apr 2, 2021
Loading thumbnail…

Missing Migrants of a map

This visualization maps missing migrant incidents worldwide, with circles sized by the total number of dead and missing per event. The geographic context comes from a world atlas with land, interiors, and graticules rendered using D3’s geoNaturalEarth1 projection and geoPath. A square root scale maps the data’s magnitude to circle radius, and the dataset is loaded via d3.csv from a GitHub gist. The visualization uses React to manage state and render the SVG marks.

Apr 2, 2021
Loading thumbnail…

Fork of Working with Time

This visualization is a bar chart that aggregates monthly totals of dead and missing migrants from the Data Canvas Sense Your City dataset, showing the sum of casualties over time. The x-axis uses a time scale with monthly bins, while the y-axis uses a linear scale for the count. Built with React and D3 v5, the code leverages `scaleTime`, `histogram` with `timeMonths` thresholds, and `sum` to bin and aggregate the data. SVG rectangles render the bars, with axes generated by custom `AxisBottom` and `AxisLeft` components.

Apr 2, 2021
Loading thumbnail…

World Map

This visualization displays a natural Earth projection world map with cities represented as semi-transparent circles sized by population. The map renders land masses in light gray with graticules and country borders overlaid. Built with React and D3 v6, it uses `geoNaturalEarth1` and `geoPath` for geographic projections, while `scaleSqrt` maps population data to circle radii. City coordinates and populations come from a CSV of world cities, and country boundaries derive from TopoJSON world-atlas data.

Mar 18, 2021
Loading thumbnail…

het wordt natter

This chart shows population growth from 1950 to 2020 for ten countries, using a bar chart with two overlaid bars per country to compare historical and current values. The bars are rendered using SVG rectangles via React and D3 v6, with axes built through scaleBand and scaleLinear. Data comes from the UN Population 2019 dataset, loaded with d3.csv. Hovering reveals formatted population values through native SVG title tooltips.

Mar 11, 2021
Loading thumbnail…

Fork of Fork of Stylized bar chart

A stylized bar chart displays the 2020 populations of the ten most populous countries, using a green fill for each bar. The visualization, built with React and D3 v6, renders bars as SVG rectangles, with horizontal grid lines and rotated country labels along the x-axis. Data is loaded from a CSV file, and population values are formatted using a D3 format function that abbreviates large numbers (e.g., "1.38B"). Population data serves as the y-axis, while country names are on the x-axis.

Mar 9, 2021
Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width for iris flowers. The visualization uses d3.scaleLinear for both axes, with React components rendering SVG circles through the Marks component. Data is loaded asynchronously via d3.csv from a GitHub gist, with axes created using d3 ticks and formatted with d3.format. The plot features a clean, minimal design with teal circles and a Poppins font, while native SVG <title> elements provide tooltips on hover.

Mar 9, 2021
Loading thumbnail…

Fork of Stylized bar chart

This bar chart displays population estimates for the top ten countries in 2020, sourced from UN population data. The visualization uses a horizontal layout with a linear x-scale and a band y-scale, styled with teal bars and formatted tick labels that convert billions to "B" notation. Built with D3.js (v6) and React, the chart renders as SVG, with reusable components for axes and marks that include native tooltips via the `<title>` element. A Poppins font and minimal styling create a clean, modern appearance.

Mar 9, 2021
Loading thumbnail…

Fork of Stylized bar chart

This bar chart displays the populations of ten countries from the UN Population 2019 dataset. Horizontal bars are rendered as SVG rectangles using React, with scales created via D3’s `scaleBand` and `scaleLinear`. Axis components are custom-built in JSX, and D3’s `format` function converts tick labels to abbreviated values like “1.2B.” A hover tooltip is provided through the SVG `<title>` element, and the layout uses a fixed 960x500 viewport with Poppins typography.

Mar 9, 2021
Loading thumbnail…

Stylized bar chart

This example visualizes the top 10 countries by population in 2020 using a horizontal bar chart with a clean, stylized aesthetic. The chart displays population values along the x-axis—formatted in billions with a custom tick formatter—and country names along the y-axis, with bars rendered as dark teal rectangles. Built with React and D3 v6, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `<rect>` elements for each bar. Data is loaded asynchronously from a CSV file using `d3.csv`, and tooltips appear on hover via SVG `<title>` elements.

Mar 9, 2021
Loading thumbnail…

Menus with react

This example demonstrates a dropdown menu for selecting a pet, with the chosen value displayed immediately. Built with React 16.9, it uses the `useState` hook to manage the selected value and a custom `Dropdown` component that renders a native `<select>` element, mapping over an array of pet options to create `<option>` tags. The menu updates via the `onSelectedValueChange` callback, which sets the new state and logs it to the console. The interface is styled with large fonts for visibility.

Mar 3, 2021
Loading thumbnail…

React starter

This React starter demonstrates how to embed a React application within an Observable-style gallery, rendering a static “Hello react!” message into the DOM via `ReactDOM.render`. The code imports React and ReactDOM from UMD builds and defines a simple `App` component using JSX. It initializes the React app inside a `<div>` with the ID `root`, which is referenced from the `index.html` file. The example uses standard React 16.9 APIs, including component creation and mounting, but does not include any data visualization or dynamic behavior.

Mar 3, 2021
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of the top ten most populous countries in 2020, with country names on the y-axis and population counts on the x-axis. Built with React and D3 v6, it uses `d3.csv` to load UN population data, `d3.scaleBand` for the categorical axis, and `d3.scaleLinear` for the quantitative axis. The chart renders as SVG, with gridlines and tick labels generated via `xScale.ticks()`.

Mar 2, 2021
Loading thumbnail…

Fork of Rendering data with React

This example presents a pie chart of CSS named colors, rendered as SVG paths within a React application. The chart uses D3's `pie` and `arc` functions to compute the pie slices, which are then drawn as `<path>` elements with their fill colors set to the corresponding RGB hex values from the data. The data is loaded asynchronously from a CSV file using D3's `csv` method, and the visualization updates once the data arrives, initially displaying a "Loading..." message. The chart is centered on an SVG canvas with a width of 960 and height of 500 pixels.

Mar 2, 2021
Loading thumbnail…

Rendering data with React

This example demonstrates rendering a dataset of CSS named colors as a vertical sequence of colored rectangles, each with a fixed width and height. The visualization uses React’s `useState` and `useEffect` hooks to asynchronously load a CSV file via `d3.csv()`, then maps the rows into React `<div>` elements whose `backgroundColor` styles are set from the `RGB hex value` column. The code relies on React DOM rendering and D3 v6 for data fetching, presenting a simple, static strip of color swatches without interaction or animation.

Mar 1, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a bar chart to display the top five countries by population, with each bar segmented by religion and sorted descending by population. The code loads CSV data from a GitHub Gist, then builds the chart using the Vega-Lite API with D3.js for rendering. The chart is configured with custom axis labels and tooltips, and it was created as a fork of a template demonstrating the Vega-Lite API integration.

Mar 1, 2021
Loading thumbnail…

Loading and Parcing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL using D3.js. The visualization displays summary statistics about the dataset—specifically the file size in kilobytes, the number of rows, and the number of columns—in a large text format within an HTML `<pre>` element. It uses the `d3.csv` method to fetch and parse the data from a GitHub gist containing CSS named colors, then computes the metrics with `d3.csvFormat` and the array's length properties. The output is rendered dynamically into the page's message container.

Feb 24, 2021
Loading thumbnail…

smiley

A grid of randomly generated smiley faces fills the screen, each face composed of a yellow circular background, two eyes, and an arc-shaped mouth, with variations in eye position, eye radius, and mouth size for each face. The visualization is built with React components that structure each face, while D3’s `arc` generates the mouth path and D3’s `range` creates the 18-face grid. Rendered as SVG, the faces use a random-number generator for their facial feature attributes, producing a playful, varied composition.

Feb 17, 2021