Skip to main content
Log in
I

Igor Borzunov

@FuryJohnson·13 public vizzes

Loading thumbnail…

Untitled

This example demonstrates how to use the D3 collection API to inspect and iterate over JavaScript objects. It defines a simple month object with four key-value pairs and then logs the results of `d3.keys`, `d3.values`, and `d3.entries` to the browser console. Using D3 v4 within a plain HTML page, the code shows how these utility functions extract property names, values, and key-value pairs as arrays, respectively, with no data visualization or chart rendered.

Sep 7, 2020
Loading thumbnail…

Untitled

This example shows a continuously updating line chart that plots random data points in real time, with a smooth curve and a filled area beneath it. The chart scrolls horizontally as new points are added, while the x-axis shifts to keep the latest data in view. It uses D3 v4 scales and generators such as `d3.line` with `d3.curveCardinal` for the smooth path, `d3.area` for the fill, and `d3.axisBottom` for the axis. Animated transitions with `transition.attr` and `ease` shift both the path and area, with grid lines drawn as static SVG paths.

Sep 3, 2020
Loading thumbnail…

Faccia

A radial network of nodes and edges forms a sparse, web-like structure, with a large central cluster surrounded by smaller satellite groupings. The visualization uses a force-directed layout driven by `d3.forceSimulation` within a React framework, rendering everything as SVG elements into a static canvas. The code imports data from a variable named `v3` and relies on D3 v5, with styling handled by external CSS. The composition emphasizes the overall topology rather than individual labels or values.

Sep 3, 2020
Loading thumbnail…

Faccia

This example visualizes the historical price of Bitcoin from December 2017 to August 2020 using a line chart. It loads data from the CoinDesk API, parses the JSON response into date-value pairs, and renders a time-series line with axes. Built with D3 v5, the chart uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to plot the data, while `d3.axisBottom` and `d3.axisLeft` generate the axes. The SVG output is styled with a minimal, full-screen layout.

Sep 3, 2020
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays relationships between pairs of numerical attributes of cars, using data from the UCI Auto MPG dataset. It shows one attribute on each axis, with red, semi-transparent circles representing individual cars, enabling pattern exploration across different variables. The visualization employs HTML `<select>` menus, built with custom JavaScript, to dynamically switch the x and y axes. Rendering uses D3 version 5's `select`, `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` modules, with a `transition` animation for a 1000-millisecond circle movement when axes change.

Aug 29, 2020
Loading thumbnail…

Color and size legends

This example demonstrates how to construct reusable legends for categorical color scales in D3 v5. A color legend maps fruit names to distinct colors using `scaleOrdinal`, rendering circles with corresponding fills and text labels. The legend is implemented as a custom function that leverages D3’s data-join pattern with `selection.merge` to handle updates efficiently. The SVG output positions each legend item vertically with configurable spacing, circle radius, and text offset.

Aug 26, 2020
Loading thumbnail…

Let's make a map with D3.js!

This example uses a hierarchical dataset of world regions and countries to render a vertical tree diagram. The visualization displays the structure of continents, subregions, and nations as linked nodes using D3’s `tree` layout and `hierarchy` function. SVG paths connect parent and child elements with curved, vertical links generated by `linkVertical`, while the JSON data is loaded asynchronously via `json`. The chart adapts its dimensions to the browser window, with no interactive behavior beyond the static layout.

Aug 26, 2020
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered as SVG, where each country is colored light green and turns red on hover, with a dark blue sphere backdrop. Built with D3.js v5 and TopoJSON, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from the World Atlas 50m dataset. Zoom and pan are enabled via `d3.zoom`, while country names are loaded from a TSV file and attached as SVG title tooltips.

Aug 25, 2020
Loading thumbnail…

Bowl of fruit - Click to select

This example demonstrates an animated, interactive SVG fruit bowl where apples and lemons are represented as colored circles. Users can click a fruit to select it, which adds a black stroke around it. The visualization shows state changes through time, including fruit removal, type changes, and filtering. Built with D3 v5, the code uses `scaleOrdinal` for color and radius mapping, and D3's selection API with `enter`, `merge`, and `exit` to animate circles and labels smoothly when the underlying data array is modified.

Aug 22, 2020
Loading thumbnail…

Bowl of fruit

A dynamic SVG bowl of fruit demonstrates the enter, update, and exit pattern in D3 v5. The visualization initially renders five red apples as circles with labels, then sequentially removes one apple, changes a second apple into a yellow lemon, and filters out another fruit over timed intervals. Using `scaleOrdinal` for color and radius mapping, the code applies `selection.merge` to update shared attributes and manages transitions with `attr` for x-position and radius. The example relies on `setTimeout` callbacks to trigger re-renders and shows how data joins handle dynamic changes.

Aug 20, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays daily mean temperatures for San Francisco over time, using a blue area chart to visualize temperature fluctuations. The data is loaded from a CSV file and rendered as an SVG. The visualization uses D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` to construct the chart, with `curveBasis` smoothing the area path. While circle elements for individual data points are commented out, the area chart effectively demonstrates the temperature trend across the seasons.

Aug 19, 2020
Loading thumbnail…

Customazing Axes

This example shows a horizontal dot plot of population data for ten countries, using a pink circle for each nation positioned along a logarithmic-style axis. The chart customizes both axes by removing the default domain line, applying a tick formatter that abbreviates large numbers with "B" for billions, and extending tick marks across the plot area. Built with D3 v5, the visualization uses `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to map population and country names, while loading data from a CSV file and rendering as SVG.

Aug 18, 2020
Loading thumbnail…

Making a Bar Chart!

This example demonstrates a bar chart of the world’s most populous countries, using data from a local CSV file. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts and country names to the SVG canvas. Rectangles are drawn and filled pink via CSS, with axes generated by `axisBottom` and `axisLeft`. The x-axis labels are formatted using D3’s `format` function, converting values to abbreviated numbers like "1.42B". Clicking a bar logs the corresponding SVG element to the console.

Aug 17, 2020