Zoe Ferencova

@zoeferencova·34 public vizzes

Coronavirus Basic Line Chart

This example displays the total number of global COVID-19 deaths as of the most recent date in the John Hopkins University time-series dataset. It fetches the CSV data from GitHub, sums the latest column values across all countries, and formats the result with commas using `d3.format`. The code uses `d3.csv` for data loading and `d3.format` for number formatting. A plain HTML page presents the message in a large `<pre>` element.

Mar 11, 2023

Loading thumbnail…

Coronavirus Firefly

A dark map rendered with the OpenLayers library and React shows the global spread of confirmed COVID-19 cases as of March 5, 2020. Each case location appears as a glowing, firefly-like sprite generated with Canvas and a radial gradient, styled with d3’s cubehelix color space. The basemap is inverted and dimmed to emphasize the points. Data is loaded from a Johns Hopkins CSSE CSV via d3.csv, and each point is rendered at uniform size and intensity regardless of case count.

Mar 11, 2023

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence among adults aged 15–49 for the year 2019, using a sequential color scale with the interpolateGnBu scheme to represent varying levels of infection rates. The map projects country boundaries with d3.geoPath and a natural Earth projection, while filtering data to the selected year. Countries without matching data appear in a light gray fill. The visualization is built with React and D3 v7, pulling geographic features from the World Atlas TopoJSON and prevalence data from a CSV dataset.

Mar 11, 2023

Loading thumbnail…

Missing Migrants (Log Scale)

The visualization displays the total dead and missing migrants over time on a logarithmic y-axis, with each circle representing a report date. Time runs along the x-axis via d3.scaleTime, while d3.scaleLog compresses the wide range of person counts. React components render SVG circles wrapped in d3.v7 scales, with axis components formatting ticks and a tooltip showing the full date. Data comes from a CSV file loaded asynchronously via d3.csv in a custom useData hook.

Mar 11, 2023

Loading thumbnail…

Missing Migrants Final Project

This visualization tracks the global count of missing and dead migrants over time, combining a world map with a timeline histogram. The map uses proportional circles to show the number of reported individuals at each location, while the histogram displays the same data aggregated by month. A brushable time range filters the map, updating the displayed circles dynamically. The project is built with React and D3 v7, using `geoNaturalEarth1` for map projection, `bin` and `timeMonths` for temporal aggregation, and `brushX` for interactive selection.

Mar 11, 2023

Loading thumbnail…

Missing Migrants (Map)

This map visualizes missing migrant incidents worldwide, with semi-transparent red circles scaled by the reported person count at each location. Using D3 v7 with React, it renders a Natural Earth projection via `geoNaturalEarth1` and `geoPath`, drawing landmasses, graticules, and country interiors from a TopoJSON world atlas. Circle radii are determined by a square-root scale (`scaleSqrt`) applied to the `person_count` field from a CSV dataset. The map is rendered entirely as SVG, layering proportional symbols over geographic features to highlight regional patterns in migrant deaths and disappearances.

Mar 10, 2023

Loading thumbnail…

Missing Migrants Histogram (Binned Data)

This histogram displays the number of missing migrants over time, using binned monthly data to reveal temporal patterns. The visualization uses d3.bin with d3.timeMonths thresholds to group raw records, then aggregates the person_count values with d3.sum. React renders SVG rectangles via d3.scaleTime and d3.scaleLinear, with custom axis components. The data comes from a CSV file on missing migrants, loaded using d3.csv, and the chart includes interactive tooltips via SVG title elements.

Mar 10, 2023

Loading thumbnail…

Points on a Map

A world map displays cities as semitransparent red circles, with area proportional to population using a square-root scale. The map uses a natural Earth projection with graticules, landmasses, and interiors rendered as SVG paths via `d3.geoPath`. The React application loads world atlas TopoJSON and city data from CSV, using `d3.csv` and `topojson.feature`/`topojson.mesh`. Sizes are computed with `d3.scaleSqrt` powered by the population field, with a maximum radius of 15 pixels.

Mar 9, 2023

Loading thumbnail…

Scatterplot with Interactive Color Legend

This scatterplot displays the Iris flower dataset, plotting sepal and petal measurements and coloring points by species. Interactive dropdowns let viewers change which measurement is mapped to the x- and y-axes. The color legend responds to mouse hover, fading non-hovered species to 30% opacity while highlighting the selected group. Built with React and D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` for categories, and SVG circles for rendering.

Mar 9, 2023

Loading thumbnail…

Scatterplot with Color

This interactive scatterplot visualizes the Iris dataset, depicting each flower as a circle colored by species. Users can change the X and Y axes via dropdown menus to compare different sepal and petal measurements across the three species. Built with React and D3.v7, it uses `scaleLinear` and `scaleOrdinal` to map data to positions and colors within an SVG, rendering axes, a color legend, and data points as `circle` elements.

Mar 9, 2023

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus control which numeric attributes are plotted on the x and y axes. The visualization is built with React and D3 v7, using SVG for rendering. Scales are created with `scaleLinear` and formatted with `format`, while the `Marks` component draws circles with tooltips.

Mar 9, 2023

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, with axes and labels updating dynamically. Built with React and D3 v7, the visualization uses `scaleLinear` for coordinate mapping and renders data points as SVG circles. The data is loaded via D3's `csv` parser, and reusable axis and mark components keep the code modular.

Mar 9, 2023

Loading thumbnail…

Menus with React

A React example demonstrates a dropdown menu for selecting a pet, with the chosen value displayed as the selected option. The code imports React and ReactDOM, using the `useState` hook to manage the selected value and a reusable `Dropdown` component that renders a `<select>` element. The options array provides five pet choices, and the `onSelectedValueChange` callback updates the state via `setSelectedValue`. The interface renders in the browser with custom CSS styling for the label and select elements.

Mar 9, 2023

Loading thumbnail…

React Starter Code

This example shows a minimal React application that renders the text “Hello React” on a blank page. It demonstrates the basic setup for using React within an Observable-style notebook, including loading React and ReactDOM from CDN and mounting a functional component into the root DOM element. The code uses `ReactDOM.render` with a JSX component, and includes a simple CSS rule that changes the body text color to red. The visualization is a literal starting point, half way towards a smiley face, and serves as a template for building interactive charts with React.

Mar 9, 2023

Loading thumbnail…

Making a World Map

This example shows how to construct a world map from GeoJSON and TopoJSON data using D3’s geographic projections. The visualization renders landmasses as filled green paths, with a blue sphere backdrop, graticule grid lines, and country borders outlined in light strokes. The code fetches country boundaries from the world-atlas dataset, converts TopoJSON features with `topojson.feature` and `topojson.mesh`, then projects them using `d3.geoNaturalEarth1` and `d3.geoPath`. React manages the component state and SVG rendering.

Mar 9, 2023

Loading thumbnail…

Making a Line Chart

A smooth, natural line chart depicts temperature readings over a week, with time on the x-axis and temperature on the y-axis. The visualization uses React components to render SVG graphics, leveraging D3 v7 functions like `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` for data scaling and axis ticks. The natural curve, created with D3’s `line().curve(curveNatural)`, connects data points from a CSV source, while custom `AxisBottom` and `AxisLeft` components structure the chart with labeled ticks.

Mar 8, 2023

Loading thumbnail…

Making a Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. The visualization includes labeled axes, tick marks, and circular marks with hover tooltips. Built with React and D3 v7, it uses `scaleLinear` and `extent` for scaling, and custom components for axes and marks that render SVG elements. Data is loaded asynchronously via `d3.csv` and parsed into numeric values.

Mar 8, 2023

Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays the population of countries in 2020, rendered as an SVG within a React application using D3 v7. Each bar’s length encodes population values, with a custom tooltip on hover and formatted axis labels converting large numbers to billions. The visualization leverages D3’s scale functions for linear and band scales, and pulls its data from a CSV file containing UN population estimates.

Mar 8, 2023

Loading thumbnail…

D3 Bar Chart (Refactoring React)

This visualization presents a horizontal bar chart of the ten most populous countries in 2020, using data from the UN Population dataset. It showcases a refactoring pattern where D3’s scale functions and tick generation are used within React components to render SVG elements. The code demonstrates using `d3.scaleBand` and `d3.scaleLinear` for axes and bar positioning, while custom React components like `AxisBottom`, `AxisLeft`, and `Marks` encapsulate SVG line, text, and rect elements. The rendering is pure SVG, dynamically generated from a CSV file via `d3.csv`.

Mar 8, 2023

Loading thumbnail…

D3 Bar Chart with Axes

This example shows a horizontal bar chart of the top 10 countries by projected 2020 population, with country names on the y-axis and population counts on the x-axis. The chart uses React to manage state and the D3 v7 library’s `csv` loader to fetch United Nations population data from a GitHub gist. Scales are created with `scaleBand` and `scaleLinear`, while axes are drawn manually using SVG `<line>` and `<text>` elements, with gridlines derived from `xScale.ticks()`.

Mar 8, 2023

Loading thumbnail…

D3 Bar Chart with Margins

This example shows a horizontal bar chart displaying the top 10 countries by 2020 population, loaded from a CSV file of UN population data. The visualization uses a React component with `useState` and `useEffect` to fetch data via `d3.csv`, then renders bars as SVG `<rect>` elements. Scales from `d3.scaleBand` and `d3.scaleLinear` map country names and population values to pixel positions within a defined margin area, achieved by translating a `<g>` group element. The chart updates asynchronously, showing a loading message until data arrives.

Mar 8, 2023

Loading thumbnail…

Making a Bar Chart with React & D3

This example demonstrates how to build a bar chart by combining React's component model with D3's scaling and data processing utilities. The chart displays the top 10 most populous countries for 2020, sourced from a CSV file of UN population data, with each bar's height determined by the country's population value. The code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and React's `useState` and `useEffect` hooks to asynchronously load and process the data. The visualization is rendered as an SVG with simple `rect` elements.

Mar 8, 2023

Loading thumbnail…

Visualizing Data with React & D3

This example visualizes the named CSS colors as a donut chart, with each slice colored by its corresponding hex value, rendering the full color palette in a circular layout. The visualization uses D3’s `arc` and `pie` generators to compute the slice geometry, while React manages the component state and renders the SVG paths. Data loads asynchronously from a CSV file of CSS color names via D3’s `csv` function, and the chart updates once the data arrives, showing a loading message before that.

Mar 6, 2023

Loading thumbnail…

Rendering Data with React & D3

A React component fetches the CSS named colors dataset via D3’s `csv` function, then renders each color as a thin horizontal div strip. The app uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading, displaying a loading message until the CSV arrives. The resulting stacked colored lines form a full-width gradient bar chart, highlighting how React manages DOM updates while D3 handles data parsing from the external gist URL.

Mar 6, 2023

Loading thumbnail…

Loading Data with React & D3

A React and D3 example demonstrates loading a CSV dataset from a GitHub gist using D3's `csv` function, with React's `useState` and `useEffect` hooks managing the asynchronous data fetch. The app displays a text summary—row count, column count, and file size in kilobytes—calculated via D3's `csvFormat`. A loading message appears until the data arrives, and the final output is rendered inside a `<pre>` element. The example uses React 18, D3 v7, and the production UMD builds of both libraries.

Mar 6, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in D3.js, displaying the dataset’s size in rows, columns, and kilobytes on a webpage. It fetches a remote CSV file containing CSS named colors using d3.csv, then formats the parsed data with d3.csvFormat to calculate its size. The code also includes an alternative commented approach using fetch, async/await, and d3.csvParse for explicit text handling. The output is rendered as plain text inside a pre element, styled with large font size for readability.

Mar 6, 2023

Loading thumbnail…

Interaction with React (Mouse Follower)

A circle follows the mouse cursor across an SVG canvas, updating its position in real time in response to pointer movement. The React state hook `useState` stores the current mouse coordinates, while the `onMouseMove` event handler updates that state through `setMousePosition`. The `useCallback` hook optimizes the event handler, and ReactDOM renders the component to the page. This example demonstrates how React manages interactive SVG rendering without any external data source or D3 dependency.

Mar 6, 2023

Loading thumbnail…

Smiley Complexity

A grid of 18 randomly generated smiley faces demonstrates how small variations in component parameters create visual complexity. Written in React with D3 v7, the visualization uses a `d3.range` and `Math.random` to assign each face different stroke widths, eye offsets, eye radii, mouth radii, and mouth widths. The `d3.arc` API generates the mouth path, while modular React components (`Face`, `Eye`, `Mouth`, `FaceContainer`) compose the SVG rendering. The faces are drawn via SVG circles and paths, showcasing reusable component-based data visualization.

Mar 6, 2023

Loading thumbnail…

Smiley Compartmentalizing Complexity

This example shows a classic smiley face composed of separate React components—Face, Eye, and Mouth—each representing a distinct visual part. It demonstrates how to compartmentalize complexity by breaking a simple figure into reusable functional components that receive numeric props for positioning and sizing. The rendering uses React to create SVG elements, with the Mouth component leveraging the d3 `arc()` API to generate its curved path. The entire face is centered within an 960×500 SVG viewport, using a yellow circle for the face and black strokes for clarity.

Mar 6, 2023

Loading thumbnail…

Smiley React Components & ES6

This example shows a modular smiley face built entirely from reusable React components, with separate Eye, Face, and Mouth elements composed into an SVG scene. It demonstrates how D3’s `arc()` generator creates the mouth’s curved path, while React’s props pass geometric values like eye offsets, radius, and stroke width. The code relies on React 18 and ReactDOM for rendering, D3 v7 for the arc, and SVG for all visual output. The face is centered at the viewport midpoint, with the mouth angle fixed between 120 and 240 degrees.

Mar 6, 2023

Loading thumbnail…

Smiley Beginner D3

This example displays a simple smiley face composed of SVG shapes: a yellow circle for the head, two small circles for eyes, and a curved arc for the mouth. Built with React and D3 v7, it uses the `arc()` generator to define the mouth’s path with specified inner and outer radii and angles. The head and eyes are drawn with React’s `<circle>` elements, while coordinates are calculated relative to the center of the 960×500 viewport. Rendering occurs via ReactDOM, with D3 loaded alongside React.

Mar 6, 2023

Loading thumbnail…

Smiley Beginner React

This example renders a simple smiley face as a static SVG graphic using React. Two yellow circles form the head and the eyes, all positioned with hardcoded constants for width, height, and offsets. The component structure uses React’s `App` function and `ReactDOM.render` to mount the SVG into the DOM. No interactivity or animation is present, and the rendering relies entirely on React 18 and SVG circle elements.

Mar 6, 2023

Loading thumbnail…

Smiley Pure HTML

A yellow smiley face rendered as a pure HTML/SVG graphic, with a black outline and two black eyes, sits centered on a blank white canvas sized at 960 by 500 pixels. The example demonstrates minimal inline SVG usage via native `<circle>` elements, requiring no external libraries or JavaScript. All styling, including the yellow fill, black stroke, and stroke width, is defined directly through SVG attributes in the source code, with the page’s body margins zeroed and overflow hidden to ensure a clean full-screen display.

Mar 6, 2023

Loading thumbnail…

Fork of D3 Starter

This example shows a bar chart ranking Nobel Prize counts by country, using a static dataset of ten nations with the United States leading at 336 prizes. The visualization is rendered as SVG via D3 v7, with `d3.scaleBand` positioning bars along the x-axis and `d3.scaleLinear` mapping values to heights on the y-axis. Axis generation relies on `d3.axisBottom` and `d3.axisLeft`. The code demonstrates a data join with `.join()` to create rectangles, and includes a filter for zero values, though no interactive behavior beyond the initial rendering is implemented.

Jan 12, 2023