Catalina Vajiac

Fork of Coronavirus Log Y Axis

A multi-line chart compares cumulative COVID-19 deaths across countries over time, using a log-scaled y-axis to reveal relative growth patterns. The visualization reads data from the Johns Hopkins Coronavirus Dataset and renders with React and D3 v5, using `scaleLog`, `scaleTime`, and `line` for the chart. An interactive Voronoi overlay, built with `Delaunay.voronoi`, enables hover-triggered tooltips that display each country’s death count and date.

Mar 8, 2022

Missing Migrants on World Map

A world map uses natural Earth projection and semi-transparent circles to visualize the geographic distribution of missing migrants, with circle size encoding the total number of dead and missing per location. A linked date histogram below the map uses d3.bin for monthly aggregation and a brushX brush to filter the displayed data by date range. The visualization is built with React, d3.v5, and topojson, rendering geoPath for land masses, graticules, and interior boundaries from World Atlas TopoJSON data.

Mar 7, 2022

COVID line chart

This chart displays the total number of COVID-19 deaths in the United States over time as a black line on a yellow background. It uses React and D3 v5 scales, including `scaleTime` and `scaleLinear`, with a `line` generator to plot the data from the CSSE COVID-19 time series. A horizontal marker line at 900,000 deaths and a corresponding label are drawn using SVG elements within the chart’s margin-based layout.

Mar 4, 2022

Fork of Loading and Parsing COVID data

This visualization displays the total number of COVID-19 deaths in the United States, aggregated from the latest date in a time-series dataset supplied by the CSSE at Johns Hopkins University. It shows a single large text value that updates dynamically based on the data. The code uses the D3 library (d3.csv) to fetch and parse the CSV file, then applies a reduce function with a sum accumulator to calculate the total. A comma formatter from d3.format displays the result within a pre element.

HIV / AIDS world map vis

This visualization presents a choropleth world map depicting HIV/AIDS prevalence rates for the year 2017. Country boundaries are rendered using the `geoNaturalEarth1` projection and `geoPath` from D3, with graticules and interiors drawn for context. The map is color-coded using a sequential yellow-orange-red scale (`scaleSequential(interpolateYlOrRd)`) applied to AIDS prevalence data, with missing data displayed in gray. The geographic data originates from World Atlas TopoJSON, while the prevalence statistics are sourced from a CSV dataset.

HIV / AIDS

This visualization displays global city populations on a natural Earth projection world map, using semi-transparent circles sized by population. The map includes country boundaries, graticules, and interior borders. It uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` alongside React, with data from a CSV of world cities and TopoJSON from World Atlas.

Missing Migrants

This visualization shows the total number of dead and missing migrants over time, aggregated into monthly bins from a subset of the Missing Migrants Global dataset. The data is loaded via `d3.csv` and binned using `d3.histogram` with `timeMonths` thresholds, summing the 'Total Dead and Missing' values per bin. A time scale (`d3.scaleTime`) and linear scale (`d3.scaleLinear`) map the data to an SVG rendered with React components for axes and rectangle marks. Hovering over each bar reveals its exact total via a native `<title>` tooltip.

Cities on World Map

This example displays a world map with city populations overlaid as semi-transparent circles. Country boundaries appear as gray landmasses with interior borders, alongside graticules and a sphere outline. The visualization uses D3’s geoNaturalEarth1 projection and geoPath to render the map, with a sqrt scale mapping city population to circle radius. Data comes from a CSV of world cities and TopoJSON land geometry, rendered as SVG within a React framework.

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x and y axes via dropdown menus. The plot uses React dropdowns to control the axes, with d3.scaleLinear for positioning and d3.scaleOrdinal for species-based coloring. Hovering over the color legend highlights points of a selected species, using React’s useState to manage the hovered value, while SVG circles render each data point with tooltips.

React-select

A React interface demonstrates a pet-selection dropdown menu using the `useState` hook to manage user input. The example shows how to split components across files with ES6 modules, exporting a reusable `Dropdown` component that receives options, an identifier, and a callback for value changes. The component renders an HTML `<select>` element with `<option>` children, styling the label and select with CSS. Initialized with "hamster," the app logs each selected value to the console, illustrating state-driven interactivity within a ReactDOM-rendered application.

Mar 2, 2022

World map

This visualization shows a world map rendered as an SVG, featuring landmasses, country borders, graticules, and a sphere outline. It loads world-atlas TopoJSON data using d3.json and converts it to GeoJSON with the topojson feature and mesh functions. The map uses the d3.geoNaturalEarth1 projection and d3.geoPath to draw the geographic features. React manages the component state and rendering, while CSS styles define the color palette for the land, sphere, graticules, and interior boundaries.

Line Chart

A line chart displays temperature readings over time for a week in San Francisco, with a smooth curve connecting circular data points. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `line().curve(curveNatural)` for the path, and native SVG `<circle>` elements with `<title>` tooltips for points. Data loads as CSV via `d3.csv`.

Scatter Plot

This scatter plot displays the relationship between sepal length and sepal width from the Iris dataset. The visualization uses React to render SVG elements, with D3 utilities for data loading, scaling, and axis generation. The code employs `d3.csv` to fetch and parse the Iris data, `d3.scaleLinear` to map values to pixel coordinates, and custom React components for rendering axes and circular marks with hover tooltips. The plot features a clean design with gray tick marks, labeled axes, and teal-colored data points.

Fork of Fork of Rendering Data with React & D3

This visualization displays the populations of the top 10 countries using a horizontal bar chart, rendered as SVG elements. The chart employs D3.js scales (`scaleBand` and `scaleLinear`) to map country names and population values to coordinates, while React constructs the SVG components, including custom axes and mark elements. Data is sourced from a CSV file of UN population estimates, using D3's `csv` utility. Tooltips, formatted with D3's `format` function, reveal the precise population figures for each bar on hover.

Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of the top 10 countries by population, using React to render SVG elements and D3 for data processing and scales. The visualization uses the `UN_Population_2019` dataset, loaded via `d3.csv`, with a linear scale for population values and a band scale for country names. The code includes separate React components for the axes and marks, with D3’s `scaleBand` and `scaleLinear` functions, demonstrating a clean separation of data handling and UI rendering.

Mouse Follower

A colorful pie chart visualizes the distribution of CSS named colors. The chart is rendered using React, with D3.js handling the pie arc generation and data loading from a CSV file. The pie’s segments are colored according to each color’s RGB hex value, and the chart is centered within the SVG canvas. The implementation uses `d3.csv` to fetch the data, `d3.arc` to define the pie slice shapes, and `d3.pie` to calculate the slice angles, with React’s `useState` and `useEffect` managing the data loading lifecycle.

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between automobile horsepower, fuel efficiency, and origin using the Vega-Lite API, rendered with D3.js. Data from the auto-mpg.csv dataset is fetched via `d3.csv` and displayed as semi-transparent circles, where the x-axis encodes origin, the y-axis encodes horsepower, color distinguishes origin, and size maps to miles per gallon. The code builds the visualization by chaining `vl.markCircle()` and encoding methods, then applies a custom config for axes and typography, with tooltips enabled through the Vega-Tooltip handler.

Loading and Parsing CSV data

This example demonstrates loading and parsing a CSV file with D3, displaying basic file statistics as plain text. It fetches a remote dataset of CSS named colors and reports the number of rows, columns, and file size in kilobytes. The code uses `d3.csv` with a Promise-based `.then()` callback to handle the asynchronous data loading, and `d3.csvFormat` to compute the serialized size. All output appears in an HTML `<pre>` element via standard DOM text manipulation.

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote source using D3.js. It displays the file size, row count, and column count of the CSS Named Colors dataset in a large text format. The code uses `d3.csv` to fetch and parse the data asynchronously, then accesses the resulting parsed array and its `.columns` property. An alternative approach using `fetch`, `async`/`await`, and `d3.csvParse` is provided in comments, along with a deprecated callback-based "pyramid of doom" pattern.

Hello HTML

This example shows a cheerful, cartoon-like face composed of a yellow circle with a black outline, two black eyes, and a curved mouth. Built with React, it renders the face as an SVG using the `d3.arc` API to generate the mouth’s path. The `Face` component combines a `BackgroundCircle`, `Eyes`, and `Mouth` inside a translated group, with all geometry defined by parameters like `offsetX` and `mouthRadius`. The visualization is a minimal, static composition, demonstrating how React components can encapsulate and arrange D3-generated shapes.