O

Oleg Zhernovoy

@olehna·66 public vizzes

Loading thumbnail…

Scatter Plot World Heritage List

This interactive scatter plot visualizes UNESCO World Heritage Sites from a downloaded dataset, using longitude and latitude for the default axes to reveal Europe’s high concentration of sites. Users can switch axes to explore date inscribed or continent, with jitter applied to mitigate overplotting. Built with D3 v6, it uses `scaleLinear`, `scalePoint`, and `scaleTime` for scaling, `axisLeft` and `axisBottom` for axes, and transitions to animate circle positions and growth. The SVG rendering includes opacity-based color coding by continent.

Loading thumbnail…

Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Iris dataset, letting users switch both axes between sepal and petal measurements or categorical species. The D3 v6 code builds reusable `menu` and `scatterPlot` components, using `scaleLinear` and `scalePoint` for quantitative and categorical axes. When a menu changes, `selection.join` animates circles and axes via `transition`, with circles fading in and repositioning to reflect the new dimensions. SVG rendering with opacity-controlled points reveals data density.

Loading thumbnail…

Animated Scatter Plot with Menus

This animated scatter plot presents the Iris Dataset, a collection of flower measurements, within an interactive visualization. The chart displays each flower as a circle, with its position determined by the selected attributes for the X and Y axes. Users can dynamically switch between the four different measurement options—petal width, sepal width, petal length, and sepal length—via dropdown menus. Built with D3 v6, the visualization uses the `scatterPlot` custom module to handle the rendering and animation. Employing D3's `transition` for smooth updates, the circles and axes animate to their new positions over one second. The code also utilizes the `selection.join` API for efficient updating of the SVG elements, ensuring a responsive and fluid user experience.

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This example presents an animated scatter plot of the classic Iris Dataset, cycling through different combinations of flower measurements every three seconds. The visualization leverages a reusable D3 chart factory to manage its own scales, axes, and circle marks. It employs D3's `selection.join` to smoothly transition entering, updating, and exiting circles, using `d3.transition` for easing position changes and staggered delays. Axis updates are also animated via transitions. The code imports specific utilities like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3 v6.

Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses `d3.csv` to load and parse the data, then `d3.scaleLinear` with `d3.extent` to compute domains for both axes. Circles are rendered in an SVG canvas via `selectAll('circle').join('circle')`, with axes added using `axisLeft` and `axisBottom`. The plot fills the browser window, with a tick font size of 24 pixels.

Loading thumbnail…

Reusable D3 Scatter Plot

A reusable scatter plot charts the Iris dataset, with petal width mapped to the x-axis and sepal length to the y-axis. Built with D3 v6, it demonstrates a modular chart factory pattern using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. SVG circles render the data points, with axes and margins configured via a fluent API. Every two seconds, the x-axis mapping cycles through different iris measurements, animating the plot's layout while preserving the same visual encoding.

Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This example illustrates a reusable D3.js scatter plot that visualizes the classic Iris dataset, mapping petal width against sepal length and using different symbols to distinguish species. The implementation leverages D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs to create a flexible, configurable chart component. The code loads data from a remote CSV file, parses numeric fields, and renders the plot as an SVG using a custom `scatterPlot` function with settable properties like margins and symbol size.

Loading thumbnail…

D3 Selection Exploration

This example demonstrates D3’s selection and data-join mechanisms by animating a set of circles that move vertically and pulse in radius, connected by a line path. Using `d3.select`, `d3.range`, and `d3.scaleLinear` from the v6 library, the code generates data at 60 frames per second and updates the SVG via `selection.join('circle')` and `selection.join('path')`. The visualization runs in real time, with a smooth sinusoidal motion driven by a timer calling the `vizData` function on the SVG selection.

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, showing intersecting horizontal and vertical line patterns constrained by two circular masks. It demonstrates how SVG mask elements can create layered visual effects with geometric precision. The code uses D3 selections with `join('rect')` to bind 100 data points from `range(n)`, while two distinct mask groups apply inverted black-and-white circles to reveal the gridlines. The visualization renders as an SVG using dynamic width and height based on the window size.

Loading thumbnail…

Sol LeWitt Reproduction HTML + SVG

This example reproduces a Sol LeWitt-style geometric composition using HTML and SVG, showing a grid of horizontal and vertical lines that intersect within circular masks to create a layered visual effect. Two SVG masks define the visibility regions: one reveals a circle of horizontal stripes, while the other selectively hides vertical stripes within a matching circle. The code programmatically builds the SVG structure using the `createElementNS` API, generating 100 horizontal and 100 vertical rectangles with alternating mask references. No external libraries are used; the rendering relies entirely on native SVG elements and attributes.

Loading thumbnail…

RP branches

This example shows a global map of city branches, plotted as semi-transparent teal dots, over a stylized Earth rendered with graticules and landmasses. It uses D3's `geoNaturalEarth1` projection and `geoPath` to draw the sphere, graticules, land, and interiors from the World Atlas TopoJSON dataset. City coordinates from a CSV file are projected and drawn as SVG circles. The visualization is built with React, using custom hooks to fetch and transform the data, and styles the map layers with CSS.

Loading thumbnail…

Organization Network Graph_5

An interactive force-directed network graph displays the relationships between five main organizations and their affiliated child nodes, each color-coded by the main organization. The simulation uses d3.forceSimulation with a many-body charge force, link constraints, and a centering force to position nodes, while drag interaction lets users manipulate the layout. Nodes are rendered as SVG circles, links as lines, and labels as text elements, with the data generated programmatically in the included data.js file.

Loading thumbnail…

Organization Network Graph_4

This example visualizes a network of arts and social impact organizations as a force-directed graph. The visualization shows four main nodes, each with child nodes that have smaller leaf nodes, representing a hierarchical structure. The graph uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter forces to position the nodes, while links show connections between main groups. Node colors come from a palette generated with Paletton, and the rendering is done via SVG circles, text labels, and lines updated on each simulation tick.

Loading thumbnail…

Organization Network Graph_3

This example shows a force-directed network of organizations, with two main nodes—Arts Web and Social Impact Commons—connected by a link, each branching into child nodes and leaf nodes. It uses d3.forceSimulation with d3.forceManyBody and d3.forceLink to position the nodes, while d3.forceCenter keeps the graph centered. Nodes are rendered as gray circles with varying sizes defined in the data, and labels display node IDs. The SVG output updates on each simulation tick, moving circles, text, and link lines.

Loading thumbnail…

Organization Network Graph_2

This example displays an organization network graph centered on a main node, “Arts Web,” which connects to two child nodes, including one with twenty leaf nodes. It uses d3.forceSimulation for layout, applying a negative forceManyBody strength to repel nodes and forceCenter to center the graph, with SVG circles, text labels, and lines rendered for nodes and links.

Loading thumbnail…

Organization Network Graph

This example shows an organization network graph with a central "Arts Web" node connected to two child nodes, one of which branches into six anonymous sub-nodes. The visualization uses a force-directed layout driven by d3.forceSimulation, with forceManyBody for repulsion, forceLink for edge constraints, and forceCenter to anchor the simulation. Nodes are rendered as gray SVG circles sized by hierarchy level, with labels and connecting lines updated on each simulation tick. The data is defined in a separate JavaScript module, and the entire scene is drawn using SVG within a fixed 960x500 container.

Loading thumbnail…

Bowl of Fruits - General Update Pattern of D3.js_Nested Elements

A bowl of fruits demonstrates the general update pattern for nested elements in D3.js. Apples and lemons, rendered as circles with text labels, sit in a gray rounded rectangle. The example uses `d3.scaleOrdinal` to map fruit types to colors and radii. Animated over time, apples are removed, replaced by lemons, and filtered, showing the enter, update, and exit selections on SVG groups.

Loading thumbnail…

Bowl of Fruits - General Update Pattern of D3.js

This example demonstrates the general update pattern in D3.js, where a bowl of apples is dynamically modified through enter, update, and exit transitions. Apples are consumed and one is replaced by a lemon, with each change animating the circles' radii and positions over one second. The visualization uses SVG rendering with D3 v7's `select`, `range`, and `scaleOrdinal` APIs, along with the `transition` method to handle state changes smoothly.

Loading thumbnail…

Line Chart With Voronoi Overlay With Labels

This chart displays cumulative COVID-19 deaths over time for multiple countries, using a line chart where hovering over any point highlights the corresponding country's entire trajectory and displays a tooltip with the country name, death count, and date. The implementation uses React with D3 v7 scales, line generators, and axes, while a Voronoi overlay built with `d3.Delaunay` captures mouse events across the entire plot area for precise hover detection. Data comes from the CSSEGISandData COVID-19 time series dataset, with the active line emphasized in black and labeled via SVG text elements.

Loading thumbnail…

Line Chart with Multiple Lines by Country With Voronoi Overlay

This multi-line chart displays cumulative COVID-19 death totals over time for each country, using a logarithmic y-axis. A Voronoi overlay, built with `d3.Delaunay.from` and `voronoi.renderCell`, partitions the chart area into cells; hovering over any cell highlights the corresponding country’s line in black. The visualization, rendered in SVG via React, uses D3’s `scaleTime` and `scaleLog` to map data from the CSSE global time-series CSV, with axes generated by `axisBottom` and `axisLeft`.

Loading thumbnail…

Line Chart with Multiple Lines by Country

This line chart displays cumulative COVID-19 deaths over time for multiple countries, with each country represented by a randomly colored line. The chart uses a logarithmic y-axis to accommodate the wide range of death counts. Built with React and D3 v7, it employs `scaleTime` for the x-axis and `scaleLog` for the y-axis, creating paths with `d3.line`. Data comes from the COVID-19 Global Deaths time series on GitHub, processed via `d3.csv`.

Loading thumbnail…

Line Chart with Labels

A line chart displays cumulative global COVID-19 deaths over time, using a log-scaled y-axis to accommodate the data's exponential growth. The visualization highlights the most recent date on the x-axis and includes labeled axes for cumulative deaths and time. Built with React and D3 v7, the chart uses `scaleTime`, `scaleLog`, and `line` generators to render a single SVG path, with data fetched from a CSSE GitHub CSV.

Loading thumbnail…

Line Chart Log Y Axis

This line chart displays global COVID-19 death totals over time, using a logarithmic y-axis to make early exponential growth visible while accommodating later high values. Built with React and D3 v7, it uses `d3.scaleLog` for the y-scale, `d3.scaleTime` for dates, and `d3.line` for the path. Data comes from the CSSE COVID-19 time series CSV, aggregated by summing daily deaths across all countries. The chart includes gridlines via `d3.axisBottom` and `d3.axisLeft`, with tick labels formatted using "~s" notation.

Loading thumbnail…

Line Chart Linear Y Axis

A line chart displays the global cumulative count of COVID-19 deaths over time, with the y-axis scaled linearly from zero to the maximum total. Both the time-based x-axis and linear y-axis are rendered as SVG gridlines using D3 v7’s `axisBottom` and `axisLeft`, while the line is generated with `d3.line`. Interactive hover and marker lines are defined in separate `XMarkerline` and `YMarkerline` components, though they are not called in the main chart. Data comes from raw CSV files loaded via `d3.csv`.

Loading thumbnail…

Line Chart With Marker Lines and D3 Axes

This example visualizes global COVID-19 deaths over time as a line chart, with a horizontal marker line at six million deaths and a vertical marker at the most recent date. The chart uses React components wrapping D3 scales and axes, including `scaleTime`, `scaleLinear`, and `axisBottom` for gridlines. Data is loaded from a CSV file and aggregated by day from the CSSE COVID-19 dataset. Rendering uses SVG paths generated by D3's `line` generator.

Loading thumbnail…

Coronavirus Line Chart With 5,000,000 Marker Line

This chart shows the global cumulative death toll from COVID-19 over time, with black reference lines highlighting the moment the total reached 5,000,000 and the most recent date in the dataset. The SVG line chart uses D3’s `scaleTime` and `scaleLinear` to map dates and death totals, with a custom `line` generator. React renders the chart, while the data is fetched from a CSSEGISandData GitHub CSV and aggregated by summing daily death counts.

Loading thumbnail…

Coronavirus Line Chart With 5,000,000 Marker Line

A coronavirus line chart tracks cumulative global deaths over time, with a horizontal marker line highlighting the 5,000,000-death threshold. The SVG visualization uses React to render a black path generated by d3.line, scaled with d3.scaleTime and d3.scaleLinear. Data comes from the CSSE COVID-19 time series CSV, aggregated daily via d3.csv and timeParse. The marker line is explicitly positioned using the y-scale’s output for 5,000,000, emphasizing the milestone against the full death-total trajectory.

Loading thumbnail…

Basic Coronavirus Line Chart

This chart shows the global cumulative death total from COVID-19 over time, using a single black line that rises across the viewport. The line is generated with `d3.line()` and scaled using `d3.scaleTime()` for dates and `d3.scaleLinear()` for death counts. Data comes from the CSSE COVID-19 time series CSV, aggregated by summing daily country reports. Rendering is done through React with an SVG `<path>` element, styled with a 10-pixel stroke.

Loading thumbnail…

Summarizing Coronavirus Data

This example summarizes the Johns Hopkins Coronavirus Dataset, displaying the total global death count and the latest recorded date in a large text format. It loads the time-series CSV, extracts the final column of data, and sums all values using JavaScript's `reduce` method. The `d3.csv` function parses the data, while the `d3.format` API formats the number with commas. The resulting message is rendered inside a `<pre>` element, providing a stark numerical overview of the pandemic's impact.

Loading thumbnail…

Loading and Parsing Coronavirus Dataset

This example displays metadata about a COVID-19 dataset fetched from a Johns Hopkins GitHub repository. It shows the data’s size in kilobytes, row count, and column count as large text. The program uses the D3.js v5 `d3.csv` function to load and parse the remote CSV file, then accesses `data.columns` and `data.length` to compute the displayed statistics, formatting the result with `d3.csvFormat`.

Loading thumbnail…

Coronavirus Basic Line Chart

This example displays a basic line chart showing COVID-19 data, with a text summary of the loaded dataset printed above the visualization. The chart renders using D3 v7’s `csv` loader to fetch data from a GitHub Gist, while React manages the component state and asynchronous data loading. The `message` function calculates and displays the dataset’s size in kilobytes, row count, and column count using `d3.csvFormat`. The visualization itself is minimal, focusing on the data summary rather than a graphical line plot, and runs within a React 16.9 application using `ReactDOM.render`.

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence among adults aged 15–49 for the year 2019, using a yellow-orange-red sequential color scale to encode infection rates per country. It employs React for component rendering and D3 v7’s `geoNaturalEarth1` projection with `geoPath` to draw country boundaries, graticules, and interiors as SVG. Missing data appears gray. The data comes from an IHME CSV, with country codes mapped via the ISO-3166 dataset.

Loading thumbnail…

Analyzing Missing Migrants. Part I Loading & Visualization the Data (LogScale)

This example visualizes missing migrant statistics as a scatter plot, where each point represents a reported incident, plotting the reported date on the x-axis against the total dead and missing on a logarithmic y-axis. The visualization uses D3 v7’s `scaleTime` and `scaleLog` for axes and data mapping, with React components handling the rendering of SVG marks and axis ticks. The data is loaded asynchronously via D3’s `csv` parser from a GitHub-hosted CSV file, and a hover tooltip displays the full date for each point.

Loading thumbnail…

Analyzing Missing Migrants. Part VI Brushing

A choropleth-style bubble map displays missing migrant incidents worldwide, with circle size scaled by total deaths and missing persons using d3.scaleSqrt. A linked date histogram beneath the map uses d3.brushX to filter the map's bubbles interactively by date range. The visualization renders with d3.geoNaturalEarth1 and d3.geoPath for geographical features, while React hooks manage state and data loading from a CSV of Missing Migrants statistics.

Loading thumbnail…

Analyzing Missing Migrants. Part V Multiple Views. Cleanup

This example presents a dual-view dashboard of missing migrant statistics. A natural Earth projection bubble map displays the spatial distribution of total dead and missing individuals, with circle sizes scaled using d3.scaleSqrt. Below, a d3.bin-based date histogram aggregates monthly totals, rendered as SVG rectangles. Both views use React components and d3.geoPath for map rendering, sourced from CSV data and a TopoJSON world atlas.

Loading thumbnail…

Analyzing Missing Migrants. Part IV Multiple Views

This visualization combines a bubble map and a date histogram to analyze missing migrant statistics. The map uses a square-root scale to size circles by the total dead and missing at each location, projected using D3's `geoNaturalEarth1` and rendered with `geoPath`. The histogram bins reports by month using D3's `bin` and `timeMonths` APIs, summing deaths with `sum`. Both views are created with React components and rendered as SVG, pulling data from a CSV file.

Loading thumbnail…

Analyzing Missing Migrants. Part III On a Map

A world map visualizes missing migrant incidents, with each circle sized by the total number of dead and missing per location. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, rendering land, graticules, and country borders from TopoJSON. Circle radii are scaled with `d3.scaleSqrt` based on the data’s maximum value. The visualization loads data from a CSV of Missing Migrants statistics and is built with React and D3 v7, outputting SVG.

Loading thumbnail…

Analyzing Missing Migrants. Part II Aggregation by Month

This visualization is a bar chart that aggregates monthly totals of dead and missing migrants from a subset of the Missing Migrants Project dataset, highlighting the number of deaths reported each month. The chart uses React with D3 v7 APIs, including `scaleTime`, `scaleLinear`, `bin`, `timeMonths`, and `sum`, to bin the data by month and render SVG rectangles as bars. Axes are drawn via custom components, with tooltips showing exact totals on hover, and the final chart displays the data from 2014 through 2019.

Loading thumbnail…

Analyzing Missing Migrants. Part I Loading & Visualization the Data

This scatter plot visualizes the relationship between the reported date and the total number of dead and missing migrants, using data from the Missing Migrants Global 2019-10-08 subset. Each circle represents an incident, with tooltips showing the exact date. The visualization is built with React and d3.v7, using scaleTime for the x-axis, scaleLinear for the y-axis, and the extent function to compute domains. The SVG rendering includes custom AxisBottom and AxisLeft components for tick marks.

Loading thumbnail…

Points on a Map Using Size

A world map displays cities as semi-transparent teal circles, with each circle’s radius scaled by the square root of the city’s population. The basemap is rendered using `d3.geoNaturalEarth1` and `d3.geoPath` from the D3 v7 library, with graticules and land interiors styled via CSS. City coordinates from a CSV file are projected and drawn as SVG circles, sized using D3’s scaleSqrt. The code integrates React for UI management and fetches topology data from the World Atlas TopoJSON.

Loading thumbnail…

Points on a Map

A world map rendered in SVG displays city points overlaid on landmasses and graticules. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from World Atlas TopoJSON data. Each city is plotted as a semi-transparent circle positioned via the projection function. City coordinates come from a CSV dataset loaded with d3.csv, while topography is handled with topojson.feature and topojson.mesh.

Loading thumbnail…

Polished Scatter Plot with Menus, Color and Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing relationships between sepal and petal measurements. Users select X and Y axes from dropdown menus using the React Dropdown component. A color legend for flower class supports hover interactions that fade non-matching points. The visualization uses React with d3-scale for linear and ordinal scales, rendering SVG circles and axes with custom components.

Loading thumbnail…

Polished Scatter Plot with Menus, Color and Legend

This interactive scatter plot visualizes the Iris dataset, showing relationships between four flower measurements as selectable axes. Users choose X and Y attributes from dropdown menus, with points colored by species class and a corresponding legend. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical coloring, and d3.csv for data loading. SVG rendering handles axes, marks, and legend through reusable React components, with d3.format applied to tick labels.

Loading thumbnail…

Polished Scatter Plot with Menus and Color

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between flower measurements by selecting which attributes appear on the X and Y axes via dropdown menus. Points are colored by species using a categorical scale. Built with React and D3 v7, the visualization renders SVG circles for each data point, with axis scales computed from selected fields using `scaleLinear` and chart dimensions managed through React state. The data is loaded asynchronously from a CSV file using `d3.csv`.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus, built with the ReactDropdown library, control which attribute is plotted on each axis, updating the visualization dynamically. The SVG chart is rendered using D3 v7’s `scaleLinear` for axes and points, with React managing state and component structure. Axis ticks, labels, and data points are generated from reusable components, with a tooltip revealing the current x-axis value. The plot uses a clean, polished design with custom styling.

Loading thumbnail…

Menus with React

This example demonstrates a React-based dropdown menu for selecting a pet, with the selection state managed through `useState`. It shows how to build a reusable `Dropdown` component that accepts `options`, `selectedValue`, and an `onSelectedValueChange` callback. The app renders the dropdown using `ReactDOM.render`, logs the selected value to the console, and updates the menu selection dynamically. The code uses React 18.1.0 from a UMD build, with inline styles for font sizing and layout.

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset depicts relationships between flower measurements, with dropdown menus to select which attributes appear on the x and y axes. The visualization uses a React front end with the D3 v7 library for scales, axes, and rendering as SVG circles via the `scaleLinear`, `AxisBottom`, and `AxisLeft` components. Data is loaded as CSV and parsed with `d3.csv`, while hover tooltips display formatted values through SVG `<title>` elements.

Loading thumbnail…

React Starter

This React starter renders a single "Hello React" message inside a div, demonstrating a minimal setup. The example uses React 18.1.0 and ReactDOM, loaded from unpkg, with the root element retrieved by ID and `ReactDOM.render` applied to mount the component. The app is configured in `index.js`, while the HTML document supplies the container and styles. It serves as a basic template for building interactive visualizations within a React environment.

Loading thumbnail…

World Map

This example presents a world map rendered as SVG, showing continents as filled green shapes against a light gray sphere, with graticule lines and country borders drawn in subtle gray and teal strokes. The map uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw geographic features, while `topojson` and the `json` API load and convert the World Atlas TopoJSON data. All visual elements are styled via CSS classes within the React-based rendering.

Loading thumbnail…

Temperature Line Chart

This line chart visualizes temperature measurements over time from the Data Canvas Sense Your City Dataset, showing a smooth curve with points that reveal a sinusoidal pattern typical of seasonal variation. The visualization uses React with D3 v7, employing `scaleTime` and `scaleLinear` for axes, `d3.line()` with `curveNatural` for the path, and `d3.csv` for data loading. SVG rendering includes dual axes, axis labels, and interactive circles with tooltips displaying the day of the week.

Loading thumbnail…

Temperature Scatter Plot

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, with each point representing a single observation. The chart uses React with D3 v7, employing `scaleTime` and `scaleLinear` to map timestamps and temperature values to SVG coordinates. The `Marks` component renders circles with tooltips showing the day of the week, while `AxisBottom` and `AxisLeft` generate labeled tick marks. The visualization loads CSV data asynchronously via the `useData` hook and D3's `csv` function, with axes labeled "Time" and "temperature".

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting sepal length against sepal width for individual flowers. The React application uses D3 v7 functions like `scaleLinear`, `extent`, and `format` to build the SVG chart, with custom axis and mark components rendering tick marks and circles. The y-axis label is mistakenly assigned the x-axis label text ("Sepal Length") due to a code error, while the actual x-axis label is correctly positioned. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file.

Loading thumbnail…

Bar Chart Countries Population

This bar chart displays the top 10 most populous countries in 2020, using horizontal bars where length represents population. The visualization is rendered as an SVG via React, with scales created using d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Data is loaded asynchronously from a CSV file containing UN Population data, fetched with d3.csv. Each country is drawn as a rectangle with width proportional to its population value.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays population estimates for ten countries using a horizontal layout with a teal color scheme and clean typography. Built with React and D3 v7, the visualization loads data from a CSV file via D3’s `csv` utility, scales with `scaleBand` and `scaleLinear`, and renders SVG elements through reusable React components. The x-axis employs D3’s `format` with `.2s` notation to abbreviate values (e.g., “1.4B”), while hovering over each bar reveals a native tooltip using an SVG `<title>` element.

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, using data loaded from a CSV of UN population estimates. The visualization is built with React components that render SVG elements, with D3 v7 providing the scale functions (`scaleBand`, `scaleLinear`) and the `csv` data loader. Separate React components handle the axes and marks, with the bottom axis using `xScale.ticks()` to generate tick values and the bars sized via the `xScale` and `yScale` outputs.

Loading thumbnail…

Axes with React And D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, rendered as SVG elements created by React components. It loads UN population data from a CSV file using D3’s `csv` utility, then maps that data to scales built with `scaleBand` and `scaleLinear`. Axes are drawn manually by iterating over `xScale.ticks()` and `yScale.domain()`, producing grid lines and text labels. React manages state for the asynchronous data loading, while D3 provides the quantitative and categorical scales.

Loading thumbnail…

The Margin Convention

This example visualizes the top 10 most populous countries in 2020 as a horizontal bar chart using React and D3. The data, loaded via `d3.csv` from a UN population dataset, is rendered as SVG rectangles whose widths encode population values. A `scaleBand` positions countries along the y-axis, while a `scaleLinear` maps population to pixel widths. The chart demonstrates the margin convention by offsetting the render group with `transform` and calculating `innerHeight` and `innerWidth` from fixed margins.

Loading thumbnail…

Colors Pie Chart using React and D3

A radial burst of 148 CSS named colors, each rendered as a wedge from the center to the outer edge of an SVG. The example loads a CSV of color names and hex values using d3.csv, then applies d3.pie() and d3.arc() to compute the geometry for each path. React manages the component state and renders the SVG paths, with each wedge filled by its corresponding RGB hex value. The code also includes commented alternatives using d3.arc() directly and a horizontal-line layout.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset asynchronously in a React application using D3’s `csv` method. It displays a plain-text readout showing the dataset’s size in kilobytes, row count, and column count. The React `useEffect` hook triggers the data fetch, while `useState` stores the resulting parsed data. The `message` function formats the summary using `d3.csvFormat` to calculate byte length, and React renders either a “loading” placeholder or the final statistics. The data comes from a remote gist containing CSS named colors.

Loading thumbnail…

Vega-Lite API Template_Stacked Bars

A stacked bar chart visualizes the distribution of population by religion across countries, ranking countries by total population on the x-axis. Built with the Vega-Lite API, it registers vega, vega-lite, and vega-tooltip, using `vl.markBar` with encodings for country, population, and religion color. The data is loaded via D3's `csv` from a GitHub Gist containing UCI Machine Learning Repository Auto MPG data, though the visualization actually uses religion-by-country data. The chart renders as an SVG, fitting the window size with custom axis styling from a separate config file.

Loading thumbnail…

Vega-Lite API Template_Bars

This bar chart displays the population of countries in 2015, with bars sorted in descending order and colored by country. It is built using the Vega-Lite API, which programmatically defines the visualization specification, while D3.js loads the CSV data from a Gist. The chart is rendered as SVG via Vega and Vega-Lite, with tooltips enabled through vega-tooltip and a custom config to adjust axis and label styling for readability.

Loading thumbnail…

Vega-Lite API Template_Temperature

This example visualizes a week of San Francisco temperature readings as a single thick line chart, using data loaded from the UCI Machine Learning Repository’s Auto MPG dataset via a GitHub Gist. The visualization is built entirely with the Vega-Lite API, which programmatically registers Vega and Vega-Lite, and uses d3.csv to fetch the data. The line encodes temperature over time, with tooltips enabled through Vega Tooltip, and the chart is styled by a custom config to remove axis domains and adjust font sizes. The visualization auto-fits to the full browser window dimensions.

Loading thumbnail…

Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing relationships between miles per gallon, horsepower, weight, and country of origin. The visualization is built using the Vega-Lite API (`vl.markCircle`, `vl.encode`) in a JavaScript framework, with data loading handled by `d3.csv` from D3 v7. The code registers Vega-Lite and Vega, applies custom axis styling from `config.js`, and renders a responsive SVG chart that fills the browser window with tooltips enabled via the Vega Tooltip handler.

Loading thumbnail…

Mouse Follower

A circle tracks the user’s cursor within a 960×500 SVG canvas, updating its center position in real time as the mouse moves. Built with React, the app uses the `useState` hook to store mouse coordinates and a `useCallback` handler on the SVG’s `onMouseMove` event. The rendering is done entirely with SVG elements, and the circle’s radius is fixed at 30 pixels.

Loading thumbnail…

Smiley Face

The gallery displays a grid of eighteen identical smiling faces, each rendered as a yellow circle with black stroke, two eyes, and an arc-shaped mouth. Built with React and D3 v7, the visualization uses reusable components like `FaceContainer` and `Mouth`, where the mouth is generated using the `d3.arc()` API. Data is procedurally created via `d3.range(6*3)`, and the faces are output as SVG elements, with each face’s geometry defined through props for offsets, radii, and stroke width.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using D3.js, displaying the data size in kilobytes, row count, and column count in a large text element. It uses the `d3.csv` method to fetch and parse the CSV file from a GitHub gist, then accesses the parsed data array and its `columns` property to calculate the metrics. The code also includes commented alternatives using `fetch` with `d3.csvParse` and a nested promise pyramid approach, though the active path runs the external DaData API POST request instead.