Skip to main content
Log in
A

Aliaksandr

@aliaksandr-s·17 public vizzes

Loading thumbnail…

Fork of Organization Graph Diagram

This graph diagram visualizes a network of connections within the Kenneth Rainin Foundation, showing four main organizations and their associated child nodes and leaves. The 960-square SVG uses `d3.forceSimulation` with `forceManyBody` for repulsion, `forceLink` for attraction, and `forceCenter` to keep the layout centered. Nodes are rendered as colored circles with text labels, while links appear as lines. Users can drag nodes via the `drag` interaction, which repositions elements and restarts the simulation dynamically.

Jun 21, 2021
Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map displays the global prevalence of HIV/AIDS among adults aged 15-49 in 2017, using a yellow-orange-red sequential color scale to indicate the percentage of the population infected. Countries lacking data appear in gray. The visualization leverages D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for rendering, with country boundaries sourced from the world-atlas TopoJSON. React manages the interface, while the data originates from an IHME CSV file, mapping each country via its numeric code.

Feb 23, 2021
Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a world map of migrant deaths with a linked time-series bar chart. The map, rendered with `d3.geoNaturalEarth1` and `d3.geoPath`, displays circles whose sizes encode the total dead and missing via `d3.scaleSqrt`. Users brush over the histogram to filter map data in real time, using `d3.brushX` and React state. The histogram aggregates monthly totals with `d3.bin` and `d3.timeMonths`, drawing from the Missing Migrants Project dataset. SVG output is optimized via `useMemo` for fast brushing performance.

Jan 31, 2021
Loading thumbnail…

Fork of Missing Migrants on a Map

This example visualizes the Missing Migrants Dataset, plotting each event as a circle on a world map where circle size encodes the total dead and missing. It renders a Natural Earth projection using `d3.geoNaturalEarth1` and `d3.geoPath`, with graticules and country boundaries from World Atlas TopoJSON. React manages the component state and data loading, while D3’s `scaleSqrt` determines radius scaling from the data’s maximum value. Circles are drawn as SVG elements with partial opacity.

Jan 30, 2021
Loading thumbnail…

Fork of Missing Migrants Date Histogram

This histogram visualizes the monthly total of dead and missing migrants, using data from the Missing Migrants Dataset. The React application loads the data via `d3.csv` and displays the counts as vertically positioned rectangles. The visualization uses D3 v5's `scaleTime`, `histogram` (via `bin()`), and `sum` to aggregate the data by month, with axes rendered as SVG elements. Time is shown on the x-axis, and the counts are on the y-axis, with a tooltip revealing the exact sum for each bar.

Jan 18, 2021
Loading thumbnail…

World map

A world map visualization displays global cities as semi-transparent circles, with the circle size proportionally representing each city's population, layered over a graticule and world atlas landmasses. The example uses React to render SVG paths for the sphere, graticules, and land features, while city markers are positioned via the `geoMercator` projection. Population data from the Data Canvas Sense Your City Dataset is mapped to radius using `d3.scaleSqrt`, with the `d3.geoPath` and `d3.geoGraticule` APIs handling geographic geometry.

Jan 14, 2021
Loading thumbnail…

Scatter Plot With Menu

This interactive scatter plot visualizes the Iris Dataset, a classic multivariate flower dataset from a gist by Curran. Users can dynamically select which sepal or petal measurements appear on the X and Y axes using dropdown menus, and the plot updates accordingly. The visualization encodes species through color, with a color legend that supports hover interactions to fade non-matching points. Built with React and D3 v5, it renders axes, circles, and legend items as SVG elements, using scaleLinear, scaleOrdinal, and extent for scaling the data.

Jan 12, 2021
Loading thumbnail…

LIne Chart

A line chart displays temperature readings over a week in San Francisco, using time on the x-axis and temperature on the y-axis. The React app loads CSV data via `d3.csv` and renders axes and a smooth curve with `d3.line` and `curveNatural`. SVG elements are generated programmatically through custom React components for the bottom and left axes, with styling applied via CSS classes.

Jan 8, 2021
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, showing sepal length on the x-axis and sepal width on the y-axis. The code uses React with D3 v5 utilities such as `scaleLinear`, `extent`, and `csv` to load and scale the data, rendering SVG circles with tooltips. Axes are constructed manually via D3’s `ticks()` method, with labels and grid lines styled through CSS classes. The visualization uses a teal color scheme and appears in the Observable-style v3 curriculum, demonstrating a straightforward approach to coordinate mapping and axis generation.

Jan 8, 2021
Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with horizontal bars ordered by country name. The visualization leverages React for component structure and D3 v5's `scaleBand`, `scaleLinear`, `csv`, and `format` APIs for data loading and scaling. SVG rectangles render the marks with native tooltips, while custom `AxisBottom` and `AxisLeft` components generate tick lines and labels. The chart includes an "Population" axis label and formats large values using SI notation converted from billions to the "B" suffix.

Jan 7, 2021
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a static, axis-less bar chart, using React for the user interface and D3.js for data loading and scaling. It fetches population data from the United Nations World Population Prospects 2019 via D3’s `csv` function, then maps the values using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering omits the axes, leaving only the bars and tick labels, which are generated from `xScale.ticks()`.

Jan 7, 2021
Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, where each color is represented as a wedge in a full circle. The code loads color data from a CSV file using `d3.csv`, processes it with `d3.pie`, and renders SVG paths generated by `d3.arc`. React manages the component state and lifecycle, using hooks like `useState` and `useEffect` to fetch the data and display a loading message before drawing the visualization.

Jan 5, 2021
Loading thumbnail…

Banned Games

This visualization displays the number of games banned per country, with each bar segmented by ban category and tooltips revealing the specific game titles. Built with the vega-lite-api library, it uses a bar mark with a count aggregation, a category20 color scheme, and a sorted y-axis. The data loads from a CSV via d3.csv, and the chart configures axes, labels, and tooltip styling through a custom config object.

Dec 30, 2020
Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot shows the relationship between potassium and calcium content in various foods, with circle size encoding protein amount. The visualization loads CSV data from a GitHub-hosted NutritionFacts dataset using d3.csv, then renders the chart through the Vega-Lite API's vl.markCircle and vl.encode methods. Opacity and size settings improve readability, while config.js customizes axis styling and tooltip formatting. The page integrates Vega, Vega-Lite, and vega-tooltip libraries to display the interactive SVG output.

Dec 29, 2020
Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how React and D3 work together to load and summarize a dataset of CSS named colors. It fetches a CSV file containing color names and their RGB values using D3’s `csv` utility, then stores the parsed result in React state via the `useState` and `useEffect` hooks. While the data is loading, the app displays “Loading...”; once loaded, it renders a message showing the file size in kilobytes, the number of rows, and the column count, computed with D3’s `csvFormat` and `data.columns`.

Dec 29, 2020
Loading thumbnail…

Fork of Mouse Follower

An interactive React application renders an SVG circle that tracks the mouse cursor across a 960 by 500 pixel canvas. The component uses the `useState` and `useCallback` hooks to manage and update the circle's `cx` and `cy` coordinates on every `onMouseMove` event. The circle starts at the center of the viewport and smoothly follows pointer movements, with a fixed radius of 30 pixels.

Dec 28, 2020
Loading thumbnail…

Smiley Face

This example shows a cheerful smiley face rendered as a scalable vector graphic, filling the entire browser window. The face consists of a yellow circle with a black outline, a pair of glasses with dark lenses, and a smiling mouth containing a pink tongue. Constructed using React components for the glasses and mouth, the visualization utilizes the D3 `arc` generator to create the semicircular paths for the lenses, mouth, and tongue. The SVG is drawn with dynamic dimensions based on the window’s width and height, and the code uses D3 v6 alongside React 16.9.

Dec 27, 2020