M

Milena Belianovich Holtman

@milenabel·34 public vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes vehicle fuel efficiency using an interactive scatter plot of the Auto MPG dataset, where each point represents a car with its miles per gallon on the x-axis, horsepower on the y-axis, color encoding country of origin, and point size indicating weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to render the chart as SVG, while D3.js loads the CSV data asynchronously. The code configures axis styles, tooltips through the Vega Tooltip handler, and automatically sizes the chart to fill the window.

Loading thumbnail…

Missing Migrants Multiple VIews

This interactive visualization combines a world map and a time-series histogram to explore the Missing Migrants dataset. The map shows each event as a circle, with the radius scaled by the square root of the total dead and missing count, while the histogram displays the monthly sum of deaths over time. The code uses D3 v5 for data processing, projection, and scales, including `scaleSqrt`, `geoNaturalEarth1`, and `geoPath`. React components render the SVG marks, and the world map utilizes TopoJSON for country boundaries.

Loading thumbnail…

Fork of Missing Migrants on a Map

A world map displays individual migration events from the Missing Migrants Dataset, with each circle sized by the square-root-scaled count of dead and missing people at that location. D3’s `geoNaturalEarth1` projection and `geoPath` render the sphere, graticules, land, and country interiors from World Atlas TopoJSON, while React components manage the SVG marks. Data loads via D3’s `csv` and `json`, and circle radii use `scaleSqrt` with a maximum radius of 15 pixels.

Loading thumbnail…

Missing Migrants Data Part II

This interactive histogram visualizes the number of dead and missing migrants over time, using React to render SVG elements and d3.js utilities like `scaleTime`, `scaleLinear`, and `histogram` to bin the data by month. The chart displays total deaths per time period across the x-axis and frequency on the y-axis, with tooltips showing exact values. The data comes from a CSV file of Missing Migrants records, and axes are generated by custom React components using d3 scales.

Loading thumbnail…

Fork of Missing Migrants Date Histogram

A date histogram visualizes the monthly sum of dead and missing migrants from the Missing Migrants Dataset, using time-binned bars along a linear scale for counts. Built with React and D3 v5, the chart applies `d3.bin` with `timeMonths` thresholds and `d3.sum` to aggregate values, rendering SVG rectangles via reusable axis and mark components. Axes are drawn with custom `AxisBottom` and `AxisLeft` components, while a native SVG `<title>` element provides hover tooltips showing the total per bin.

Loading thumbnail…

Missing Migrants Data Part I

A scatter plot displays the relationship between reported date and total dead and missing migrants from the Missing Migrants Global dataset. The visualization uses React components to render SVG circles, with d3.scaleTime and d3.scaleLinear mapping the data dimensions to pixel coordinates. The code implements reusable AxisBottom, AxisLeft, and Marks components, with d3.csv loading the data and d3.timeFormat handling date tick labels.

Loading thumbnail…

Points on a Map

This example displays a stylized world map with semi-transparent, scaled circles marking the population of cities. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render land masses, graticules, and country interiors from a TopoJSON world atlas. City coordinates are projected onto the SVG canvas, with circle radii determined by a square root scale (`d3.scaleSqrt`) based on population data loaded from a CSV. The React application manages data fetching with custom hooks, while the `Marks` component renders the geographic layers and city points.

Loading thumbnail…

Polished World Map

This stylized world map presents landmasses in a teal palette against a light gray sphere, with graticules marking latitude and longitude lines. The visualization is built using React and the D3.js geoNaturalEarth1 projection, rendered as SVG paths via the geoPath API. It loads country and land boundary data from the World Atlas TopoJSON source, processing it with the TopoJSON feature and mesh functions to distinguish and style each geographic component.

Loading thumbnail…

Interactive Color Legend

This visualization displays the Iris dataset as a scatter plot of petal length against sepal width, with points colored by species. An interactive color legend allows users to hover over a species label, which highlights the corresponding points and fades all others to 20% opacity. The chart is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for colors, and `D3.csv` to load the data. Axes and legends are rendered as reusable SVG components, with hover events managed through React state.

Loading thumbnail…

Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays petal length against sepal width, with points colored by species and a legend indicating the three categories. The visualization uses React to render SVG elements, with D3 v5 scales (scaleLinear, scaleOrdinal) handling positions and colors, and D3's csv loader fetching the data. Custom React components define the axes, marks, and color legend, while D3’s format function applies tick label formatting.

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width with each of the three iris species colored distinctly. The visualization uses React with D3 v5, employing d3.scaleLinear for both axes and d3.scaleOrdinal for color mapping. Data is loaded via d3.csv from a GitHub gist, and axes are rendered as custom React components. SVG circles represent individual flowers, with native `<title>` elements providing tooltips on hover.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via dropdown menus. Built with React and D3, the visualization uses `d3.scaleLinear` for axis scaling, `d3.extent` for domain calculation, and React components for the interface. The SVG rendering includes customizable axes with formatted tick labels and circular data points with tooltips. The menus are implemented using the react-dropdown library, while data loading handles CSV parsing with type coercion.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, showing four flower measurements (sepal and petal length/width) as adjustable axes. Dropdown menus allow the user to select which measurement appears on the x- and y-axes, with axis labels updating accordingly. The React application uses D3’s `scaleLinear`, `extent`, and `format` for scaling and tick formatting, rendering SVG circles with tooltips via the `Marks` component. Data is loaded asynchronously from a CSV using `d3.csv`, and the visualization is built in React with D3 for scales and axes.

Loading thumbnail…

Menus with React

This example demonstrates a simple pet-selection menu built with React and D3. It shows a labeled dropdown that lets users choose from a list of pets, with the current selection (initially “hamster”) displayed. The interface uses React’s `useState` hook to manage the selected value, while a reusable `Dropdown` component renders the `<select>` element and handles change events. Although D3 v7 is loaded, it is not actively used in this menu’s logic, which relies purely on React’s state and event handling.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a simple "Hello React" message on a blank page. It combines React 18 with D3 v7 by loading both libraries via CDN. The code defines a D3 arc generator for a mouth shape, but the visible output is only the static text. ReactDOM renders the App component into a root div element, while the page’s global styles hide any default margins and overflow. The example serves as a foundational template for integrating React and D3 in a single-file setup.

Loading thumbnail…

Working with Time

A line chart displays temperature readings over the course of one week in San Francisco, using a time-based x-axis and linear y-axis. The visualization is built with React and D3 v5, leveraging `scaleTime` and `scaleLinear` for axes. A single path, generated by d3's line generator, connects the data points without individual circles rendered. The dataset comes from the Data Canvas Sense Your City project, loaded via `csv` and parsed into `Date` objects for the timestamps.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot displays the sepal length and width measurements from the Iris Dataset, plotting each flower as a point in a clean, minimal SVG visualization. The chart uses React components for rendering and d3.scaleLinear for axes, with d3.csv loading the data and d3.extent computing the domains. The Poppins font and custom axis tick styling give the plot a polished, modern appearance, while native SVG <title> elements provide tooltips on hover.

Loading thumbnail…

Stylized Bar Chart

This example shows a horizontal bar chart using data from the United Nations population estimates for 2020. The chart displays population values for the ten most populous countries, with country names positioned along the vertical axis and population represented by bar length. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for the axes and React components to render SVG marks and tick labels. The `Marks` component creates rectangles that include an SVG `<title>` element for hover tooltips, while the bars and labels are styled through the Poppins font and a custom color scheme.

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart comparing the populations of ten countries, represented as SVG rectangles encoded by length along the x-axis. The chart’s axes are composed from React components (AxisBottom, AxisLeft, Marks) that render D3 scales (scaleBand, scaleLinear) and ticks. Data is loaded asynchronously from a CSV using D3’s `csv` function and `useData` hook, while the y-axis labels use the band scale’s domain and bandwidth.

Loading thumbnail…

Axes in React with D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG in React. The code uses D3 utilities `csv` and `scaleBand`/`scaleLinear` to load and scale data from a UN population CSV, while React's `useState` and `useEffect` manage the async data loading. Custom tick marks and labels are drawn manually using JSX elements, with D3's `max` and `ticks` methods driving the x-axis scale and gridlines.

Loading thumbnail…

The Margin Convention

This visualization displays the top 10 most populous countries in 2020 as horizontal bars, with each bar’s length proportional to its population. The chart is rendered as an SVG using React components, with data loaded via D3’s `csv` utility. Margins are applied to position the inner group, while `scaleBand` and `scaleLinear` map country names and population values to pixel coordinates. The code also includes commented-out logic for generating pie arcs with `arc()` and `pie()`, though the active view uses simple rectangles.

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot visualization of automotive data, showing the relationship between vehicle weight, horsepower, and fuel efficiency (mpg). The visualization uses the Vega-Lite API to construct a circle mark with position encoding for weight and horsepower, while color and size encode weight and mpg respectively. It pulls data from a CSV file using d3's `csv` method, and renders the chart as an SVG with a tooltip handler. The code registers Vega-Lite and uses its high-level declarative syntax to define the plot, with custom configuration for axis styling and dark text labels.

Loading thumbnail…

Pathetic Bar Chart

This example uses React and D3 to render a horizontal bar chart of the ten most populous countries from a UN population dataset. The visualization shows country names on the y-axis and population totals on the x-axis, with each bar’s length proportional to its population value. The code loads CSV data via `d3.csv`, assigns ordinal y-axis scales using `d3.scaleBand`, and a linear x-axis scale constructed with `d3.scaleLinear` and `d3.max`. React’s `useEffect` hook triggers the asynchronous data fetch, and the final SVG is built by mapping over the data to output `rect` elements.

Loading thumbnail…

Rendering Data with React & D3

This example uses D3 utilities to load CSS named color data and React to render it as a radial burst of pie slices, with each slice filled by its corresponding hex value. The code loads a CSV of colors via `d3.csv`, computes the pie layout with `d3.pie`, and generates the SVG paths with `d3.arc`. React manages the asynchronous data fetch and renders the SVG elements declaratively, showing how the two libraries can work together for data-driven visualizations.

Loading thumbnail…

Vega-Lite API Template Bar Chart

This bar chart visualizes the population of each country in 2015, using a horizontal bar for each nation. Constructed with the Vega-Lite API, the chart serializes a declarative specification through `vl.markBar()` and `vl.x().fieldN('country')`/`vl.y().fieldQ('population')`. The code registers Vega, Vega-Lite, and the tooltip handler, then loads CSV data from a GitHub gist via `d3.csv`. The visualization renders to SVG and adapts to the browser window size.

Loading thumbnail…

Vega-Lite API Template Stacked Bars

This stacked bar chart displays the top 5 religions by population for each country, using color to encode religion and bar length to encode population. The visualization is built with the Vega-Lite API, which constructs a specification programmatically using methods like `markBar()` and `encode()`. Data is loaded from a CSV file via `d3.csv`, and the chart is rendered to SVG through Vega, with custom configuration for axis styling and tooltips provided by `vega-tooltip`.

Loading thumbnail…

Vega-Lite API Template Area Chart

This example renders a Vega-Lite area chart of weekly temperature data for San Francisco. The visualization uses the vega-lite-api JavaScript library to define a markArea encoding with timestamp on the x-axis and temperature on the y-axis, both with zero-based scaling disabled. The chart is customized with config settings for axis labels and titles, and rendered as an SVG using vega, vega-lite, and vega-tooltip, with data loaded asynchronously via d3.csv. The view is sized to fill the browser window with a fit autosize type.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external data in a React application using D3 utilities, displaying the dataset’s size in kilobytes, row count, and column count. The component uses `useState` and `useEffect` to fetch a CSV of CSS named colors via `d3.csv`, then stores the parsed result in React state. While the data loads, the interface shows “Loading…”; once fetched, a custom `message` function formats the summary using `d3.csvFormat` to compute the file size. The app renders with ReactDOM, leveraging D3 v7 and React 16.9.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data with D3 v7 in a React framework. It fetches a CSV file of CSS named colors from a GitHub gist and displays summary statistics—file size in kilobytes, row count, and column count—in a large text element. The code uses `d3.csv` for asynchronous loading and parsing, then `d3.csvFormat` to calculate byte length, and accesses `data.length` and `data.columns.length` for row and column totals. An alternative commented approach shows fetching text with the Fetch API and parsing via `d3.csvParse`.

Loading thumbnail…

Mouse Follower

This example shows a yellow circle with a black outline that follows the mouse cursor across an SVG canvas. On every mouse move, the circle’s center position updates to the cursor’s current coordinates. The visualization is built with React, using the `useState` hook to track the mouse position and the `useCallback` hook to handle the `onMouseMove` event, rendering the circle as an SVG `<circle>` element.

Loading thumbnail…

Smiley Face Part VI

A grid of six-by-three smiley faces, each with randomized facial features, fills the viewport with subtle variety in eye position, mouth shape, and stroke weight. The example demonstrates component reuse in React by mapping over a range from D3’s `range` function to render multiple `Face` components. Each face combines SVG primitives—circles for the background and eyes—with a D3 `arc` path for the mouth, all composed through ES6 modules and positioned via a translated `<g>` element.

Loading thumbnail…

Smiley Face Parts I, II, and III

This example shows a yellow smiley face constructed from SVG shapes, including two eyes, a mouth arc, eyebrows, a red nose, and white teeth-like rectangles. The face is centered and built using React components with D3’s `arc()` generator to create the mouth path. Circle, line, rect, and ellipse SVG elements are positioned using constants derived from the viewport dimensions and offsets. The code uses `ReactDOM.render` with D3 v7, all rendered inside a single SVG group transposed to the canvas center.

Loading thumbnail…

Smiley Face Part V

A smiley face rendered in SVG appears at the center of a fixed canvas, built from separate React components for the yellow background circle, two black eyes, and a curved mouth. The mouth uses d3.arc to generate the path with specified inner and outer radii and angles, while the background and eyes are simple SVG circles. All elements are positioned relative to a central translation, with sizes and offsets defined as constants. The visualization demonstrates composing reusable React components with D3 geometry helpers for a static, stylized figure.

Loading thumbnail…

Smiley Face Part IV

This example renders a yellow smiley face using React and D3’s `arc` generator to draw the mouth. The SVG output places two static eye circles and a mouth path on a yellow background circle with a black stroke, all centered within a 960×500 viewport. The code defines the mouth arc with inner and outer radii, then uses React components to structure the SVG elements. The face is purely graphical, with no data input or interactivity, illustrating a simple composition of D3 shape primitives within a React component.