Tatyana Milanova

Terrorism Attacks Choropleth Map

A choropleth map visualizes the number of terrorist attacks per country in 2021, using a sequential yellow-to-red color scale to represent attack counts, with gray indicating missing data. The map displays country boundaries and graticules, rendering with React and D3’s `geoNaturalEarth1` projection via `geoPath`. Data comes from a CSV of terrorist attacks, joined to ISO country codes, while the map geometry uses TopoJSON from the World Atlas.

Oct 10, 2023

Missing Migrants Scatter Plot Log Scale

A scatter plot displays the Missing Migrants Dataset, with each point representing an event and positioned by reported date on the time-based x-axis and the total dead and missing on a log-scale y-axis. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLog` to map data to SVG coordinates, while custom `AxisBottom` and `AxisLeft` components render ticks. Circles are drawn via the `Marks` component with tooltips showing the date. Data loads asynchronously via `d3.csv`, and the chart includes rotated axis labels.

Oct 10, 2023

Brushing Missing Migrants Multiple Views

This interactive visualization combines a world map and a time-series histogram to explore missing migrant incidents. Users can brush over the histogram to filter the map, which displays proportional circles sized by the total number of dead and missing individuals. The map uses a natural Earth projection with graticules and country borders, rendered with SVG via React. Data comes from the Missing Migrants Project and is aggregated by month using d3.bin. The linked views are implemented with d3.scaleSqrt for circle sizing and d3.brushX for the interactive selection.

Oct 10, 2023

Smiley Face

A smiley face rendered as a static SVG chart in React, composed from reusable components for the circular yellow background, eyes, and mouth. The face is centered in a 900 by 450 viewport, using D3's `arc` generator to draw the mouth as a half-annulus. Parameters like eye offset, radius, stroke width, and mouth dimensions are passed as props to the `Face` component, allowing for easy customization of the facial geometry.

D3 bin(histogram) aggregated by months

A bar chart aggregates monthly totals of dead and missing migrants from a 2023 subset of the Missing Migrants Project data. D3’s `bin()` with `timeMonths` thresholds groups the data, while `scaleTime` and `scaleLinear` position bars. The SVG renders React components for axes and marks, with simple `<title>` tooltips.

Missing Migrants Multiple Views

The visualization combines a bubble map and a time-series histogram to show the global distribution and monthly trends of missing migrants. A natural Earth projection renders country boundaries and graticules, with circles sized by the total number of dead and missing per location. A date histogram aggregates the same metric by month using `d3.bin` and `d3.timeMonths`. Data comes from a CSV of 2023 missing migrant records, with map layers built from TopoJSON world atlas data.

Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a bubble map and a date histogram to explore migrant deaths worldwide. The map displays circles sized by the total dead and missing count, while the histogram shows the same data binned by reported date. Users brush along the histogram’s time axis to filter the map’s circles in real time, using a `brushX` interaction that updates React state. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and `scaleSqrt` for sizing, with data from the Missing Migrants Project.

Missing Migrants on a Map

This interactive visualization maps recorded incidents of missing migrants worldwide, with each circle representing an event and its radius scaled by the total number of dead or missing individuals. Using a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, the map renders country boundaries, graticules, and points from CSV data loaded with `d3.csv`. Circle sizes are determined by a square-root scale (`scaleSqrt`) applied to the death toll, and the React-based component structure uses `useWorldAtlas` to fetch TopoJSON land and interior boundaries.

Sized Points on a Map

A world map displays cities with populations over 50,000, with each city shown as a semi-transparent circle whose radius is proportional to population via a square-root scale. The map uses a natural Earth projection and includes graticules, country land masses, and interior boundaries. The visualization is built with React and D3, using `d3.geoNaturalEarth1` and `d3.geoPath` for rendering the map, `d3.scaleSqrt` for the circle sizes, and data loaded from a Simplemaps world cities CSV.

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width across three species. Users can hover over the ordinal color legend to highlight points of a selected species while fading others, using React state to manage hover interactions. The visualization is rendered with SVG elements, with axes and scales built using d3.scaleLinear and d3.scaleOrdinal, while d3.csv loads the dataset.

Scatter Plot with Menus and Color Legend

Interactive scatter plot of the Iris dataset, implemented with React and D3 v5, visualizes relationships between flower measurements. Users can dynamically select which quantitative attributes to plot on the x and y axes using dropdown menus, while a color legend distinguishes species. The visualization uses D3's scaleLinear, scaleOrdinal, and extent APIs to compute scales, with SVG marks rendered as circles. Data is loaded from a CSV file using D3's csv function. The interface includes custom React components for axes and a color legend, with styling from Poppins fonts and the react-dropdown library.

Menus with React

This example shows how to build interactive dropdown menus using React’s `useState` hook to manage selected values. It renders a labeled `<select>` element with four car options (Volvo, Saab, Mercedes, Audi) and updates the displayed choice when the user changes the selection. The code imports `createRoot` from `react-dom` and defines a reusable `Dropdown` component that receives `options`, `selectedValue`, and `onSelectedValueChange` callbacks. React 18.2.0 loads from a CDN, with styling applied through plain CSS in the HTML file.

React and D3 StarterCode

This example demonstrates a minimal React application rendering a static “Hello” message, showing how D3 can be loaded alongside React in a single project. The code imports React and `createRoot` from `react-dom` to mount the `App` component into the `#root` element, while D3 v7 is included via external script tags in `index.html` but is not yet used for any visualization. The styling applies a large centered font size to the message, serving as a basic starter template for integrating D3 with React.

World Map D3 and React

This example presents a static world map rendered as an SVG, with landmasses in teal, graticules, and a light sphere background. Built with React and D3 v5, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate paths, while `d3.geoGraticule` creates the grid lines. Data comes from the `world-atlas` TopoJSON, parsed via `topojson.feature` and `topojson.mesh` to draw country boundaries.

World map with D3.js!

This example displays a world map rendered in an SVG using D3.js v5. It projects country boundaries with the Natural Earth projection via `d3.geoNaturalEarth1` and draws them through `d3.geoPath`. The map’s ocean is a distinct blue sphere path, while countries appear as light green shapes with subtle black strokes. Geographic data comes from the world-atlas TopoJSON file, converted to GeoJSON using `feature` from the Topojson library.

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, including graticule and country outlines. It loads GeoJSON data from the `visionscarto-world-atlas` package via `topojson-client`, then draws each country as a path. The visualization fetches the atlas asynchronously and re-renders once data arrives, with the SVG sized to the full viewport.

Temperature Line Chart

This line chart visualizes weekly temperature readings from the Data Canvas Sense Your City dataset, plotting temperature against time. The React component uses d3.scaleTime and d3.scaleLinear for axes, with data loaded via d3.csv. A smooth curve, generated by d3.line().curve(curveNatural), connects points, while circles with tooltips provide individual readings. The SVG rendering includes custom AxisBottom and AxisLeft components that map ticks from the scales, and the chart displays time on the x-axis and temperature on the y-axis with labeled axes.

Scatter Plot - Iris flower

This interactive scatter plot visualizes the Iris flower dataset, showing the relationship between sepal length and sepal width. Each circle represents a sample, with hover tooltips revealing the exact sepal length value. The visualization uses React with D3's `scaleLinear` for axis scaling and `extent` to compute data domains. Axes and tick marks are generated using custom React components (`AxisBottom`, `AxisLeft`) that map D3 scale values to SVG elements. Data is loaded asynchronously from a CSV file via D3's `csv` function. The plot renders as an SVG with a clean, muted color palette and Poppins typography.

Oct 5, 2023

Countries Bar Chart

This chart visualizes the top 10 most populous countries based on United Nations World Population Prospects 2019 data. It shows horizontal bars representing each country's population, with the x-axis labeled "Population." The visualization is created using React and D3 v5, with SVG rendering. The code uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and d3.csv to load the dataset. Axis components and marks are defined as separate React components, with tooltips displaying formatted population values.

Oct 5, 2023

Loading Data with React & D3

This example shows a ring of colored pie slices, each representing a CSS named color from a CSV file. The visualization uses React state to manage the data loading process, displaying a "Loading..." message until the data arrives. Once loaded, the app creates SVG path elements for each color, using D3's `arc` and `pie` functions to calculate the pie geometry. React's `useEffect` hook triggers the asynchronous `d3.csv` fetch, and the resulting data is rendered as a full circle of color swatches.

Oct 4, 2023