Skip to main content
Log in
B

beauMarko

@beauMarko·156 public vizzes

Loading thumbnail…

Rendering data with React

This example showcases a full-width horizontal strip chart of CSS named colors, where each color is represented by a single div element whose background color is set from its corresponding RGB hex value in the data. The data is loaded asynchronously using `d3.csv` from a GitHub gist, and React’s `useState` and `useEffect` hooks manage the loading state and data fetching. React renders the rows sequentially, creating a continuous color spectrum across the viewport. This demonstrates how React can directly render data-driven components without using D3’s DOM manipulation, relying instead on plain inline styles for visualization.

Oct 17, 2021
Loading thumbnail…

Loading and Parsing Data With d3.js

This example demonstrates how d3.csv loads and parses remote CSV data, displaying basic dataset statistics in a large preformatted text element. It fetches a CSV file of CSS named colors from a GitHub gist, then uses d3.csvFormat to calculate file size in kilobytes, along with row and column counts derived from the parsed array and its columns property. The visualization itself is purely textual, relying on the d3.csv promise-based API with a .then callback. Alternative fetch and async/await approaches with d3.csvParse remain commented out in the source.

Oct 13, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the basic workflow of loading and parsing CSV data with D3.js v7. It fetches a remote CSV file containing CSS named colors from a GitHub gist and displays key statistics about the dataset, including its size in kilobytes, row count, and column count. The code uses the Fetch API to retrieve the raw text, then applies `d3.csvParse` to convert it into an array of objects, while also showing `d3.csv` for direct asynchronous loading. The parsed results are logged to the browser console and summarized in a large text display.

Oct 13, 2021
Loading thumbnail…

FMouse follower

A single gray circle tracks the user's mouse in real time, filling the browser window with an interactive SVG canvas. The React application uses the `useState` and `useCallback` hooks to manage and update the mouse's screen coordinates on every `mousemove` event, rendering the circle's `cx` and `cy` attributes accordingly. Built with React 16.9 and ReactDOM, the example demonstrates a minimal state-driven visualization loop without any external data source.

Oct 12, 2021
Loading thumbnail…

Smiley Face Part 1

The visualization shows a grid of 18 randomly generated smiley faces, each drawn with a yellow circular background, two eyes, and a mouth using an SVG arc. Faces vary slightly in eye offset and radius due to `Math.random()` values applied per face, while the mouth is rendered with a fixed radius and width. Built with React and D3 v7, the code uses the `arc()` generator from d3-shape to create the mouth path, and reusable React components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` to compose each face within an SVG group translated to the center.

Oct 7, 2021
Loading thumbnail…

Tweaked Smiley Face

A tweaked smiley face is rendered as a yellow circle with black outline, blue eyes, and a curved mouth, all rotated 30 degrees. The face is centered within the SVG canvas, with the mouth drawn as an arc path using d3.arc. The React component composes SVG circles and a path, positioning them via a translate transform. D3 v7 generates the mouth geometry, while React manages the DOM elements.

Oct 5, 2021
Loading thumbnail…

Fork of Actions per month

This visualization shows the proportion of Covid versus non-Covid blood donations in Serbia across each month of 2020, using stacked area forms to compare the two categories. The chart renders as an SVG within a React application, using D3 v6 methods such as `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color encoding, while the `area` generator in d3.area draws the layered curves. The csv data is loaded via the d3.csv function, and the lower layer is visually de-emphasized with reduced opacity to highlight the selected Covid category.

Mar 19, 2021
Loading thumbnail…

Actions per month

This chart visualizes monthly donation totals in Serbia during 2020, splitting contributions into Covid-related and non-Covid categories. Each month shows two filled areas, colored red and yellow, with percentage labels above them to indicate the proportion of each type. The visualization uses React components to render an SVG, with d3.scaleTime and d3.scaleLinear mapping data to axes, and d3.area creating the stacked areas from CSV data grouped by donation type.

Mar 19, 2021
Loading thumbnail…

Monthly publications

The visualization displays monthly publications as horizontal bars split by category, comparing COVID-19-related output against other publications across months. It uses React with D3 v6 scales (scaleBand, scaleLinear, scaleOrdinal) to render SVG rectangles with tooltips and text labels. Data is loaded via d3.csv from a GitHub gist, with each month showing paired bars in red and orange. A color legend identifies the two categories, and axes are constructed using custom React components with D3 tick generation.

Mar 19, 2021
Loading thumbnail…

GDP Balkan

This chart displays the GDP of Serbia, Slovenia, Croatia, and Romania from 1995 to 2019, using overlapping thick lines to trace each country’s economic trajectory over time. The visualization relies on React for structure and D3 v6’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map years, GDP values, and country colors onto an SVG canvas. Data is loaded from a CSV file via D3’s `csv` function, with axes rendered as custom components and line paths generated using D3’s `line` generator.

Mar 19, 2021
Loading thumbnail…

J.I. Bar chart (with menu)

This example shows a bar chart comparing COVID-19 and other donation data across donor types, with each category split into two rows for actions and amounts. An interactive menu lets viewers switch between total, COVID-only, and other-only views, updating the bar lengths dynamically. Built with React and D3 v6, it uses `scaleBand` and `scaleLinear` for positioning, SVG patterns and masks for striped bars, and `csv` to load data from a GitHub gist.

Mar 18, 2021
Loading thumbnail…

Types of donors - tweak

This interactive bar chart shows the distribution of donor types across three categories: Total, Covid, and Other, allowing viewers to switch between these metrics. The visualization uses React and D3 version 6, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering horizontal bars as SVG `<rect>` elements. Donor type labels and values appear directly on each bar, with tooltips providing exact formatted numbers via the `format` function. The data is loaded from a remote CSV file using D3's `csv` parser, and the interactive menu lets users change the displayed attribute by clicking on text elements.

Mar 17, 2021
Loading thumbnail…

Bar chart from Jelena's imagination

This bar chart compares COVID-19-related versus other donor actions and amounts across different donor types. The visualization uses horizontal grouped bars, with one row for actions and another for amounts, displaying percentage values and using striped patterns to distinguish categories. Data is loaded from a remote CSV file using `d3.csv`. The chart is built with React and rendered as an SVG, employing `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.scaleOrdinal` for the color legend. Tooltips reveal exact percentages, while a color legend clarifies the COVID-19 and other categories.

Mar 17, 2021
Loading thumbnail…

Fork of More Basketball Shot Charts

This interactive visualization displays LeBron James’s shot chart overlaid on a basketball court, with green and red circles marking made and missed shots. The court is drawn as SVG elements using React components. Shot data is loaded from a CSV via `d3.csv`, scaled with `d3.scaleLinear`, and rendered as circles using the `Marks` component. The court geometry uses `d3.lineRadial` for arcs, while player data comes from the `nba_api` dataset.

Mar 16, 2021
Loading thumbnail…

Types of donnors

This interactive bar chart visualizes donor types, comparing the total number of donations with those attributed to Covid and other causes. Three text labels at the bottom of the chart act as a menu, allowing the user to switch the quantitative axis between these three categories. The visualization is built with React and D3 v6, using `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the quantitative axis, and SVG rectangles. The data is loaded from a CSV file and formatted with `d3.format`.

Mar 15, 2021
Loading thumbnail…

Fork of Pie chart for report

This interactive donut chart displays the proportional sizes of five oblasts, with a legend showing each region’s percentage value. A menu allows the user to switch between plotting population, total, COVID, or other data categories, which updates the arc sizes and legend percentages accordingly. The visualization is built with React, rendering SVG paths generated by d3.pie and d3.arc, while d3.scaleOrdinal maps region names to colors. An unused helper embeds d3.interpolateRgb for a color gradient, and the menu responds to click events.

Mar 15, 2021
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This visualization animates a sunrise and sunset over a layered mountain landscape using only SVG elements and SMIL animations. A sky gradient transitions from aliceblue to indigo as a sun circle moves downward and back, while two terrain paths with linear gradients shift color to simulate changing light. The scene uses inline `<animate>` tags within SVG `radialGradient` and `linearGradient` definitions to cycle colors and the sun’s `cy` position over 15-second loops. No JavaScript or D3 is involved; rendering relies entirely on native SVG markup.

Mar 15, 2021
Loading thumbnail…

Scatter Plot with Color Legend

A scatter plot displays iris flower measurements, plotting petal length on the x-axis and sepal width on the y-axis, with each species assigned a distinct color from a categorical scale. The visualization uses React to render SVG elements, with D3 utilities like `scaleLinear` for positioning axes, `scaleOrdinal` for color mapping, and `csv` for loading the dataset. Hovering changes point color, and a color legend identifies species.

Mar 11, 2021
Loading thumbnail…

Pie chart for report

This example presents a pie chart that visualizes population data for three continents (Africa, Europe, and Australia), with each slice labeled by continent name. The chart is built using React components and D3.js v6, specifically leveraging `d3.pie()` to compute slice angles, `d3.arc()` to generate SVG paths, and `d3.interpolateRgb()` to apply a color gradient from deep red to light orange. The SVG rendering includes slices with calculated centroids using `arc.centroid()` for text positioning, while the unused `Check` component demonstrates a separate color-scale experiment.

Mar 5, 2021
Loading thumbnail…

Pie chart in React & D3 - 1st attempt

This example shows a donut-style pie chart built as a React component, with four slices colored along a gradient from orange to deep pink using `d3.interpolateRgb`. It relies on `d3.pie()` to compute the slice angles and `d3.arc()` with both inner and outer radii to generate SVG `<path>` elements. The chart is rendered inside a `<g>` group translated to the center of an SVG canvas, with a commented-out companion component that would draw color swatches via `d3.interpolateRgb` for testing.

Mar 5, 2021
Loading thumbnail…

Donnors Pie Chart - React & D3.js

This example shows an interactive pie chart for donor contributions, with a table below that lets users choose which data attribute to visualize—overall proportions, COVID-19–related funding, or other purposes—by hovering over column headers. The chart recomputes the pie slices based on the selected attribute, which is passed up from the table via a state setter in React. The visualization uses D3’s `pie` and `arc` generators to compute the slice geometry and `interpolateRgb` to assign a color scale, while React renders the SVG elements and manages the dynamic state.

Mar 3, 2021
Loading thumbnail…

Fork of Darodavci + legenda

A horizontal bar chart compares two percentages per donor type: the share of donation actions (red bars) and the share of donated amounts (orange bars). Both metrics appear side-by-side for each category, with a small legend identifying the color encoding. Built with React and D3 v6, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the x-axis, and `scaleOrdinal` for the legend. Data is loaded from a CSV via `csv()`, with hover tooltips showing the exact percentage values.

Mar 1, 2021
Loading thumbnail…

Darodavci + legenda

Two horizontal bar charts compare the percentage of philanthropic actions versus donated amounts across six donor types, from mass individual donors to private foundations. The red and orange bars are paired for each category, with a legend indicating which color represents each metric. The visualization uses React and D3 v6, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering to SVG. The underlying data comes from `data.csv`, and tooltips display exact percentage values when hovering over each bar.

Mar 1, 2021
Loading thumbnail…

Stylized Bar chart

This stylized bar chart displays the top 10 countries by population in 2020, using horizontal bars with a teal fill and a clean, minimal aesthetic. The React-based visualization loads CSV data via the `d3.csv` utility, while `scaleLinear` and `scaleBand` map population values to bar widths and country names to vertical positions. Custom SVG axis components render tick marks and labels, with the chart styled using the Poppins font from Google Fonts and React’s `useState` managing the asynchronous data loading process.

Mar 1, 2021
Loading thumbnail…

Fork of Rendering data with React

A pie chart displays CSS named colors as individual slices, with each slice filled using the color’s hex value from a CSV dataset loaded via `d3.csv`. The React component uses `useState` and `useEffect` to fetch and store the data, while `d3.pie` and `d3.arc` compute the arc paths rendered as SVG `<path>` elements. A loading fallback shows text until the data arrives, and the chart is centered within a fixed 960 by 500 viewport.

Feb 26, 2021
Loading thumbnail…

Rendering data with React

This example displays a vertical stack of colored stripes, one for each named CSS color, loaded from a remote CSV file using `d3.csv`. The React component uses `useState` and `useEffect` to fetch the data asynchronously and render each row as a `<div>` with a background color set from the `RGB hex value` column. D3 v5 handles the data loading, while React manages the rendering state, showing a loading message until the data arrives. SVG elements appear only in a commented-out fallback within the HTML, not in the active visualization.

Feb 26, 2021
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This visualization demonstrates the structure of a CSV dataset containing CSS named colors. It uses D3.js version 5 to fetch and parse the remote CSV file, then displays the file size in kilobytes, the total row count, and the number of columns in the dataset. The example also includes commented-out code showing alternative approaches for loading the data using the Fetch API with async/await syntax and a nested promise structure. The final output is rendered as plain text within an HTML pre element.

Feb 26, 2021
Loading thumbnail…

Mouse follower

A circle follows the mouse cursor across a full-screen SVG canvas, updating its center position in real time as the pointer moves. Built with React and ReactDOM, the application tracks mouse coordinates through an `onMouseMove` event handler and stores them in component state via the `useState` hook. The SVG circle’s `cx` and `cy` attributes are bound to this state, causing React to re-render the shape at each new location. The canvas dimensions adapt to the browser window using `window.innerWidth` and `window.innerHeight`, with a fixed circle radius of 30 pixels.

Feb 26, 2021
Loading thumbnail…

Smiley Face Part I

Eighteen randomly generated smiley faces populate a grid, each rendered as a yellow SVG circle with black outlines, two eyes, and an arched mouth. The React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) compose the visualization, while D3’s `arc` API constructs the mouth path and the `range` function generates the face count. Randomized props for eye offset, eye radius, mouth radius, and mouth width vary each face’s expression.

Feb 26, 2021
Loading thumbnail…

Scatter plott with menus

This interactive scatter plot visualizes the classic Iris dataset, displaying the relationships between different flower measurements. Users can dynamically explore the data by selecting which attributes to plot on the X and Y axes via dropdown menus. Built with React and D3.v6, the visualization renders circles as SVG marks, with axes providing scaled references. The code leverages D3's `scaleLinear`, `extent`, and `csv` functions for data loading and scaling.

Feb 22, 2021
Loading thumbnail…

Menus with React

This example shows a React-based dropdown menu for selecting a pet from a hardcoded list of six options, with the current selection displayed via a controlled component. The `Dropdown.js` file defines a reusable `<select>` element that maps over the options array, setting each option’s `selected` attribute based on the incoming `selectedValue` prop. State is managed with React’s `useState` hook in `index.js`, where `setSelectedValue` updates the selection on every change event. The UI is rendered into the DOM using `ReactDOM.render`, with styling applied via inline CSS in `index.html`. The code relies on React 16.9 and ReactDOM, but no external data source or charting library is involved.

Feb 22, 2021
Loading thumbnail…

React Starter

A React starter example renders the text "Hello React" inside a web page using React 16.9.0 and ReactDOM. The code imports the React and ReactDOM libraries, defines a simple functional component that returns a div element with the message, and mounts it to the root HTML element via the `ReactDOM.render` method. The HTML document contains a root div and loads the React scripts from unpkg along with a bundled JavaScript file.

Feb 22, 2021
Loading thumbnail…

World map

This example displays a world map using a Natural Earth projection, showing landmasses in teal, graticules in gray, and country boundaries as lighter strokes. The visualization renders geographic data from the world-atlas TopoJSON dataset using React and D3 v6, with `d3.geoNaturalEarth1` and `d3.geoPath` projecting the features. The map fills the browser window and is drawn entirely as SVG paths, with a light gray sphere background and an italic Poppins font for the loading message.

Feb 21, 2021
Loading thumbnail…

World map

This example displays a static world map rendered with SVG, showing landmasses in teal, graticules as light gray lines, and country borders as strokes. The map uses the `geoNaturalEarth1` projection and `geoPath` from D3 v6, with land and interior boundary data derived from the world-atlas TopoJSON dataset. The visualization is built as a React component that loads the data via the `useData` hook and renders the map through the `Marks` component.

Feb 20, 2021
Loading thumbnail…

Fork of GDP Serbia

This chart visualizes the number of actions per month in Serbia, using a line and scatter plot. The data is loaded from a CSV file and rendered using React with SVG. D3’s `scaleBand` and `scaleLinear` map months and action counts to the axes, while `line()` constructs the path. Circles with tooltips show each data point, and the style is defined in external CSS.

Feb 19, 2021
Loading thumbnail…

Pie chart in React & D3 - with Legend

A React and D3 donut chart visualizes budget allocations across five categories, with a legend mapping category names to a color scale interpolated between coral and crimson. The `pie` and `arc` generators compute slice geometry, while `scaleOrdinal` assigns colors from the interpolated range. Percentages appear on slices via `arc.centroid`, and the `ColorLegend` component renders interactive-free color swatches with tick spacing. The chart uses SVG rendering with `d3.interpolateRgb` for gradient transitions and `format` for numeric labels, based on static data in the `donThemes` array.

Feb 13, 2021
Loading thumbnail…

Pie chart in React & D3 - donations data

This example shows a donut chart of donation distribution across five categories—Health, Support, Education, Poverty reduction, and Other—with each slice labeled by its percentage. The visualization is built with React functional components and D3 v6, using `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG path geometry. Slice colors derive from a categorical interpolation via `d3.interpolateRgb`, linking the data’s category order to a warm-to-cool gradient. The chart renders as SVG, with the React state and component structure managing the mapping from data to visual elements.

Feb 12, 2021
Loading thumbnail…

Učešće različitih tipova darodavaca

A horizontal diverging bar chart displays the share of actions and money from different donor types in Serbian civil society. Each donor category is represented by two bars: one red for the share of actions and one orange for the share of money. The chart uses React components with the D3 v6 library, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering as an SVG. Data is loaded from a CSV file using the `csv` function.

Feb 11, 2021
Loading thumbnail…

Bar chart

This bar chart visualizes the populations of ten countries, with horizontal bars representing each nation's population in thousands. The chart uses a linear scale for population values and a band scale for country names, with axis labels and steel-blue colored bars. Built with D3 v5, the visualization reads data from a CSV file and renders as an SVG, using D3's scaleLinear, scaleBand, axisLeft, and axisBottom functions to construct the chart.

Feb 10, 2021
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with species encoded by color. Hovering over a legend item dims all non-matching data points, highlighting the selected species. The visualization uses React for component structure, d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.csv for data loading, rendering as an SVG with mouse events triggering the filtering effect.

Feb 9, 2021
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width with each point colored by species. The visualization uses D3 v6's scaleLinear and scaleOrdinal to map quantitative and categorical data, while React components render SVG axes, circles, and a color legend. The color legend displays distinct species categories, and hovering over points reveals their petal length values. Data is loaded via d3.csv from a remote URL, and the entire chart adapts to the browser window size.

Feb 9, 2021
Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris flower dataset, mapping petal length and sepal width for three species distinguished by color. The React application uses d3.scaleLinear for x and y axes, d3.scaleOrdinal for categorical color encoding, and d3.csv for data loading. SVG circles are rendered via custom React components for axes and marks, with d3.format applied to axis tick labels and native SVG titles providing tooltips.

Feb 8, 2021
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between four measurements (sepal length, sepal width, petal length, and petal width). Two dropdown menus built with ReactDropdown let viewers select which attribute appears on each axis. The visualization uses React state management to track selections and update the scales and marks accordingly. D3 utilities such as `csv`, `scaleLinear`, `extent`, and `max` handle data loading and scaling, while custom React components render SVG axes and circles as marks.

Feb 8, 2021
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, letting users select which of five attributes (sepal length/width, petal length/width, or species) to map to the x- and y-axes via React-controlled dropdown menus. The SVG chart uses `d3.scaleLinear` for both axes and renders circles for each data point, with hover highlighting and a native `<title>` tooltip. Built with React hooks (`useState`, `useEffect`) and D3 v6 utilities (`csv`, `extent`, `max`, `format`), it updates scales on user selections.

Feb 8, 2021
Loading thumbnail…

Menus with React

This example demonstrates how to build interactive dropdown menus using React's state management, with a label and select element displaying pet options and their selected value. The code uses React hooks (`useState`), a custom `Dropdown` component, and the `ReactDOM` library for rendering. The select element updates the displayed choice when users change the selection, with the current value logged to the console.

Feb 8, 2021
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population in 2020, using horizontal bars with teal fills that turn orange on hover. Built with React and D3’s `scaleBand` and `scaleLinear`, it loads CSV data via the `csv` function from `d3-fetch`, formats axis ticks with `format('.2s')`, and renders as SVG. The chart includes labeled axes and native tooltips via the `<title>` element.

Feb 8, 2021
Loading thumbnail…

GDP Serbia

A line chart displays the annual GDP of Serbia over time, loaded from a CSV file and rendered as a smooth natural curve. The visualization uses React to build SVG elements, with Axes and Marks components, while d3.scaleTime and d3.scaleLinear handle the x- and y-axis scaling. Tooltips are included as commented-out code, and the chart applies a Poppins font with a custom color scheme for the line and axes.

Feb 5, 2021
Loading thumbnail…

Working with time

This visualization displays how temperature varies over time, plotted as a smooth line chart with time on the x-axis and temperature on the y-axis. The chart uses d3.scaleTime for the date-based x-axis and d3.scaleLinear for the temperature y-axis, with tick labels formatted to show weekdays. Data is loaded as CSV from a GitHub gist via d3.csv. The React framework with d3.v6 renders SVG elements, including axes, axis labels, and a path generated using d3.line with curveNatural.

Feb 4, 2021
Loading thumbnail…

Stylized Scatter plott

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width across all samples. Built with React and D3 v6, the visualization renders SVG circles scaled by linear scales with nice-ticked axes. The code uses d3.csv for data loading, d3.scaleLinear for positioning, and d3.extent to compute domains. Custom React components (AxisBottom, AxisLeft, Marks) handle rendering, while the Poppins font and teal circle marks create a modern aesthetic. The chart updates responsively to fill the browser window, with formatted tick labels using d3.format.

Feb 4, 2021
Loading thumbnail…

Stylized Bar chart

This stylized bar chart displays the populations of the ten most populous countries in 2020, using horizontal bars sorted by country name. The visualization encodes population values through bar width, with a linear scale mapping populations up to the maximum value and a band scale positioning each country. Built with React and D3 v6, the chart renders as SVG, using components for axes and marks. Population data comes from the UN Population 2019 CSV, with values formatted in billions and styled with the Poppins font.

Feb 4, 2021
Loading thumbnail…

Refactored Bar chart

This example shows a horizontal bar chart of the top 10 countries by population for 2020, with countries listed along the y-axis and population values along the x-axis. The visualization uses React to render SVG elements, with D3 v6 providing scales and data loading. The code imports `csv` to fetch population data from a GitHub-hosted CSV file, `scaleBand` and `scaleLinear` to map country names and population values to pixel coordinates, and `max` to determine the x-axis domain. Axis components and bar marks are defined as individual React components for modularity.

Feb 4, 2021
Loading thumbnail…

Axes With React & D3

This bar chart displays the top 10 countries by 2020 population, with horizontal bars ranked vertically. The visualization uses React for component structure and state management, while D3’s `csv` loads and parses the UN population data, and `scaleLinear` and `scaleBand` map values to pixel positions. SVG elements—including `rect` bars and axis ticks—are rendered directly by React, with D3’s `max` and `ticks` methods driving the axis generation. The chart adapts to the browser window size and includes labeled axes.

Feb 3, 2021
Loading thumbnail…

The margin convetion

This example visualizes the top 10 most populous countries in 2020 using horizontal bars. A React app loads CSV data from a GitHub gist, processes it with D3’s `csv` and `max` functions, and maps population values to a linear scale while country names are mapped to a band scale. The SVG rendering uses `rect` elements positioned within a translated group, respecting uniform margins. The chart updates as the browser window resizes, since dimensions derive from `window.innerWidth` and `window.innerHeight`.

Feb 3, 2021
Loading thumbnail…

Pathetic Bar Chart

This example presents a bar chart of the top 10 most populous countries using UN population data from 2019, loaded via d3.csv. The chart uses d3.scaleLinear for the horizontal axis and d3.scaleBand for the vertical country categories. It is rendered as an SVG with React, where each bar is a rectangle element positioned using the scales. The visualization dynamically fills the browser window based on its dimensions.

Feb 3, 2021
Loading thumbnail…

Rendering data with React & D3

A color wheel displays every named CSS color in a circular pie chart, with each slice filled by its corresponding hexadecimal value. The visualization loads color data from a CSV file via `d3.csv`, processes it using `d3.pie`, and renders it with `d3.arc` inside a React component. React state and the `useEffect` hook manage the asynchronous data fetch, while SVG paths are generated directly from the pie layout. D3 v6 handles the data transformation, and React renders the resulting SVG elements to the screen.

Feb 3, 2021
Loading thumbnail…

Fork of Loading Data with React and D3

This example demonstrates loading and displaying a dataset of named CSS colors sourced from a GitHub gist using `d3.csv`. The React app, rendered with `ReactDOM`, uses the `useState` and `useEffect` hooks to fetch the data and map each row to a horizontal `<div>` strip whose `backgroundColor` is set to the color’s RGB hex value. While loading, a large "Loading..." message appears. The visualization shows all color entries as a stacked list of thin, colored bars filling the viewport.

Feb 3, 2021
Loading thumbnail…

Loading Data with React and D3

This example demonstrates loading a CSV dataset from a remote URL inside a React component, displaying the data’s file size, row count, and column count as text. Using React hooks (`useState` and `useEffect`), it fetches the data with `d3.csv`, then formats the output with `d3.csvFormat`. The visualization renders as SVG, with the loaded information shown in a large `pre` element, while a loading message appears until the data arrives. It highlights the integration of D3’s data-loading and formatting utilities within a React lifecycle.

Feb 3, 2021
Loading thumbnail…

Mouse follower

A red circle follows the mouse cursor across a full-screen SVG canvas, with its center position updating in real time to match the pointer coordinates. The visualization uses React hooks (useState and useCallback) to manage the cursor position state and handle mouse movement events. The circle’s coordinates are bound directly to the mouse event’s clientX and clientY values, and the SVG viewport spans the entire browser window.

Feb 3, 2021
Loading thumbnail…

Fork of HTML Starter

This example showcases a minimal HTML page that fetches and summarizes a CSV dataset of CSS named colors. It reports the data's size in kilobytes, the number of rows, and the number of columns directly on the page. The visualization relies on the D3.js library, using its `d3.csv` function to load remote data and `d3.csvFormat` to calculate the file size. The output is rendered as plain text within a `<pre>` element, with styling applied through CSS.

Feb 3, 2021
Loading thumbnail…

Multiple Faces

Multiple Faces renders a grid of eighteen cartoon smiley faces, each with the same yellow circular background, black outline, and open mouth. Each face randomly varies its eye radius using `Math.random()`, creating subtle differences across the repeated components. Built with React and D3 v6, the visualization uses D3's `arc` generator to construct the mouth path and the `range` function to generate the face instances, all rendered as SVG through reusable component composition.

Feb 2, 2021
Loading thumbnail…

Smiley Face Part III

This example shows a modular, parameterized smiley face drawn with React and SVG. A yellow circle forms the head, with two black eyes and a curved mouth generated from a D3 arc path. The code builds the face from reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, composed inside a `FaceContainer` that handles the SVG viewport and coordinate translation. The `Mouth` component uses D3’s `arc` API to create a semicircular path, while the overall face dimensions and feature placements are controlled via props passed to the `Face` component.

Feb 2, 2021
Loading thumbnail…

Fork of Scatter Plot with Menus (x & y)

This interactive bar chart displays mean measurements of three iris species, with a dropdown menu to select which measurement appears on the x-axis while the y-axis shows species categories. The visualization uses D3’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with React managing state for the selected attribute. Data loads from a CSV file via d3.csv, and bars are rendered as SVG rectangles. The interface updates the x-axis label and bar widths dynamically when users change the selected measurement.

Jan 29, 2021
Loading thumbnail…

Scatter Plot with Menus (x & y)

This interactive scatter plot displays the Iris flower dataset, showing the relationship between four measured attributes (sepal length/width, petal length/width) as adjustable X and Y axes. Two dropdown menus in React let users select which attribute appears on each axis, dynamically updating the visualization. The code uses d3.csv to load data, d3.scaleLinear and d3.extent for scaling, and renders axes and circle marks as SVG elements. Hovering over a circle reveals its exact value via a native title tooltip.

Jan 29, 2021
Loading thumbnail…

Scatter Plot with Menus for X

A scatter plot displays the Iris dataset, with sepal width on the y-axis and a user-selectable attribute (sepal length, sepal width, petal length, or petal width) on the x-axis. A React dropdown menu updates the x-axis attribute, triggering a re-render of the visualization. The chart uses React state, D3 utilities such as `scaleLinear`, `extent`, and `csv` for data loading, and SVG elements for rendering circles with hover tooltips.

Jan 29, 2021
Loading thumbnail…

Scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. The React-based application loads the data using the `d3.csv` utility, then renders SVG circles positioned through `d3.scaleLinear` scales. Hovering highlights each point by changing its fill color to orange. Axes are generated with `d3.ticks` through the custom `AxisBottom` and `AxisLeft` components, while titles provide tooltips when points are selected.

Jan 29, 2021
Loading thumbnail…

Fork of React Starter

This example shows a simple pet-selection interface with a dropdown menu. Built using the React framework, the app renders a static list of six pet options—goldfish, dog, cat, hamster, parrot, and spider—with the hamster pre-selected. The code defines a reusable `Dropdown` component and manages its state with React's `useState` hook. The interface uses plain HTML `<select>` and `<option>` elements, styled with large fonts via CSS, and logs the chosen value to the browser console.

Jan 28, 2021
Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a simple text message, “Helo React,” into a web page. It uses React 16.9.0 and ReactDOM to mount a functional component into a root HTML element, with the page styled to hide margins and overflow. The code loads React and React-DOM from unpkg CDN links and serves as a basic starter template for building React-based visualizations, though no data or graphical output is present beyond the static text. The main logic in `index.js` defines an `App` component and calls `ReactDOM.render` to place it in the DOM.

Jan 28, 2021
Loading thumbnail…

Refactored Bar Chart

This bar chart displays the population of ten countries from the UN Population 2019 dataset, with country names on the y-axis and population values on the x-axis. Built with React, the visualization loads data via d3's `csv` utility and renders the bars and axes as SVG elements. The code separates components into `AxisBottom`, `AxisLeft`, and `Marks`, using d3's `scaleBand` and `scaleLinear` for positioning.

Jan 27, 2021
Loading thumbnail…

Axis With React and D3

This example shows a horizontal bar chart of the top 10 countries by population from the UN Population 2019 dataset. It uses React hooks like `useState` and `useEffect` to load and store the data, while d3’s `csv`, `scaleBand`, `scaleLinear`, and `max` utilities handle data parsing and scaling. React renders the SVG elements—including gridlines, ticks, and rectangles—by iterating over the scales, resulting in a fully React-managed visualization. The axis ticks are generated from the linear scale’s `ticks` method.

Jan 27, 2021
Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention in D3, displaying a horizontal bar chart of population data for the top 10 countries from the UN Population 2019 dataset. The visualization uses React’s useState and useEffect hooks to asynchronously load CSV data via d3.csv, then renders SVG rectangles scaled with d3.scaleBand and d3.scaleLinear. A margin object defines the inner chart area, with a translated `<g>` element positioning the bars within the SVG canvas.

Jan 27, 2021
Loading thumbnail…

Pathetic Bar Chart

This example displays a horizontal bar chart of the top 10 countries by 2020 UN population estimates. Using React with hooks, it loads CSV data via `d3.csv` and renders SVG rectangles scaled by `d3.scaleLinear` and positioned with `d3.scaleBand`. The chart updates from an initial "Loading..." state once data arrives.

Jan 27, 2021
Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention in a bar chart that displays population data for ten countries, including China and India, using horizontal bars scaled by population size. The visualization is built with React and D3 v6, using `d3.csv` to load the dataset, `scaleBand` for country positions, and `scaleLinear` for population values. The SVG rendering groups all bars inside a `<g>` element translated by the margin object, which defines consistent spacing between the chart and the viewport edges.

Jan 27, 2021
Loading thumbnail…

Making a Bar Chart with React & D3

This example shows a horizontal bar chart of country populations, with each bar’s length proportional to its population value from a local CSV file. The visualization combines React’s `useState` and `useEffect` hooks to asynchronously load data via `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` map country names and population counts to SVG rectangle positions and widths. The chart renders as an SVG using React components, with `d3.max` determining the x-axis scale domain.

Jan 27, 2021
Loading thumbnail…

Fork of Loading data with React and d3

This example shows a pie chart of CSS named colors, with each slice colored by the RGB hex value loaded from a CSV file. The visualization uses React’s `useState` and `useEffect` hooks to fetch and store the data via `d3.csv`, then computes pie arcs with `d3.arc` and renders the result as SVG paths. While the data loads, a loading message appears; afterward, the full pie chart displays. The code relies on D3 v6 for data parsing and geometry, and React 16.9 for component state and rendering.

Jan 26, 2021
Loading thumbnail…

Loading data with React and d3

This example shows loading a CSV dataset of CSS named colors and rendering each color as a horizontal bar, producing a stacked spectrum across the page. While the data is being fetched with d3.csv, the app displays a large "Loading..." message. Using React hooks (useState, useEffect, and useCallback), the component manages the asynchronous data state and updates the DOM once the CSV arrives. The bars are plain React divs with inline styles that set the background color from the CSV’s “RGB hex value” column, giving a simple visual summary of the full color list.

Jan 26, 2021
Loading thumbnail…

Load the data

This example demonstrates loading a remote CSV file of CSS named colors into a web page using d3's `csv` utility, then displaying basic statistics about the dataset. A React component manages the asynchronous data loading via `useEffect`, and once the data arrives, it renders a pre-formatted message showing the file size, row count, and column count. The visualization uses the `d3.csvFormat` function to calculate the data size in kilobytes, and the file originates from a GitHub gist. The app initially shows a "Loading..." placeholder until the fetch completes.

Jan 26, 2021
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v6. It fetches a remote CSV file containing CSS named colors from a GitHub gist and displays basic statistics about the dataset, including its approximate file size in kilobytes and the number of rows and columns. The code uses `d3.csv()` to asynchronously retrieve and parse the data, then `d3.csvFormat()` to measure the raw string length, and writes the results into a `<pre>` element. The visualization is intentionally minimal, focusing on data loading and parsing rather than graphical representation.

Jan 26, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js v6, displaying basic dataset statistics as text. It fetches a remote CSV file containing CSS named colors and calculates the file size in kilobytes, the number of data rows, and the number of columns. The code uses `d3.csv` to asynchronously retrieve and parse the data, then `d3.csvFormat` to measure its formatted string length. Results are shown in the browser console and rendered in a large `<pre>` element on the page.

Jan 26, 2021
Loading thumbnail…

Fork of Smiley Face Part II

A React application renders an SVG circle that follows the mouse cursor across a 960x500 canvas. The circle moves smoothly to the pointer's exact position using React state and event handling. The code uses React 16.9 with hooks (`useState`, `useCallback`) and manages mouse movement through the SVG `onMouseMove` event, updating the circle's `cx` and `cy` attributes. The rendering approach relies on declarative React components producing SVG elements, with no external data sources or animation libraries involved.

Jan 26, 2021
Loading thumbnail…

Mouse Follower

A single SVG circle follows the mouse cursor across a 960 by 500 viewport. The React component uses the `useState` and `useCallback` hooks to track pointer coordinates from the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes with each move. The circle renders with a fixed radius but no fill color, appearing as a black outline on a white background. D3 is loaded but not used in the rendering logic.

Jan 25, 2021
Loading thumbnail…

Lets Make a Face

A grid of randomly generated cartoon faces demonstrates how React components and D3 shape generators can be composed into reusable visualizations. Each face uses a yellow background circle, offset black eyes, and a D3 arc-based mouth with randomized dimensions for eye radius, mouth width, and mouth radius. The React `Face` component assembles smaller `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, while a `FaceContainer` renders an SVG group translated to the center coordinates. D3’s `range` and `arc` utilities generate the grid and mouth paths, respectively.

Jan 25, 2021
Loading thumbnail…

Practice

This example shows a minimal React application that renders a static title and age message. It uses React class components and functional components, with ReactDOM rendering the output into a root div. The code includes commented-out D3.js imports and references to width, height, and background variables, but the active visualization is limited to basic JSX text elements. The page loads React 17 and D3 6.3.1 from CDNs, though no D3-specific APIs are exercised in the visible code.

Jan 22, 2021
Loading thumbnail…

Mouse Follower

A React application renders an SVG circle that follows the mouse cursor across a 960×500 viewport. The circle’s position updates via React’s `useState` and `useCallback` hooks, triggered by the SVG’s `onMouseMove` event, which captures `clientX` and `clientY` coordinates. Using `ReactDOM.render`, the app displays a single black-outlined circle whose center tracks the pointer’s movement in real time.

Jan 21, 2021
Loading thumbnail…

Smiley Face Part I

Eighteen independently rendered smiley faces populate a grid, each face generated with slightly randomized feature positions and sizes. The composition uses React components to assemble reusable SVG elements, with d3.arc defining the mouth's curved path. Each face combines a yellow background circle, two eye circles, and an arc-based mouth, all transformed into place via SVG groups. The code leverages React's component model for structure and d3's arc generator for precise path creation.

Jan 20, 2021
Loading thumbnail…

Tweak Smiley Face

A tweakable smiley face is drawn with SVG, featuring a yellow head, elliptical eyes, and a curved mouth generated by d3's arc generator. The face is centered on a 960x500 canvas against a multi-color gradient background, while a vertical tricolor rectangle (blue, white, red) sits in the corner as a decorative element. The React component uses inline SVG elements like circle, ellipse, and path, with d3's arc() API to define the mouth's inner and outer radii and angle range. The code references React 17 and d3.v6, rendering through ReactDOM into the page's root div.

Jan 20, 2021
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five pieces of fruit are rendered as color-coded circles in an SVG, with apples in red and lemons in yellow. Hovering over a circle highlights it with a black outline, and moving the mouse away removes the highlight. The visualization uses D3 v5's data join with key functions to smoothly transition circles entering, exiting, and updating, animating radius and position over one second. State changes, such as eating or replacing fruit, are triggered by timed events, with selection managed through React state and callbacks.

Jan 19, 2021
Loading thumbnail…

Bowl of Fruit - Clcik to Select

This interactive example displays a bowl of fruit as colored circles that can be clicked to select. The visualization uses D3’s `scaleOrdinal` to map fruit types to colors and radii, with apples in red and lemons in yellow. State changes—removing fruit or changing an apple to a lemon—are animated over one second using D3 transitions. The React-based code employs `selectAll` to update circles and `merge` for incremental rendering, with SVG strokes indicating the selected fruit.

Jan 19, 2021
Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern

A dynamic SVG visualization demonstrates the D3 general update pattern by rendering a changing bowl of fruit. Rows of apple and lemon circles shift position as fruit are removed or transformed over time, with colors and radii mapped via ordinal scales. The code uses D3 v6 with `selection.enter()`, `selection.merge()`, and `selection.exit()` to manage data joins, updating circle and text elements in response to timed JavaScript state changes.

Jan 18, 2021
Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five circles represent apples in an SVG bowl, and a sequence of animated updates demonstrates D3's general update pattern. The visualization starts with five apples, then removes one, changes another into a lemon, and finally filters out a third fruit, using enter, merge, and exit selections. D3 v6 scales map fruit types to colors and radii, while transitions animate radius and position changes over one second. The `fruitBowl` module handles the data join with `selection.data`, `enter.append`, and `exit.remove` APIs.

Jan 18, 2021
Loading thumbnail…

Pay Gap Between Men and Women

This dumbbell chart shows the difference in average annual salary between women and men across twelve U.S. occupations, with each job’s two salary points connected by a horizontal line. The visualization uses d3.scaleLinear for the x-axis, d3.scalePoint for the y-axis categories, and d3.axisLeft/axisBottom for labeling. Data comes from a local CSV file, rendered as SVG circles and lines, with salary values formatted using d3.format. The chart excludes one occupation from the dataset.

Jan 17, 2021
Loading thumbnail…

Dumbbell Chart - Balkan GDP Evolution

This dumbbell chart compares GDP per capita for nine Balkan countries between 1952 and 2007, with each country’s paired circles connected by a line to highlight growth. The chart uses d3.csv, scaleLinear, and scalePoint to position the data, with d3.axisBottom for the currency-formatted x-axis. Data labels show exact rounded values, and the visualization relies on SVG circles, lines, and text elements, styled via CSS, sourced from Gapminder data.

Jan 17, 2021
Loading thumbnail…

Bar chart

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from World Population Prospects. The chart uses a horizontal layout with a linear scale for population values and a band scale for country names. The visualization is built with D3 v6, using `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render SVG rectangles. Each bar’s length reflects population in thousands, with steel-blue fills and labeled axes.

Jan 15, 2021
Loading thumbnail…

Area chart - Romanian GDP

This area chart shows the evolution of urban population in Romania from 1960 to 2019, based on World Bank data. The visualization uses D3 v6 to render an SVG, employing `scaleTime` and `scaleLinear` for the axes, an `area` generator to create the filled region, and `axisLeft`/`axisBottom` with gridlines. The chart features a clear title, labeled axes with formatted tick values, and an orange semi-transparent fill to highlight the population trend over time.

Jan 14, 2021
Loading thumbnail…

World population area chart

This chart shows the growth of world population from 1950 to 2015 using a smooth area chart. It uses d3.area with a curveBasis to create the filled path, while d3.scaleTime and d3.scaleLinear map years and population values. Axes are generated with d3.axisBottom and d3.axisLeft, and tick labels format large numbers with d3.format. The data is loaded from a CSV file and rendered as SVG.

Jan 14, 2021
Loading thumbnail…

Temperatures in San Francisco

This scatter plot visualizes one week of temperature data in San Francisco, with time on the x-axis and temperature in Celsius on the y-axis. Each circle represents a temperature reading, plotted using D3 v6 scales and axes. The code loads CSV data via `d3.csv`, converts timestamps and numeric values, and renders an SVG with `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. Styled gridlines, axis labels, and a title are added, with circles filled in steel blue.

Jan 14, 2021
Loading thumbnail…

Fork of Bar chart - covid19

A scatterplot displays the relationship between agricultural employment and fertility across 47 Swiss provinces, with each circle representing a province. The chart reveals a negative correlation, as fertility tends to decrease as the percentage of males in agriculture rises. Built with d3.v6, the visualization uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `csv` for data loading. The SVG rendering includes labeled axes, a title, and gridlines, with data sourced from the OPR Data Archive.

Jan 13, 2021
Loading thumbnail…

Fork of Cars Scatter plot

This scatter plot visualizes the relationship between eruption duration and waiting time for the Old Faithful geyser, with each circle representing an observation from the dataset. The code uses d3.csv to load data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render ticks. Circles are appended as SVG elements with steelblue fill and 50% opacity. The visualization includes labeled axes, a title, and grid lines, all rendered via D3 v6 in an SVG container.

Jan 13, 2021
Loading thumbnail…

Scatter plot

This scatter plot displays the populations of the world's ten most populous countries, with countries arranged along the y-axis and their population totals on the x-axis. The code uses D3 v6 APIs such as `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the SVG visualization. Data is loaded from a CSV file via `csv` and plotted as circles, with each country's population multiplied by 1000.

Jan 13, 2021
Loading thumbnail…

Fork of Bar chart - covid19

This horizontal bar chart displays the total number of Covid-19 cases in the top five U.S. states as of January 12, 2021, using data from Worldometer. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `csv` to load the data. It includes `axisLeft` and `axisBottom` for tick marks, with a title and formatted tick labels.

Jan 13, 2021
Loading thumbnail…

Customizing axes

This bar chart displays the top 10 most populous countries, sorted by population, with customized axes for readability. The horizontal axis uses a linear scale with a tick format that abbreviates large numbers (e.g., converting billions with the `format` API), while the vertical axis uses a band scale for country names. The chart is rendered in SVG using d3.v6, loading data from a CSV file, with axes styled via `axisBottom` and `axisLeft`, and grid lines drawn through negative tick sizes.

Jan 13, 2021
Loading thumbnail…

Bar chart - covid19

This bar chart displays the total number of Covid-19 cases in the top five US states as of January 12, 2021, sourced from Worldometer. The visualization uses d3.csv to load the data and d3.scaleLinear, d3.scaleBand, and d3.axisBottom/axisLeft APIs to map case counts to bar lengths and states to vertical bands. Each state’s bar is rendered as an SVG rect with a green fill, while the horizontal and vertical axes provide numerical and categorical reference points. The chart is built with D3 v6 and renders entirely as SVG elements.

Jan 12, 2021
Loading thumbnail…

Fork of Let's Make a Face - Modifications

This fork of "Let's Make a Face" animates a cartoon face with blinking eyebrows and a fixed smiling mouth, all rendered as SVG. The code uses D3 v6 selections and transitions, with `transition().duration()` to shift eyebrow rectangles up and down repeatedly. The face is composed of D3 shapes—a circle for the head, circles for eyes, rects for brows, and a path generated by the `d3.arc` API for the mouth. The entire face is centered via a group transformation, with static styling, including an orange head and black features.

Jan 11, 2021
Loading thumbnail…

Let's Make a Face

A yellow circle face with black eyes and animated eyebrows is drawn using SVG. The eyebrows move up and down through chained transitions that alternate their vertical offset. D3 v6's `select`, `arc`, and `transition` APIs construct the face, with the mouth rendered as an arc path and eye positions set via fixed coordinates.

Jan 10, 2021
Loading thumbnail…

Bar chart

This bar chart visualizes the relationship between years since earning a PhD and salary for university professors, using a circular mark per individual record. The scatterplot employs `d3.scaleLinear` for both axes with an `axisBottom` and `axisLeft` grid, while the data is loaded from a CSV file via `d3.csv`. The visualization applies `tickFormat` with `format(".2s")` for compact salary labels and includes a rotated Y-axis title.

Oct 30, 2020
Loading thumbnail…

Bar chart

This bar chart uses circles to compare the proportion of foreign-born residents across seven European countries, with Luxembourg leading at 45.9%. The visualization employs D3 v5’s `scalePoint` and `scaleLinear` to map countries and percentages, and renders axes via `axisBottom` and `axisLeft` with tick formatting as percentages. Data is loaded from a CSV file, and SVG circles are positioned using the derived scales, with a rotated y-axis label and title included.

Oct 30, 2020
Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The code loads CSV data via d3.csv, parses numeric fields, and renders circles using D3 v5's scaleLinear, axisBottom, and axisLeft within an SVG. Grid lines are generated through tickSize, while axis labels and a title are appended as SVG text elements.

Oct 29, 2020
Loading thumbnail…

Bar chart

This bar chart visualizes the proportion of foreign-born residents across seven European countries, with Luxembourg leading at 45.9% and Germany at 14.5%. The visualization uses D3 v5 to load CSV data and render an SVG bar chart with linear and band scales. Axes are customized using `axisBottom` and `axisLeft`, with the y-axis formatted as percentages and grid lines drawn via `tickSize`. The chart includes a title and a rotated y-axis label, both styled through CSS classes.

Oct 28, 2020
Loading thumbnail…

Bar chart

This bar chart displays the population of the top 10 most populous countries, with horizontal bars sorted by country name. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values and country labels. Data is loaded from a local CSV file and rendered as SVG rectangles, with axis tick labels formatted using D3’s `format` function. The chart includes a title, axis label, and gridlines via `tickSize`.

Oct 28, 2020
Loading thumbnail…

Bar chart

This bar chart displays the proportion of immigrants in seven European countries, ranked from Luxembourg at 45.9% down to Germany at 14.5%. The visualization uses d3.csv to load the data, then d3.scaleBand and d3.scaleLinear to map countries and values to SVG rectangles. Axes are generated with d3.axisBottom and d3.axisLeft, and a steelblue fill colors each bar against a computed inner height.

Oct 27, 2020
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlines displays two eyes, eyebrows, and an arc-shaped mouth on an SVG canvas. The eyebrows animate vertically, moving down and back up over a sequence of transitions. Built with D3 v5, the visualization uses `select` and `arc` from the D3 module to construct the facial features, with `transition` and `duration` controlling the eyebrow movement. The code generates the mouth using an arc generator with specified inner and outer radii and angles.

Oct 26, 2020
Loading thumbnail…

Making a bar chart

A horizontal bar chart ranks social media platforms by user count, using Font Awesome icons instead of text labels for each bar's category. The visualization loads data from a CSV file and renders SVG rectangles with D3 v5's `scaleLinear`, `scaleBand`, `csv`, `axisLeft`, and `max`. The bars are filled with a red color, while the y-axis displays the platform names. The chart includes margins and uses a linear scale for the quantitative user values, with the x-axis hidden in the final output.

Oct 21, 2020
Loading thumbnail…

Making an Interactive Pie Chart

This interactive donut chart displays income sources—Sales, Dividends, and Interest—with each slice labeled and colored via a d3.scaleOrdinal. It uses d3.pie and d3.arc to generate the SVG paths, while mouseover events calculate percentages from the CSV data and reposition a tooltip with d3.select. The chart responds to hovers by increasing slice opacity and shows precise share values, with styling in CSS.

Oct 9, 2020
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with a black outline forms a face, featuring two eyes, animated eyebrows, and a mouth drawn as an arc. The eyebrows move up and down repeatedly using D3's `transition().duration()` chaining. The face is built with a centered `<g>` group, using D3 selections in React to append `circle`, `rect`, and `path` elements to an SVG. The mouth is generated with the `d3.arc()` generator, and all positioning is based on computed height and width attributes.

Oct 8, 2020
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit rendered as SVG circles animates through a sequence of apples being eaten and one apple morphing into a lemon. Hovering over any fruit highlights it with a black stroke, using the `setSelectedFruit` callback to update the selected state. The visualization leverages D3 v5's data joins and `transition().duration(1000)` to smoothly animate circle radii and positions, with `scaleOrdinal` mapping fruit types to colors and sizes. The React-based code imports specific D3 functions like `select`, `range`, and `scaleOrdinal` to drive the interactive SVG rendering.

Oct 2, 2020
Loading thumbnail…

Bowl of Fruit - Click to Select

Five pieces of fruit sit in a row, rendered as SVG circles. Clicking any piece toggles a black selection ring around it, and the bowl animates over one second: apples shrink to nothing and disappear, a lemon grows in place, and the remaining items slide to new positions. Built with React and D3 v5, the example uses `scaleOrdinal` for color and radius mapping, and `transition().duration(1000)` to animate enter, update, and exit states.

Oct 2, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern

Apples and lemons sit in a brown bowl, demonstrating the general update pattern as fruit is added, removed, or changed over time. The React component uses a D3 selection with enter, update, and exit phases to manage SVG circles and text labels, scaling their radius and color via `scaleOrdinal`. Timed intervals trigger dataset mutations, such as eating an apple or replacing one with a lemon, while the bowl’s rectangle remains static. This example visualizes data binding and state transitions in a lightweight, interactive scene.

Sep 30, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern

Rows of apples and lemons animate into and out of a bowl using the general update pattern in D3 v5. The code demonstrates the enter, update, and exit selections through `selection.data`, `selection.enter`, and `selection.exit`, with `transition().duration(1000)` animating circle radii and positions. `d3.scaleOrdinal` maps fruit types to colors and radius values, while React renders the SVG containing the animated circles. Fruits are added and removed via timed JavaScript actions that trigger re-renders.

Sep 29, 2020
Loading thumbnail…

Urban Population Area Chart

This area chart displays the change in Serbia’s urban population from 1960 to 2019, using World Bank Indicators data. The visualization uses D3.js (v5) to render an SVG area chart with a smooth curve, drawing data from a CSV file. It employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` with `curveBasis` for the filled region, and `d3.axisBottom` and `d3.axisLeft` for labeled ticks. The chart’s title and axis labels are added as SVG text elements.

Sep 25, 2020
Loading thumbnail…

World Population Area Chart

This area chart shows global population growth from 1950 to 2015, with a maroon filled area rising steadily beneath a time-based x-axis. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `area()` with `curveBasis` for the smoothed filled shape, and `axisBottom` and `axisLeft` for tick marks. Population values are loaded from a CSV and formatted from billions to “B” on the y-axis.

Sep 24, 2020
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populous countries using data from a CSV file, with population values formatted in billions. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, and customizes both axes by removing domain lines, adding grid lines via `tickSize`, and applying a tick format that converts G to B. The left axis labels are positioned with `d3.axisLeft`, while the bottom axis uses `d3.axisBottom`.

Sep 24, 2020
Loading thumbnail…

Temperatures in San Francisco Line Chart

This line chart shows a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses a filled area path with a smooth curve (via d3.area and curveBasis) to emphasize the temperature trend. The chart is rendered as SVG using d3.scaleTime and d3.scaleLinear for the axes, with d3.axisLeft and d3.axisBottom providing the tick marks. Data is loaded as CSV from an external GitHub gist, then parsed and bound to the scales.

Sep 24, 2020
Loading thumbnail…

Temperatures in San Francisco Scatter Plot

This visualization shows a week of hourly temperatures in San Francisco, with time on the x-axis and temperature on the y-axis, plotted as a scatter plot of circles. The data is loaded from a CSV file using `d3.csv` and parsed into `Date` objects and numbers. The code uses `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.axisBottom` and `d3.axisLeft` for the ticks and grid lines, and `d3.extent` to set the scales. The SVG rendering includes axis labels and a title, with circles styled via CSS.

Sep 24, 2020
Loading thumbnail…

Customizing axes

A horizontal bar chart displays the top 10 most populous countries, with population values formatted in billions using d3.format and custom tick labels. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, with axisBottom and axisLeft generating grid lines and labels. Bars are rendered as SVG rectangles, and axis labels and titles are added as SVG text elements, styled via external CSS. Data loads from a CSV file using d3.csv.

Sep 23, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a collection of cars, with each circle representing an individual vehicle. The visualization uses D3.js v5 with SVG rendering, employing d3.scaleLinear for both axes and d3.axisLeft and d3.axisBottom to generate the tick marks and grid lines. The code loads car data from a CSV file via d3.csv and maps the numeric fields before rendering the circles with a fixed radius and semi-transparent steelblue fill.

Sep 23, 2020
Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the ten most populous countries, with each circle positioned along a linear scale for population and a point scale for country names. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisBottom and d3.axisLeft for axes, with gridlines rendered via tick sizes. Circles are appended to an SVG container using D3's data join, and axis labels and a title are added as text elements.

Sep 23, 2020
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population data for ten countries, with each bar’s length proportional to the population value. The chart uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for tick marks. Data is loaded from a CSV file via `d3.csv`, with population values converted from thousands. Bars are rendered as SVG `rect` elements, styled with steelblue fill, within an SVG canvas.

Sep 21, 2020
Loading thumbnail…

Making an Interactive Pie Chart

This interactive donut chart displays income distribution across Sales, Dividends, and Interest using a D3 pie layout and arc generator. Hovering over a slice reveals a tooltip showing the percentage of the total amount, calculated with d3.sum. The chart uses a color scale with ordinal colors, labels positioned via arc centroids, and SVG rendering. Data is loaded from a CSV file, and the tooltip fades in and out based on mouseover and mouseout events.

Aug 27, 2020
Loading thumbnail…

Making a Pie Chart

This example shows a donut chart of income sources—Sales, Dividends, and Interest—with labeled slices and a custom color scale. It loads data from a CSV file, converts the amounts to thousands, and renders the chart as SVG. The code uses D3 v5 APIs including `d3.pie`, `d3.arc`, `scaleOrdinal`, and `csv` to compute slice angles, generate paths, and position labels via arc centroids.

Aug 25, 2020
Loading thumbnail…

Scatter plot

A scatter plot displays the populations of the top ten most populous countries, using a linear scale for population and a point scale for country names. The visualization is rendered as SVG with D3 v5, using `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart. Population values are loaded from a CSV and scaled by 1000, with circles sized at a fixed radius, grid lines, and labeled axes.

Aug 20, 2020
Loading thumbnail…

Cheap tricks for interaction

A world map rendered with D3's geoNaturalEarth1 projection and SVG paths shows country boundaries as light green shapes over a dark blue sphere. Interactive tooltips appear when hovering over a country, and the fill color changes to red on hover via CSS. The example demonstrates how simple CSS hover effects and SVG title elements provide low-cost interaction, using d3.geoPath for map geometry, topojson for feature extraction, and a TSV file for country name lookup.

Aug 17, 2020
Loading thumbnail…

Let's make a map with D3.js

A map of the world is drawn as a natural Earth projection, with countries filled in light green against a dark blue sphere background, using SVG paths. The example loads GeoJSON data from the world-atlas TopoJSON file via `d3.json`, converts it with `feature` from TopoJSON, and renders it using `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere and country outlines are styled through CSS classes, demonstrating a basic D3.js choropleth setup.

Aug 17, 2020
Loading thumbnail…

Let's make a map with D3.js

This example shows how to create a world map with D3.js, rendering a blue sphere and green country shapes in SVG. The code uses `d3.geoNaturalEarth1` for the map projection and `d3.geoPath` to generate the country outlines from TopoJSON data. It loads the world-atlas dataset from unpkg, converts the TopoJSON to GeoJSON with `topojson.feature`, and appends paths for each country. The visualization is built with D3 v5, using promise-based `d3.json` to asynchronously fetch the geographic data.

Aug 15, 2020
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five pieces of fruit—initially apples, with one turning into a lemon—are drawn as circles that grow and shrink in size upon entering or exiting the SVG canvas. Hovering over a circle highlights it with a black stroke, and the selection state drives the rendering. The example uses D3 v5’s selection merging and transition API to animate radius and position, with a scaleOrdinal mapping fruit type to color and radius.

Aug 14, 2020
Loading thumbnail…

Bowl of fruit - hover to select

A bowl of fruit renders as five apples in SVG, with hover highlighting the selected fruit by adding a black stroke. The code uses d3.scaleOrdinal for color and radius mapping, and transitions animate fruit entry, exit, and replacement. Over time, apples are removed and one becomes a lemon, with d3 data joins handling updates via keyed selection and transition.attr for radius changes.

Aug 13, 2020
Loading thumbnail…

Bowl of fruit - click to select

Five apples animate into a bowl, and clicking one selects it with a black stroke. The bowl uses d3's scaleOrdinal for color and radius mapping, with transition animations for enter, update, and exit states. Over time, apples are removed and one is replaced by a lemon, demonstrating dynamic data updates. The example uses d3 v5 with SVG rendering and a custom fruitBowl component.

Aug 13, 2020
Loading thumbnail…

Bowl of fruit - General Update Pattern

Five apples sit in a shallow bowl, each drawn as a circle with a label. The general update pattern animates sequential changes: one apple disappears, an apple transforms into a lemon, and another apple is removed. The example uses `d3.scaleOrdinal` for color and radius, differentiating fruit by type, and SVG rendering through D3 selections with enter, merge, and exit operations to manage the dynamic fruit bowl.

Aug 12, 2020
Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth from 1950 to 2015 using a smooth curved path filled in maroon. The SVG rendering relies on D3 v5's `area` generator with `curveBasis`, `scaleTime` for the x-axis, and `scaleLinear` for the y-axis. Axes are labeled and formatted using `axisBottom`, `axisLeft`, and `format` with a custom tick formatter that converts billions. Population values are parsed from a CSV file as numbers, while years are converted to JavaScript `Date` objects for temporal scaling.

Aug 8, 2020
Loading thumbnail…

Temperature in San Francisco - Line chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart displays temperature in degrees Celsius over time using a smooth, curved area fill in maroon, with labeled axes for time and temperature. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG elements, including a titled grid and axis labels.

Aug 8, 2020
Loading thumbnail…

Temperature in San Francisco - Line chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis, titled "A week in San Francisco." The visualization uses d3.scaleTime and d3.scaleLinear to map data to SVG coordinates, with d3.axisBottom and d3.axisLeft rendering labeled axes. A smooth curve is generated via d3.line with curveBasis, and the data comes from a CSV loaded through d3.csv, sourced from Data Canvas - Sense Your City.

Aug 8, 2020
Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between years of service and salary for university professors. Each circle represents an individual, with its position determined by the `d3.scaleLinear` scales mapping the x-axis (years of service) and y-axis (salary in USD). The chart uses `d3.axisBottom` and `d3.axisLeft` for labeled axes, and a 1.2-second `transition` animation grows the circles from radius zero to their final size. The data is loaded from a CSV file and filtered to include only professors with more than two years of service.

Aug 7, 2020
Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between horsepower and weight for 398 cars from the UCI Auto MPG dataset. Red semi-transparent circles represent individual car models, with axes labeled and styled via d3.axisBottom and d3.axisLeft. The code uses d3.csv loading, scaleLinear for both axes, and d3.extent to compute domains, rendering everything as SVG. A title and rotated axis labels provide context, while tick marks extend across the plot for readability.

Aug 7, 2020
Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between horsepower and weight for 398 cars from the UCI Auto MPG dataset. Red semi-transparent circles represent individual car models, with axes labeled and styled via d3.axisBottom and d3.axisLeft. The code uses d3.csv loading, scaleLinear for both axes, and d3.extent to compute domains, rendering everything as SVG. A title and rotated axis labels provide context, while tick marks extend across the plot for readability.

Aug 7, 2020
Loading thumbnail…

Bar chart

This bar chart displays the area of seven continents, using green bars on a white background with labeled axes. The chart is built with D3 v5, loading data from a CSV file and rendering as SVG. The visualization uses `scaleBand` for the categorical x-axis and `scaleLinear` for the numeric y-axis, with axes generated by `axisLeft` and `axisBottom`. The bars are positioned via the `x` and `y` attributes, with heights calculated relative to the inner chart area.

Aug 4, 2020
Loading thumbnail…

Bar chart

This bar chart displays the population of the ten most populous countries, using horizontal bars ordered alphabetically by country name. The visualization loads data from a CSV file and renders it as SVG rectangles. It uses D3 v5 scales and axes, including `scaleLinear` for the population axis and `scaleBand` for the categorical country axis, with `axisLeft` and `axisBottom` for tick marks. The bars are styled steelblue via an external stylesheet.

Aug 4, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern with a bowl of fruit that changes over time. An SVG renders circles representing apples and lemons, with color and size determined by `d3.scaleOrdinal` scales. The `fruitBowl` function uses `selection.selectAll`, `enter()`, `merge()`, and `exit()` to handle data joins, while `setTimeout` triggers state changes—removing fruits and replacing an apple with a lemon—to show how the visualization updates dynamically.

Jul 23, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern with a bowl of fruit that changes over time. An SVG renders circles representing apples and lemons, with color and size determined by `d3.scaleOrdinal` scales. The `fruitBowl` function uses `selection.selectAll`, `enter()`, `merge()`, and `exit()` to handle data joins, while `setTimeout` triggers state changes—removing fruits and replacing an apple with a lemon—to show how the visualization updates dynamically.

Jul 23, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the D3 general update pattern, showing how a visualization can add, remove, and modify data points. Five apples initially appear in a grey bowl; sequentially, an apple is removed, an apple changes into a lemon, and another apple is deleted. The code uses D3 v5 with a scaleOrdinal color and radius mapping, and employs selection merging via `.merge()` in the `fruitBowl` function to handle entering, updating, and exiting elements in the SVG.

Jul 19, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3, where data joins manage the entering, updating, and exiting of SVG circles that represent fruits in a bowl. It shows three sequential transitions: removing an apple, changing an apple to a lemon, and filtering out another apple. The code uses `selection.data()`, `.enter()`, `.merge()`, and `.exit()` within a custom `fruitBowl` function, applying ordinal scales for fruit color and radius. A `setTimeout` chain triggers each update, making the pattern of data-driven DOM changes explicit.

Jul 19, 2020
Loading thumbnail…

World Population Area Chart

A filled area chart visualizes world population growth from 1950 to 2015 using UN data, with a curved path showing the steady increase from about 2.5 billion to over 7.3 billion people. The SVG rendering uses d3.area, scaleTime, and scaleLinear to map years to the x-axis and population to the y-axis, while d3.axisBottom and d3.axisLeft display formatted tick marks with billion abbreviations. The chart includes labeled axes and a title, with the area fill rendered in maroon.

Jul 17, 2020
Loading thumbnail…

Temperature in SF Line Chart

This line chart visualizes one week of temperature data in San Francisco, using a smooth area curve to show temperature fluctuations over time. The visualization uses D3 v5 with the `area` generator and `curveBasis` to create the filled path, while `scaleTime` and `scaleLinear` map timestamps and temperature values to screen coordinates. Axes are rendered using `axisBottom` and `axisLeft` with gridlines, and the data comes from Data Canvas - Sense Your City via a CSV file. The chart includes labeled axes for Time and Temperature, with the title "A week in San Francisco" displayed above the plot.

Jul 17, 2020
Loading thumbnail…

Temperature in SF Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth path, while gridlines, axis labels, and a title are added via SVG elements. The data is loaded from a CSV file using `csv`, and each timestamp is parsed into a `Date` object before rendering.

Jul 17, 2020
Loading thumbnail…

Temperature in SF Scatter Plot

This scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The data comes from the Data Canvas - Sense Your City project. Using d3.csv, d3.scaleTime, d3.scaleLinear, and d3.axisLeft/axisBottom, the code renders circles in SVG with a steelblue fill, clear axis labels, and a title. The axes include tick lines that extend across the chart for readability.

Jul 17, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a car, with axes labeled for both variables and grid lines drawn from the tick marks. Built with D3 v5, the visualization uses `d3.csv` to load the data, `scaleLinear` and `extent` for scaling, and `axisBottom` and `axisLeft` to render the axes with custom tick sizing and padding. The SVG rendering includes styled text elements for the title and axis labels.

Jul 15, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the ten most populous countries, with circles positioned along a linear scale for population and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG elements. Population values from the CSV file are multiplied by 1000 and formatted with a custom tick formatter that converts billions to "B". Grid lines extend across the chart via tick sizes, and the data originates from the 2018 World Population Prospects estimate.

Jul 15, 2020
Loading thumbnail…

Customizing Axes

This bar chart shows the ten most populous countries in 2018, with population values derived from the World Population Prospects 2017 dataset and rendered as horizontal bars. It demonstrates custom axis styling and formatting using d3.axisLeft and d3.axisBottom with a custom tick formatter that abbreviates large numbers, plus custom tick sizes, removed domain lines, and manually added axis labels and titles. The chart is built with d3.scaleLinear and d3.scaleBand, and all elements are drawn as SVG within a fixed 960×500 viewport.

Jul 14, 2020
Loading thumbnail…

Bar Chart - Top Countries by Area

This bar chart displays the ten largest countries by land area, with values sourced from the World Bank and adjusted to millions of square kilometers. Using d3.scaleLinear and d3.scaleBand, the visualization maps numerical area values to horizontal bar lengths and country names to vertical bands. Bars render as SVG rectangles that animate their width from zero to the scaled value via a two-second transition, while d3.axisLeft and d3.axisBottom generate the labeled scales. The chart highlights Russia’s dominance, with China and the United States following, and includes Algeria and Kazakhstan tied at the lower end.

Jul 13, 2020