fjvoris

Voronoi Overlay with Labels

A multi-line chart displays cumulative COVID-19 deaths over time for the US, Italy, and France, using a log-scaled y-axis. A Voronoi overlay, built with `d3.Delaunay` and `voronoi.renderCell`, captures mouse hovers to highlight the nearest data point and its line, while a tooltip shows the country, death count, and date. The visualization is rendered in SVG within a React component, updated via `useMemo` and React state, with data loaded from the CSSEGISandData COVID-19 time-series CSV.

Mar 14, 2023

Scatterplot with Color and Legend

A scatterplot of Iris flower measurements uses D3 scales and React components to render sepal length against sepal width. The view encodes species membership through color, with an ordinal scale mapping three categories to a fixed palette. A D3-generated legend identifies the color-to-species correspondence, while axis components provide tick marks and labels. The React application loads CSV data via D3's `csv` utility and renders the visualization as SVG, with a color legend and tooltips showing exact values.

Mar 13, 2023

Coronavirus Deaths by Country with Labels

Spiral lines trace cumulative COVID-19 death totals for each country over time on a log scale. A red Voronoi overlay, built with `d3.Delaunay`, captures mouse hovers to highlight the corresponding country line. React manages component state, while D3’s `scaleTime`, `scaleLog`, and `line` generate the SVG paths from the CSSE global time-series data.

Mar 12, 2023

Coronavirus Deaths by Country

This chart tracks cumulative COVID-19 mortality over time for each country, with each line representing a nation’s reported death toll. It uses a logarithmic y-axis to accommodate the wide range of counts, and a time-based x-axis spanning the pandemic’s progression. The visualization is built with React and D3 v5, utilizing `scaleTime` and `scaleLog` for scaling, `line` for path generation, and `axisBottom`/`axisLeft` for grid axes, rendered as SVG paths. Data is fetched from the Johns Hopkins CSSE COVID-19 global time-series CSV, aggregated by country.

Coronavirus Log Scale

This chart displays the global cumulative death toll from COVID-19 over time using a logarithmic y-axis that spans from 10 to 10 million deaths. The line chart reveals exponential growth patterns more clearly than a linear scale, with axis ticks positioned at powers of ten and formatted using abbreviated notation. Built with React and D3 v5, the visualization loads data from the CSSE COVID-19 time series at Johns Hopkins, aggregates daily totals across all countries, and renders the result as a bold SVG path. The chart includes gray grid lines, clear axis labels, and a title, demonstrating modular components for axes and the main plot.

React + D3 Axes

This example shows a COVID-19 global death toll line chart over time, with dashed reference lines marking the most recent date and the one-million-deaths threshold. Built with React components and D3 scales, the chart uses `scaleTime` and `scaleLinear` to position the line, while separate `XAxis` and `XMarkerLine`/`YMarkerLine` components render the axis and annotations via SVG. Data is loaded from the Johns Hopkins CSSE GitHub CSV and transformed with `csv` and `timeParse`.

Coronavirus Line Chart with Marker Line Margin Convention

This example shows the cumulative global COVID-19 death totals over time as a black line chart, with horizontal and vertical marker lines highlighting the one-million-death threshold and the most recent date. The visualization uses React components with ES6 modules, while D3 v5’s `scaleTime`, `scaleLinear`, and `line` APIs handle the data mapping and path generation. Data comes from the CSSE COVID-19 time series CSV, and the chart includes margin-based positioning for axes and markers in an SVG render.

Coronavirus Line Chart with Marker Line

A line chart visualizes the global cumulative total of COVID-19 deaths over time, with a horizontal marker line positioned at one million deaths. The chart uses React to render an SVG, with scales and line generation handled by d3.scaleTime, d3.scaleLinear, and d3.line. The data comes from a CSV file provided by the COVID-19 Data Repository at Johns Hopkins University, loaded via d3.csv and transformed by grouping daily death totals.

Summarizing Coronavirus Data

This example displays the total global COVID-19 deaths as a large, prominently styled number, along with the date of the latest data column. It loads a time series CSV from the Johns Hopkins CSSE repository using `d3.csv` and a Promise, then parses the last column’s values. The sum is computed with `Array.reduce` and formatted with `d3.format`. The resulting message is inserted into the DOM via `textContent` within a React-agnostic HTML page, using D3 v5.

Mar 10, 2023

Loading and Parsing Coronavirus Data

This example demonstrates how to load and parse a global coronavirus deaths time-series dataset. It fetches CSV data from the Johns Hopkins CSSE GitHub repository using the `d3.csv` method, which returns a Promise. After loading, the program computes and displays summary statistics—the file size in kilobytes, the number of data rows, and the number of columns—within a large HTML `<pre>` element. The visualization uses D3 v5’s `csvFormat` to calculate the byte length of the formatted data, highlighting a straightforward data-processing workflow without any graphical chart.

Mar 10, 2023

HIV Choropleth

This choropleth map visualizes the global prevalence of HIV among adults aged 15–49 in 2017, with countries colored on a yellow-orange-red sequential scale based on infection rates. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` to render world country boundaries, graticules, and interiors from TopoJSON data. Country codes are joined from an ISO-3166 CSV dataset to map each feature to its HIV prevalence value, while gray indicates missing data. The color scale uses `scaleSequential` with `interpolateYlOrRd`.

Mar 9, 2023

Migrant Deaths (Log Scale)

This example visualizes reported migrant deaths and disappearances over time, plotting each incident as a point on a scatterplot with a logarithmic y-axis for the total dead and missing. The visualization uses React to render SVG circles, with D3’s `scaleTime`, `scaleLog`, `extent`, and `timeFormat` utilities to position axes and ticks. Data is loaded as CSV via `d3.csv` from a remote gist, and hovering reveals the incident’s report date through the native SVG `<title>` tooltip.

Mar 9, 2023

Multiple Views Brushing

A choropleth-style bubble map displays total dead and missing migrants by location, overlaid on a natural Earth projection rendered with `d3.geoPath`. A linked brushing time-series histogram below, built with `d3.brushX`, filters the map’s circles by reported date when the user drags a selection window. The map uses a `d3.scaleSqrt` for circle radii, while the histogram aggregates data into monthly bins via `d3.histogram`. Both views are React components sharing the same SVG canvas, with data loaded from a CSV of migrant incidents and world atlas TopoJSON.

Multiple Views

This example combines a bubble map and a date histogram to visualize migration incidents, showing geographic patterns alongside temporal trends. The map uses `geoNaturalEarth1` and `geoPath` from D3 to render world atlas data, with circle sizes scaled by the square root of the total dead and missing. The histogram bins reported dates by month using `scaleTime`, `bin`, and `timeMonths`, while both views share the same dataset loaded via `csv`. React manages the component state and layout, rendering everything as SVG.

Missing Migrants on Map

This map visualization plots the locations of missing migrants globally, with circle size corresponding to the total number of dead and missing individuals. The data is loaded from a CSV file and rendered over a world atlas using React and D3. The visualization uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to draw the map, while a square-root scale maps the death toll to circle radii on top of the geographic features.

Migrant Deaths II

A histogram displays monthly totals of migrant deaths and missing persons over time, with the x-axis showing reported dates and the y-axis showing aggregated counts. Built with React and D3 v5, the visualization uses d3.csv for data loading, d3.bin with d3.timeMonths thresholds for temporal binning, and d3.sum to aggregate values per bin. SVG rectangles render the bars, with axes generated by custom React components using d3.scaleTime, d3.scaleLinear, and d3.timeFormat for tick labels.

Migrant Deaths

A scatterplot visualizes reported migrant deaths over time, with each circle representing a date and the total number of dead and missing. The visualization uses D3 utilities (`scaleTime`, `scaleLinear`, `extent`, `timeFormat`) to compute scales and axes while React renders SVG elements. Data is loaded via D3’s `csv` from a Missing Migrants Project subset, with axes and circles styled subtly.

Mar 6, 2023

Points of a Map with Size

A world map renders populated cities as translucent circles, with point size encoding each city’s population through a square-root scale. Using D3’s `geoNaturalEarth1` projection and `geoPath`, the map displays landmasses, graticules, and country borders, while React components load data via the `useWorldAtlas` and `useCities` hooks. City coordinates are projected and drawn as SVG circles, with population data sourced from a CSV file and geographic boundaries from TopoJSON.

Mar 6, 2023

Points on a Map

This visualization displays a world map rendered using D3’s geoNaturalEarth1 projection, with city locations plotted as semi-transparent teal circles based on latitude and longitude data. The map includes graticules, land masses, and country boundaries, all drawn with d3.geoPath. The React app loads TopoJSON world atlas data and a CSV of world cities, using a custom hook to fetch each dataset.

Mar 6, 2023

Interactive Color Legend

This interactive scatterplot displays the Iris flower dataset, mapping sepal length and width for three species. Hovering over the color legend highlights points of that species while fading the others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, `extent`, and `csv` to load and scale data, while custom React components for axes, marks, and legend handle interactive filtering through state.

Scatterplot with Color

This scatterplot displays the Iris dataset, plotting sepal length on the x-axis and sepal width on the y-axis, with each species assigned a distinct color. The visualization uses D3’s `scaleLinear` for positioning, `scaleOrdinal` for color mapping, and React to render SVG circles and axis components. The data is loaded asynchronously via `d3.csv` and parsed into numeric fields. Hovering over a point reveals its sepal length through a native SVG `<title>` tooltip.

Polished Scatterplot with Menus

This interactive scatterplot displays the Iris flower dataset, with dropdown menus letting users select which numerical attribute maps to the x- and y-axes. The visualization is built with React and D3 v5, using `scaleLinear` and `extent` for axis scaling, while the `csv` loader fetches the data. React state updates trigger re-renders of the SVG marks, with styled tick lines and text labels from custom `AxisBottom` and `AxisLeft` components, and circles colored with a fixed teal fill.

Scatterplot with Menus

This interactive scatterplot displays the classic Iris flower dataset, plotting measurements such as petal length and sepal width. Users can dynamically change which numerical attribute is shown on the X and Y axes via dropdown menus, allowing for exploration of relationships between the four floral characteristics. Built with React and rendered as an SVG, the visualization uses D3's `scaleLinear` and `extent` for axis scaling and data domain calculation, with `AxisBottom`, `AxisLeft`, and `Marks` components handling the chart elements. The CSV data is loaded via D3's `csv` utility.

Select with React

This example demonstrates a simple pet-selection dropdown built with React and ReactDOM. It shows how a controlled `<select>` element updates its displayed label when a user chooses a new option from the list of six animals. The App component uses the `useState` hook to track the selected value, passing it down to a reusable Dropdown component that maps over the options array. The dropdown’s `onChange` event triggers `setSelectedValue`, and the selected attribute highlights the current choice, with the initial value set to hamster.

React Starter Code

This example displays a minimal "Hello React" message in a web page. It demonstrates a basic React 18 setup by loading the core libraries from unpkg and rendering a simple functional component into the DOM. The code uses `ReactDOM.render` to mount the `App` component to a `#root` element, defining the component with inline JSX syntax. The page’s title tag and a README note referencing a smiley face suggest the example is a starting point for further development, though no additional data or visualization logic is implemented.

World Data Map

This example displays a world map using a natural Earth projection, with landmasses filled in teal, graticules as light gray grid lines, and country borders as a darker teal mesh. The visualization renders SVG paths via React components, using `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic data, `d3.geoGraticule` for the grid, and `topojson.feature` and `topojson.mesh` to parse the world-atlas TopoJSON data. The map is static, loading country boundaries from the `world-atlas` package.

Timeseries Plot

This example visualizes a week of San Francisco temperature data as a scatterplot, with time on the x-axis and temperature on the y-axis. Each data point is rendered as a circle, and hovering over a circle displays a tooltip with the corresponding day of the week. The code uses `scaleTime` and `scaleLinear` from D3 v5 to map data to pixel coordinates, while React handles the SVG rendering. The data is loaded as CSV via `d3.csv` and transformed with date parsing and numeric conversion. Axis components are custom-built using React, and the overall layout leverages D3’s `extent` and `nice` functions for domain adjustments.

Stylized Scatter Plot

A stylized scatter plot presents the Iris flower dataset, mapping sepal length against sepal width as circular marks. D3 v5 utilities compute linear scales and axis ticks, while React components render the SVG elements, including axes and labeled circles. The visualization employs a Poppins font and a minimal color scheme, with tooltips offering formatted values on hover. Data loads asynchronously via D3's CSV parser, and the axes use custom tick formatting to display abbreviated values.

Stylized Bar Chart

A stylized horizontal bar chart displays the top 10 most populous countries in 2020 using data from a UN population CSV file. The chart uses a teal color scheme and the Poppins font for a modern aesthetic. Built with React for component structure, it leverages D3 v5 utilities like `scaleBand`, `scaleLinear`, and `csv` for data loading and scaling. SVG rectangles render each bar, with axes, tick marks, and labels generated by custom React components, all styled via CSS.

Refactored Bar Chart

This example displays a bar chart of the top 10 countries by population from UN Population 2019 data, using React components for the axis and marks. The SVG rendering uses D3 v5’s `scaleBand` and `scaleLinear` for positioning and sizing, with `useData` fetching the CSV via `d3.csv`. Each bar shows the population value with a bottom axis and labeled left axis, demonstrating a modular refactoring of D3 within a React framework.

Axis With React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, using React to render SVG elements and D3 to load and scale the data. The chart displays country names on the y-axis and population values on the x-axis, with tick marks and labels generated via `xScale.ticks()` and `scaleBand` for the y-axis. The code utilizes `d3.csv`, `scaleLinear`, and `scaleBand` from D3 v5, while React hooks manage the asynchronous data loading and component state. Data comes from a CSV file fetched from a GitHub gist.

The Margin Convention

This example displays a bar chart of the top ten countries by 2020 population, using a horizontal layout where each bar’s length is proportional to the population value. The visualization is built with React, using D3 utilities for data loading and scaling: `d3.csv` fetches the UN Population dataset, while `d3.scaleBand` and `d3.scaleLinear` map countries and populations to SVG rectangles. The SVG output is rendered inside a React component, with margins applied via a translation transform.

Bar Chart With D3

This example shows a horizontal bar chart of the top ten most populous countries in 2020, using UN population data loaded from a CSV file. React state manages the fetched data, while D3’s `scaleBand` and `scaleLinear` map country names and population values to SVG rectangles. The bars render from left to right, with no axes or labels. The code uses `d3.csv` for data loading and React functional components with the `useState` and `useEffect` hooks to trigger and store the asynchronous data fetch.

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial burst of pie slices, with each slice filled by its corresponding hex value. It uses React to manage state and render the SVG, while D3 utilities load the CSV data from a GitHub gist and compute the pie chart geometry. The code employs `d3.csv`, `d3.arc`, and `d3.pie` to fetch and transform the data, and React’s `useEffect` and `useState` handle the asynchronous loading and rendering. The colorful result provides a comprehensive, at-a-glance overview of the color palette.

Fork of Vega-Lite API Template

This visualization displays a scatterplot of automobile data, plotting engine displacement against horsepower for individual car models. Each point is rendered with low opacity to reveal density patterns, and hovering reveals the car’s name via tooltip. Built with the Vega-Lite API, it uses `vl.markPoint()` and `vl.encode()` to define the chart, with data loaded asynchronously via `d3.csv()` from a GitHub-hosted dataset. The code integrates Vega, Vega-Lite, and Vega-Tooltip, customizing axis styling through the `config` object.

Loading Data in React & D3

This example demonstrates how to load and summarize a CSV dataset within a React component, displaying the file size, row count, and column count as text. The application fetches data from a remote CSV file containing CSS named colors using D3’s `csv` function, then processes the result with a custom `message` helper. The rendering relies on React’s `useState` and `useEffect` hooks to manage the asynchronous data loading, while the output is presented as an HTML `<pre>` element. The visual result is purely textual, with no graphical chart or SVG rendering.

Mouse Follower

A React-based smiley face follows the mouse cursor across an SVG canvas. The example demonstrates interactive state management with React's `useState` and `useCallback` hooks, responding to `onMouseMove` events to update circle coordinates. The rendering uses SVG elements composed with ReactDOM, creating a minimal interactive visualization where a single circle tracks pointer movement within a 960x500 viewport.

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying file size, row count, and column count for the CSS Named Colors dataset. It uses d3.csv to fetch and parse the remote CSV file, then computes the formatted data size with d3.csvFormat. The interface is a simple HTML page with a large preformatted text area, updated dynamically via JavaScript promises. The code also includes commented alternatives using fetch with async/await and d3.csvParse, illustrating different approaches to asynchronous data loading in D3 v5.

Fork of Smiley Face Part VI

The example renders a grid of eighteen smiley faces, each generated as a React component composed from separate ES6 module files. It demonstrates modular component structure, including React Fragments for grouping elements without extra DOM nodes. Faces are drawn as SVG using D3’s `arc` generator for the mouth, with randomly varied eye radii for each face. The layout is produced by iterating over a range of six by three items, translating each face into a centered group within an SVG container.

Fork of Smiley Face Part IV

A yellow smiley face with black-outlined circular eyes and a curved mouth is rendered on a transparent background. The SVG drawing is centered using a React `<g>` transform, with components for the background circle, eyes, and mouth. The mouth is generated using D3’s `arc` API, which creates a path based on inner and outer radii and angle ranges. The React code uses ReactDOM to render the SVG composition.

Fork of Smiley Face Part III

A smiling face drawn with SVG fills the browser viewport, centered and scaled to the window’s dimensions. React manages the component tree, while D3’s `arc()` generator creates the mouth path with specified inner and outer radii and angled start and end points. Static circles define the eyes, and a yellow outer circle with a thick black stroke forms the head. The code imports React, ReactDOM, and D3’s `arc` function, then renders everything inside a single `<svg>` element.

Fork of Let's Make a Face Part II

This example shows a yellow smiley face constructed from three circles—a large face outline and two smaller eyes—rendered as SVG. The code uses React components to declaratively define the circles, with ReactDOM rendering the `<svg>` element into the page. Explicit JavaScript variables (like `centerX`, `centerY`, and `eyeOffsetX`) control the circle positions and dimensions, while static values for radius and stroke width are passed directly as JSX attributes. The face is centered in a 960-by-500 viewport, and the styling is applied with SVG’s `fill` and `stroke` properties.

Fork of Hello HTML

A single yellow circle with a black outline is centered on a plain white SVG canvas. The example demonstrates the minimal setup for an SVG-based visualization using only vanilla HTML and SVG elements, with no external JavaScript libraries. The circle is defined with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes inside an `<svg>` tag sized 960 by 500 pixels. The page’s body margin is removed and overflow hidden to present the graphic without scrollbars.