K

Kolezhannochka

@Kolezhanchik·31 public vizzes

Loading thumbnail…

Organization network graph

This example shows a small organization network graph with three nodes (Alice, Bob, Carol) connected by two directed links, rendered as black circles and lines in an SVG. The graph uses D3’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes dynamically, while React manages the page structure and D3 v5 handles the rendering. The visualization updates node and link coordinates on each simulation tick, illustrating a basic force-directed layout for hierarchical relationships.

Loading thumbnail…

Voronoi Countries CORONA with country labels

A multi-line chart displays cumulative COVID-19 deaths over time for countries, with a log-scaled y-axis. Hovering over the chart triggers a Voronoi overlay, created with `d3.Delaunay`, to identify the nearest data point and highlight that country’s full line while showing its name, death count, and date in a tooltip. The chart uses React components for the SVG rendering, axes, and overlay, and fetches data from the CSSE COVID-19 time series CSV.

Loading thumbnail…

countries CORONA with country labels

This visualization displays global coronavirus death totals over time for multiple countries, with each country represented by a line on a logarithmic scale. Hovering over any area highlights the corresponding country’s line in black and displays its name in the corner. The chart uses D3’s `scaleTime`, `scaleLog`, and `line` generators alongside a `d3.Delaunay` Voronoi overlay for interactive hover detection. Data comes from the CSSEGISandData COVID-19 time-series CSV, rendered as SVG within a React component structure.

Loading thumbnail…

countries CORONA

The chart displays global coronavirus death totals over time for each country, with multiple colored lines representing different nations on a logarithmic y-axis. It uses a React component structure with D3 v5 scales (scaleTime, scaleLog) and line generators to plot cumulative deaths from a CSV dataset provided by the CSSEGISandData COVID-19 repository. The visualization renders as an SVG with axis components (XAxis, YAxis) that include grid lines and tick formatting from d3.axisBottom and d3.axisLeft.

Loading thumbnail…

CORONA Log scale

The chart plots global cumulative COVID-19 deaths over time using a logarithmic scale for the y-axis, making early exponential growth visible while compressing later spikes. A black line connects daily totals aggregated from the CSSE COVID-19 time-series dataset. Built with React and D3 v5, it uses `scaleLog`, `scaleTime`, `line`, and `axisBottom`/`axisLeft` to render gridlines, labeled axes, and titled SVG output.

Loading thumbnail…

CORONA Live chart React + d3 axes

This chart shows the global cumulative number of COVID-19 deaths over time, with the line rising sharply as the pandemic progresses. The visualization uses React components for structure and D3 v5 scales, axes, and line generator for the SVG rendering. A horizontal marker line highlights the one-million-death threshold, while a vertical marker indicates the latest date. Data comes from a CSSE time-series CSV, which is fetched and aggregated using d3.csv and d3.timeParse. Custom XAxis and marker components leverage d3.axisBottom and React refs for drawing gridlines.

Loading thumbnail…

CORONA Live chart

The CORONA Live chart displays the cumulative global death toll from COVID-19 over time as a single black line, with a horizontal marker at one million deaths and a vertical marker at the latest date. It renders as an SVG using React components and D3 v5 scales (`scaleTime`, `scaleLinear`) and a `line` generator. Data is loaded via `d3.csv` from the Johns Hopkins CSSE time-series dataset, aggregated daily by summing death counts across all countries.

Loading thumbnail…

loading and parsing CORONA data

This example demonstrates the loading and parsing of a global COVID-19 deaths time-series dataset from the Johns Hopkins CSSE GitHub repository. The React component uses the `useState` and `useEffect` hooks to asynchronously fetch the CSV file with d3.csv, then displays the total number of deaths from the most recent date column. The `message` module exports a function that extracts the last data column, sums all row values using `reduce`, and formats the result with d3’s `format(',')` for a readable output.

Loading thumbnail…

FHIV/AIDS Choropleth Map

This choropleth map visualizes the global share of the population infected with HIV/AIDS in 2017, using a yellow-to-red sequential color scale to represent prevalence rates. Each country is filled according to its data value, with grey indicating missing data. The visualization leverages d3.geoPath and d3.geoNaturalEarth1 for map projections, d3.scaleSequential with d3.interpolateYlOrRd for color mapping, and React for rendering SVG elements. Data is loaded from CSV files via d3.csv.

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single event. The x-axis encodes reported dates as a time scale, while the y-axis uses a log scale for total dead and missing counts. Built with React and D3 v5, it renders as an SVG using `scaleTime`, `scaleLog`, and `extent`. Native SVG `<title>` elements provide tooltips. Axes are custom components (`AxisBottom`, `AxisLeft`) that generate ticks and gridlines from the scales.

Loading thumbnail…

Missing Migrants Scatter Plot

A scatter plot of the Missing Migrants Dataset, where each point represents a single migration event and shows the reported date of the event against the total number of dead and missing. The visualization uses D3 scales (scaleTime, scaleLinear) to map data to SVG coordinates, with React components rendering the axes and circular marks. Native SVG `<title>` elements provide simple tooltips displaying the formatted date, while the dataset is loaded via D3's CSV parser.

Loading thumbnail…

Missing migrants multiple views with brushing

The visualization presents global migrant deaths and disappearances through two linked views: a bubble map and a time-series histogram. Brushing a time range on the histogram filters the map’s circles, which are scaled by the square root of the death count. Built with React, it uses D3 v7 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `bin`. Data comes from a CSV of Missing Migrants records, rendered as SVG marks over world atlas topography.

Loading thumbnail…

Missing migrants on the World Map diagram

This visualization combines a world map bubble chart with a time-series histogram to display missing migrants data. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with circles sized by a square-root scale (`d3.scaleSqrt`) representing total dead and missing per location. A date histogram below, built with `d3.bin` and monthly thresholds, aggregates the same metric over time. Data comes from a CSV dataset of missing migrant incidents, rendered in SVG within a React framework using D3 v7.

Loading thumbnail…

Missing migrans on the World Map

This visualization plots the locations of missing migrants on a world map, with circle size representing the total number of dead and missing individuals per incident. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, graticules, and country interiors. Data points are positioned by projecting coordinates from the CSV dataset and scaled with `d3.scaleSqrt`. The visualization is built with React and D3 v7, rendering vector graphics as SVG elements.

Loading thumbnail…

Cities on the World Map

This visualization displays cities as semi-transparent circles on a natural Earth projection, with circle size encoding population using a square-root scale. It renders world land masses, graticules, and country interiors via `geoPath` and `geoNaturalEarth1`, while city positions are projected from latitude and longitude coordinates. Data comes from a CSV of world cities loaded with `d3.csv`, and the world atlas TopoJSON is parsed using `feature` and `mesh` from topojson. React manages the component state, with D3 version 7 providing all geographic and scaling utilities.

Loading thumbnail…

Interactive Scatter Plot With Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width and coloring points by species. A color legend allows users to hover over species labels to highlight only the corresponding data points while dimming others. The visualization is built with React and D3 v5, using d3.scaleLinear for positioning, d3.scaleOrdinal for categorical colors, and custom SVG components for axes and marks. Data loads asynchronously via d3.csv from a GitHub gist.

Loading thumbnail…

Scatter Plot With Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. Built with React and D3 v5, the visualization uses `scaleLinear` to map data coordinates to SVG positions and `scaleOrdinal` to assign species colors. The SVG rendering includes custom axes, a color legend, and circle marks that display tooltips with formatted values on hover.

Loading thumbnail…

Polished Scatter Plot with menus

This scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through interactive dropdown menus that select which attribute appears on each axis. The visualization uses React state management to update the axes and data points dynamically when menu selections change. SVG circles represent individual flowers, with D3 v7 scaleLinear and extent functions calculating the domains, while custom AxisBottom and AxisLeft components render the ticks using d3 format for abbreviated tick labels. The data loads asynchronously via d3.csv and includes species information.

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between four numeric measurements—sepal length, sepal width, petal length, and petal width—by selecting which attribute appears on each axis via two dropdown menus. The visualization renders data points as SVG circles, with scales created using d3.scaleLinear and extents computed via d3.extent. Axis components generate tick marks and labels, while React hooks manage the selected attributes and trigger re-renders upon menu changes. The data loads asynchronously from a CSV file using d3.csv.

Loading thumbnail…

React dropdown

This example demonstrates a pet selection interface using a React dropdown menu. It presents six animal options—dog, cat, hamster, parrot, spider, and goldfish—with the cat option preselected as the initial value. The visualization shows how React manages state through the `useState` hook, updating the displayed selection when the user chooses a different animal. The code uses React 17 and ReactDOM to render the component, while the dropdown itself is built with standard HTML `<select>` and `<option>` elements. The interaction pattern highlights state management in a React-based data visualization context.

Loading thumbnail…

World Map

This example displays a natural Earth projection world map with landmasses, country boundaries, and graticule lines. It uses React to render SVG paths generated with `d3.geoPath`, `geoNaturalEarth1`, and `geoGraticule`. Land and interior mesh data come from TopoJSON loaded via `d3.json`, with styling applied through CSS classes for sphere, graticule, land, and borders.

Loading thumbnail…

Line Chart

This line chart displays daily temperature readings over a week in San Francisco, using a smooth natural curve to connect data points. The React application loads the dataset via `d3.csv` and renders an SVG visualization with `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. Custom `AxisBottom` and `AxisLeft` components generate tick marks, while the `Marks` component draws the path using `d3.line` with `curveNatural`. The chart includes labeled axes for Timestamp and Temperature, with loading state feedback.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and sepal width. Each flower is rendered as a circle positioned by the `xScale` and `yScale` linear scales. The visualization uses React components to structure the SVG output, with separate modules for axes and data marks. The bottom axis uses a tick format that abbreviates large numbers, while the source data is loaded asynchronously from a CSV file using D3's `csv` function.

Loading thumbnail…

Refactoring Styled Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, using data loaded from a CSV file. D3 scales (scaleBand and scaleLinear) map country names and population values to SVG rectangles, while custom React components (AxisBottom, AxisLeft, and Marks) render the axes and bars. Tick formatting converts large numbers to abbreviated strings (e.g., "1.4B"), and hover tooltips display the formatted population via native SVG `<title>` elements. Styling is applied through CSS classes, with margins and axis labels configured for a clean, readable layout.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, as loaded from a CSV file of UN population data. The visualization uses D3’s `scaleBand` and `scaleLinear` to map country names and population values to SVG coordinates, while React manages the component state and renders the chart. Axes are drawn with D3 ticks and gridlines, and the bars are `rect` elements sized by the linear scale. The data fetching and parsing are performed with D3’s `csv` method inside a React `useEffect` hook.

Loading thumbnail…

Margin Convention

This example demonstrates the D3 margin convention by rendering a horizontal bar chart of the top 10 most populous countries in 2020, using UN population data loaded via `d3.csv`. The chart employs `d3.scaleBand` for country positioning and `d3.scaleLinear` for population values, with an SVG `<g>` element translated by the margin object to inset the visualization. React manages the state and lifecycle, fetching and filtering the data before mapping it to styled `<rect>` elements inside the SVG.

Loading thumbnail…

bar chart with React & D3r

A bar chart displays the top 10 countries by 2020 population, with horizontal bars sized by population values from a UN Population 2019 CSV. The React app uses `useState` and `useEffect` to asynchronously fetch the data via D3’s `csv` loader, then renders SVG rectangles scaled by `scaleBand` for countries on the y-axis and `scaleLinear` for population on the x-axis. D3 v7 and React 16.9 are loaded from CDNs.

Loading thumbnail…

Loading Data with React & D3r Pie Colors

This example shows a pie chart of named CSS colors, rendering each color as a slice in a full-circle visualization using React and D3 v7. The code loads color data from a CSV file via `d3.csv` during a `useEffect` hook, displaying a loading message until the data arrives. The `d3.pie` layout and `d3.arc` generator create each slice, with the fill set to the color’s RGB hex value from the dataset. The chart is drawn as SVG within a React component, with the pie centered on a 960×500 canvas.

Loading thumbnail…

Loading Data with React & D3r

This example demonstrates how to load and summarize a CSV dataset within a React application using D3.js. It fetches the CSS named colors dataset from a GitHub gist, parses it with `d3.csv()`, and displays the file size in kilobytes, the number of rows, and the number of columns. The implementation uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading, and `d3.csvFormat()` to compute the data’s string length. The result is rendered as plain text inside a `<pre>` element.

Loading thumbnail…

Loading and Parcing CSV Data

This example demonstrates how to load and parse CSV data using D3.js, displaying summary statistics about a dataset of named CSS colors. It uses `d3.csv` to fetch the remote CSV file and returns a parsed array of objects, then formats a message showing the dataset size in kilobytes, row count, and column count. The code also includes a commented-out alternative using the Fetch API and `d3.csvParse` for manual text parsing. The results are rendered into a large-text `<pre>` element.

Loading thumbnail…

Mouse Follower

A smiling face follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. The visualization uses React 16.9 with the `useState` and `useCallback` hooks to track mouse coordinates via the SVG `onMouseMove` event. A single circle is rendered at the current cursor position, with its `cx` and `cy` attributes bound to the state. The rendering is done entirely through React's declarative JSX, with no external data source or animation library.