V

vladvaculin

@vladvaculin·34 public vizzes

Loading thumbnail…

World population|Circles on a Map

This map of world population for 2020 uses blue circles overlaid on a natural Earth projection to show country-level population sizes, with each circle’s area scaled proportionally. The visualization uses d3.geoPath and d3.geoCentroid to project country polygons and place circles at centroid positions, while d3.scaleSqrt maps population counts to radii. A custom legend with formatted tick labels explains the scaling. Data comes from the UN population estimates, and tooltips reveal exact country names and population figures on hover. The renderer is SVG.

Loading thumbnail…

MAAAAAP

This example shows a world map rendered with a natural Earth projection. Countries are drawn as individual paths filled in dark green, with a blue sphere representing the globe and black, semi-transparent country borders. The visualization uses D3 v5’s `geoNaturalEarth1` and `geoPath` to project and trace geographic features, while TopoJSON’s `feature` API extracts country boundaries from the world-atlas dataset. Data loads asynchronously from a CDN, and the final SVG is rendered with no interactivity.

Loading thumbnail…

World population|Circles on a Map

This map of world population for 2020 uses blue circles overlaid on a natural Earth projection to show country-level population sizes, with each circle’s area scaled proportionally. The visualization uses d3.geoPath and d3.geoCentroid to project country polygons and place circles at centroid positions, while d3.scaleSqrt maps population counts to radii. A custom legend with formatted tick labels explains the scaling. Data comes from the UN population estimates, and tooltips reveal exact country names and population figures on hover. The renderer is SVG.

Loading thumbnail…

Bowl of fruits Click to select

Five apples in a bowl transition through a timed sequence of removal, type change, and addition, while a click toggles a selection state indicated by a black stroke. The visualization uses D3 v5 with a data join that animates enter, update, and exit selections via `transition()`. A fruit is rendered as a circle and text within a `g` element, positioned on a green bowl-shaped `rect` that resizes with the data count.

Loading thumbnail…

Cheap MAAAAAP

This example displays an interactive world map rendered in SVG, with each country filled in dark green and a natural Earth projection. The visualization uses D3 v5's `geoNaturalEarth1` and `geoPath` to project geographic data from the world-atlas TopoJSON, retrieved via `json()`. Users can pan and zoom the map using D3's `zoom` behavior, which applies transform attributes to the map group. Hovering over a country turns it red, and a tooltip showing the country name uses D3's `title` element.

Loading thumbnail…

Custom axis

A horizontal bar chart displays city areas with custom-formatted axis labels, converting abbreviations like "G" to "B" for billions. The chart uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scaleBand for categorical y-values, and d3.axisBottom with a custom tick format function. SVG rectangles render the bars, with hover effects via CSS. The visualization includes a centered title and axis legend, with gridlines generated through tick sizing.

Loading thumbnail…

Melting Data for multiple lines | selecting a Year

This visualization displays population trends for countries from 1950 to 2100 as multiple smoothed lines, with a vertical line marking the currently selected year. Clicking a legend item or a path isolates that country’s data, while the legend updates to show the population for the chosen year. Built with D3 v5, it uses `d3.nest()`, `d3.line()`, and `curveBasis` to generate paths, with data loaded from UN population estimate CSV files via `d3.dsv()`.

Loading thumbnail…

Clickable Cloropleth

This interactive map visualizes global income group classifications, with countries colored by category. Users click legend circles to highlight matching nations and dim all others. The map supports pan and zoom via d3.zoom. Built with d3-geoPath and Natural Earth projection, it renders SVG paths from TopoJSON data loaded from world-atlas. A d3.scaleOrdinal and schemeSpectral palette drive the choropleth, while the custom colorLegend module handles selection state and visual feedback.

Loading thumbnail…

Melting Data for multiple lines | interractive Legend

This example visualizes population trends for multiple countries from 1950 to 2100 as a multi-line chart, with an interactive legend allowing users to highlight a single country by clicking its legend entry or line path. The chart uses d3.nest to group data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for smooth paths. Rendered as SVG, the color legend is built with custom reusable code that updates stroke opacity on selection. Data comes from UN population estimates fetched via d3.dsv.

Loading thumbnail…

Line Chart multiple lines | interractive Legend

This interactive visualization displays a week of temperature data for multiple cities using multiple lines. Users can click on legend items or line paths to isolate a specific city’s data, which reduces the opacity of other lines for focused comparison. Built with D3 v5, the code utilizes `scaleOrdinal` for color mapping, `nest` and `line` for path generation, and a custom `colorLegend` component with `setSelected` and `selected` for interactive state management. The SVG render includes axes with gridlines and hover effects on paths.

Loading thumbnail…

Bowl of fruits LEGEND

This visualization demonstrates two legends for a bubble chart: a categorical color legend mapping fruit types (apple, lemon, lime, orange) to colors via `scaleOrdinal`, and a quantitative size legend mapping numeric values to circle radii via `scaleSqrt`. The legends are built using D3 v5's selection API, appending SVG groups and circles. Hovering highlights the circles with a blue stroke. The data is synthetic, generated with `Math.random()`.

Loading thumbnail…

Temperature Line Chart

This line chart visualizes temperature readings in San Francisco over time, using a smooth curved path to connect data points from a CSV dataset. The chart includes labeled axes for time and temperature, a title, and gridlines for readability. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path. Interactive mouse events trigger a tooltip, though the tooltip’s content is not fully implemented, showing only placeholder text.

Loading thumbnail…

Cloropleth

This choropleth displays world countries colored by economic classification, with a color legend showing the ordinal scale’s domain. Built with D3 v5, it uses `d3.geoPath` and `geoNaturalEarth1` to project TopoJSON data from world-atlas, joined with ISO country codes from a TSV file. The map supports zooming via `d3.zoom`, and hovering highlights countries in red. A custom `colorLegend` component renders colored circles and text labels, while `schemeSpectral` provides the sequential color range.

Loading thumbnail…

Interactive Cars Scatter plot with menus

This interactive scatter plot lets users explore the relationships between different attributes of cars from the auto-mpg dataset. Two dropdown menus allow selection of the x and y variables, dynamically re-rendering the axes and data points. The visualization uses d3.v5 with SVG and animation, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Circles transition smoothly to new positions when the selected columns change, and a tooltip appears on hover to show each car's details.

Loading thumbnail…

Interactive Cars Scatter plot

This interactive scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Each circle's size encodes the car's acceleration, with larger circles representing faster acceleration. The visualization uses D3 v5's scaleLinear, axisBottom, axisLeft, and csv functions to parse data and render SVG elements. Hovering over a circle displays a tooltip with the car's name, origin, and acceleration value. The chart includes labeled axes and a title, with gridlines created via tickSize on the axes.

Loading thumbnail…

world tree

This radial tree visualization displays the hierarchical structure of world geography, starting from continents and branching down through regions to individual countries. The data is loaded from a JSON file and arranged using D3's `tree` and `hierarchy` functions, with curved connections drawn via `linkHorizontal`. Labels appear at each node, with font size decreasing by depth level, and the entire visualization supports zooming through D3's `zoom` event handler.

Loading thumbnail…

world tree

This visualization shows the hierarchical structure of world geography, displaying continents, subregions, and countries as a horizontal tree layout. The data comes from a JSON file with nested parent-child relationships. Using D3 v5, the code applies the d3.tree layout to compute node positions and renders links with d3.linkHorizontal paths in an SVG. The tree spreads from the root node “World” on the left, with branches extending rightward to reveal the full country list.

Loading thumbnail…

blank canvas

A blank white canvas fills the entire browser viewport, rendered as a single rounded rectangle with no data or interaction. The example demonstrates the minimal setup for a D3.js v5 project using the `select` and `attr` APIs to size and style an SVG element. The code imports utilities from the `d3` module, sets the SVG dimensions to match the window’s `clientWidth` and `clientHeight`, and appends a rectangle with a 40-pixel corner radius. The page uses fixed positioning in CSS to eliminate margins and scrolling, creating an empty, immersive visual space.

Loading thumbnail…

Bowl of fruits

A dynamic SVG visualization renders a changing bowl of fruits using D3 v5's data-join pattern. Five apples appear initially, then the code removes one fruit, converts another to a lemon, and filters out a third over timed intervals. The fruitBowl module applies `scaleOrdinal` for color and radius, mapping apples to red circles and lemons to yellow ones. Circles enlarge on hover via CSS, showing interactive feedback.

Loading thumbnail…

Bowl of fruits with transition

Five visual fruits sit in a green bowl, each represented by a circle and an accompanying text label. The simple animation shows a sequence of transitions: one fruit is removed, one apple changes into a lemon, another is deleted, and a new lemon appears. Using D3 v5, the example demonstrates animated SVG updates through data joins, with `transition().duration()` tweening the circles' radii and the bowl’s width to match the changing dataset. The `scaleOrdinal` function maps fruit types to distinct colors and sizes, while data comes from a static `data.csv` file listing city areas.

Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between vehicle weight and horsepower, with each circle's radius encoding acceleration. Based on the auto-mpg dataset, the plot uses D3 v5's `scaleLinear` for position and size scaling, along with `axisBottom` and `axisLeft` to render grid lines and tick marks. Circles are appended as SVG elements with opacity and hover effects. A custom tooltip displays acceleration values on mouseover, while axis labels and a title clarify the chart’s meaning, all styled through external CSS.

Loading thumbnail…

Scatter plot

This scatter plot displays city areas in square meters along the x-axis with city names on the y-axis, using a linear scale for area and a point scale for cities. The visualization renders purple circles with hover effects, and includes axis tick lines and labels for readability. The code uses D3 v5 modules including `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data from a CSV file, with the chart drawn as an SVG.

Loading thumbnail…

Making a bar chart

This example demonstrates a horizontal bar chart comparing the area of major cities, using data loaded from a CSV file. The visualization positions each city along the y-axis and scales the bar lengths according to the area values. It relies on D3.js v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. The SVG rendering uses a purple fill for bars, which changes to a lighter shade on hover, with the chart area defined by explicit margins.

Loading thumbnail…

Temperature Scatter plot

This scatter plot displays temperature readings in San Francisco over time, with each circle representing a data point. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to map timestamps and temperatures, rendering circles as SVG elements. Hovering highlights individual points by changing their fill color, while gridlines and labeled axes clarify the relationship between time and temperature. Data is loaded as CSV from an external dataset.

Loading thumbnail…

Interactive Cars Scatter plot

This interactive scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with circle size encoding acceleration. Hovering over any point reveals a tooltip displaying the car’s name, origin, and acceleration value. The visualization uses D3 v5’s `scaleLinear` for axes and radius mapping, `axisLeft` and `axisBottom` for gridlines, and SVG circles rendered by `d3.csv`. The chart includes labeled axes, a title, and hover-driven `mouseover`/`mousemove` events for dynamic data inspection.

Loading thumbnail…

Interactive Cars Scatter plot

This interactive scatter plot visualizes the relationship between horsepower and weight for automobiles, with circle radius encoding acceleration. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes and grid lines. Data loads from a CSV file via `csv()`, and hovering over a circle reveals a tooltip displaying the car name, origin, and acceleration value. The chart includes styled axis labels and a title, with circles becoming lighter on hover.

Loading thumbnail…

Interactive Cars Scatter plot

This interactive scatter plot visualizes the relationship between vehicle weight and horsepower, with each circle’s radius encoding acceleration. The data originates from the auto-mpg dataset loaded via `d3.csv`. Using D3 v5 with SVG rendering, the code employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes and gridlines. Hovering over a circle reveals a tooltip via `mouseover` and `mousemove` events, displaying the car’s name, origin, and acceleration value. The plot includes axis labels and a title.

Loading thumbnail…

Interactive Cars Scatter plot

This interactive scatter plot visualizes the relationship between horsepower and weight for various car models, with point size mapped to acceleration rate. Built with D3.js v5 and rendered as SVG, the visualization employs linear scales for both axes and encodes acceleration through a radius transformation. Hovering over any data point reveals its acceleration value via a custom tooltip. The plot includes gridlines, axis labels, and a title, with data sourced from the auto-mpg dataset and loaded via CSV.

Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between vehicle weight and horsepower, using data from the auto-mpg dataset. Each data point’s position on the x- and y-axes corresponds to these two numeric attributes, while the point’s size reflects its acceleration value. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for grid lines and ticks, and `csv` to load the remote dataset. Data points are rendered as styled HTML `div` elements positioned via inline styles within an SVG container.

Loading thumbnail…

Cars Scatter plot

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each car depicted as a circle. Circle size encodes the vehicle’s acceleration, ranging from smaller to larger radii based on a linear scale. The visualization is rendered as an SVG using D3 v5, employing `scaleLinear` for axes, `axisLeft` and `axisBottom` for grid lines and ticks, and `extent`, `min`, and `max` to compute the radius mapping. Data is loaded remotely via `csv`, with all numeric fields parsed.

Loading thumbnail…

Making a bar chart

A bar chart displays population figures for ten countries, with horizontal bars sorted by country name. The visualization loads data from a CSV file and renders it as SVG rectangles using D3 v5. It uses `d3.scaleLinear` for the population axis, `d3.scaleBand` for country categories, and `d3.axisLeft` and `d3.axisBottom` for labeled axes. Bar heights and widths derive from the dataset, with a steelblue fill applied via CSS.

Loading thumbnail…

FAAACE

A simple yellow smiling face is drawn in SVG with D3.js v5, animated by raising the eyebrows independently over two seconds. The face consists of a yellow circle, two black eyes, a mouth arc, and two rectangular eyebrows positioned with rotations. The code builds the face using d3 selections, then applies transitions with `.transition().duration()` to animate the eyebrow positions, demonstrating basic SVG shape creation and sequential animation with D3.

Loading thumbnail…

Hello VizHub

A hand-coded SVG composition demonstrates basic geometric shapes, paths, and styling without external libraries. The code arranges circles and rectangles in nested groups, applies a blue stroke via a CSS class to lines and paths, and uses a semi-transparent red fill for the path. All rendering is done directly through SVG elements and attributes, with CSS controlling presentation.

Loading thumbnail…

Hello VizHub

This example renders a blank page titled "Hello VizHub" using a minimal HTML document with a linked stylesheet. It loads no data and executes no JavaScript beyond the basic DOM structure, relying entirely on the browser’s default rendering. The code includes an empty `<body>` element and a reference to `styles.css`, which is not shown, so the visual result is an empty canvas. It serves as a starting point for the VizHub environment, demonstrating the static, unstyled output of an initial template.