Z

zlastefcia

@zlastefcia·21 public vizzes

Loading thumbnail…

Shopping App

This animated bar chart simulates a shopping cart filling with groceries. Each frame adds an item, with bars growing to show price and text labels displaying item names and costs. The visualization uses D3 v5 with transitions to animate size and position changes, reading data from a JSON file. Items are sorted by descending price, with the chart height expanding to accommodate new entries.

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by their economic classification using a spectral color scale, with an interactive legend that filters the map by clicking a category value. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project and draw the geographic features, while d3.zoom enables panning and zooming on the SVG canvas. The legend, built with custom D3 selections, dims unselected categories and allows toggling filters. Country data comes from the world-atlas TopoJSON dataset, enriched with economic metadata from a TSV file.

Loading thumbnail…

Choropleth Map

This map uses a choropleth encoding to color countries by economic classification. The visualization is built with the D3.js v5 library, leveraging its geoNaturalEarth1 and geoPath APIs to project and draw the world map. Country colors come from a categorical scale, and users can hover to highlight regions. The interaction is handled with D3's zoom event and rendered as an SVG, sourcing data from the world-atlas TopoJSON and TSV files.

Loading thumbnail…

Color and Size Legends

This example demonstrates two SVG legends for mapping data to visual channels. The color legend uses a `scaleOrdinal` with domain categories and a range of colors, while the size legend uses `scaleSqrt` with five ticks to show proportional circle radii. Both legends are implemented as reusable functions, `colorLegend` and `sizeLegend`, which bind data to groups and update circles and text elements. The code uses D3 v5 selections, `enter`/`merge`/`exit` patterns, and SVG attributes like `r`, `fill`, and `transform` for layout.

Loading thumbnail…

World Countries Tree

This visualization presents the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree diagram. Each node displays a country or region name, with font size decreasing at deeper levels. The tree layout uses D3’s `tree` and `hierarchy` functions, with `linkHorizontal` drawing the curved connections. Pan and zoom are enabled via `d3.zoom`, while text labels include white shadows for readability. Data comes from a JSON file with nested children, rendered as SVG elements with a custom Playfair Display font.

Loading thumbnail…

Blank Canvas

This example shows an empty, full-window SVG canvas with a rounded rectangle filling the entire viewport. The visualization resizes to the browser’s current dimensions, logging the width to the console. It uses D3 v6’s `select` function to target the SVG element and append the rectangle, while CSS `body` styles fix the document to the viewport and hide overflow. The code demonstrates a minimal starting point for a blank canvas, with the rounded corners (`rx` attribute) subtly framing the otherwise empty space.

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries as light-green SVG paths on a blue sphere, using a natural Earth projection and a 50m resolution TopoJSON dataset from the world-atlas package, with country names loaded from a matching TSV file. Tooltips reveal country names via SVG title elements, while hovering turns countries red. The visualization supports pan and zoom through d3.zoom, which applies an SVG transform to a group containing all country paths. The implementation uses d3.geoPath, d3.geoNaturalEarth1, and topojson.feature for map generation.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered with D3.js, displaying country boundaries as light green filled paths against a blue sphere. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic coordinates onto SVG. Country geometries come from the World Atlas TopoJSON dataset, loaded with `d3.json` and converted using the `feature` method from `topojson`. The map highlights the spherical Earth outline with a separate path styled in CSS, while country strokes appear semi-transparent black.

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of five apples animates in from the center, expanding to their positions. Hovering over any fruit outlines it in black, with a mouseout clearing the selection. Over a few seconds, apples are removed and one is transformed into a lemon, with the scene re-rendering via a D3 `select` and custom `fruitBowl` function. The SVG circles use D3's `scaleOrdinal` for color and radius, `transition().duration(1000)` for smooth changes, and event handlers `on('mouseover')` and `on('mouseout')` to trigger selection state updates.

Loading thumbnail…

Bowl of Fruit - Click to Select #2

The visualization displays five fruit circles in a bowl; clicking one selects it, shown with a black border. Animated transitions shrink, remove, or alter fruit types (apple to lemon) over time. Built with D3 v5, it uses `scaleOrdinal` for color and radius, the `select`/`merge`/`transition` API for smooth SVG updates, and mouse click handlers to manage selected state.

Loading thumbnail…

Bowl of Fruits - Click to Select

This example demonstrates a dynamic fruit bowl where apples and lemons are added, removed, and transformed with smooth animated transitions. Clicking any fruit logs its unique ID, though no visual selection is rendered. The visualization uses D3 v6’s data joins with key functions, ordinal scales for color and radius, and chained transitions to animate circle radius and text position. React provides the framework, while SVG elements are manipulated directly via D3 selections.

Loading thumbnail…

Bitcoin Price

A scatterplot tracks daily Bitcoin high and low prices over a month, with red and blue dots animating from the chart’s edges to their respective values. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, and animates circles with `transition().duration(1000)`. Data comes from a CSV file parsed via D3’s `csv` method.

Loading thumbnail…

Bowl of Fruit - Animated Transitions

A bowl of fruit demonstrates animated transitions as apples and lemons are added, removed, and swapped. The visualization uses D3's `scaleOrdinal` for color and radius mapping, `transition` with a 1000-millisecond duration for smooth changes, and `enter`, `merge`, and `exit` selections to handle data updates over time. The SVG circles are positioned horizontally, and the sequential timers trigger state changes.

Loading thumbnail…

World Population Area Chart

This area chart displays world population growth by year, using a maroon-filled path over time to show the rising trend. It loads CSV data from a VizHub dataset, parses the year and population values, and renders an SVG chart with D3 v5. The code uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` with `curveBasis` for the smooth filled shape, and `d3.axisLeft` and `d3.axisBottom` for labeled gridlines.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It shows temperature trends over time using a smooth area path, with axes labeled “Time” and “Temperature.” The visualization is built with D3 v5, using `d3.csv` to load data, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` for scales and axes. A filled area is generated with `d3.area` and `d3.curveBasis`, rendered as SVG.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

A scatter plot visualizes a week of temperature readings in San Francisco, with red, semi-transparent circles positioned by time on the x-axis and temperature on the y-axis. The data comes from a CSV file hosted on VizHub, loaded using `d3.csv`. The visualization uses D3 v5 to create scales via `scaleTime` and `scaleLinear`, render axes with `axisBottom` and `axisLeft`, and append SVG circles. It includes labeled axes, a title, and gridlines, with styling applied through an external CSS file.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each point representing an individual vehicle. The visualization uses D3 v6 to load the auto-mpg dataset via `csv`, then employs `scaleLinear` for both axes with `extent` to determine domains. Axes are rendered using `axisBottom` and `axisLeft`, with the y-axis inverted to plot values correctly. The chart displays circles with a fixed radius, steelblue fill, and 50% opacity, while axis labels and title are added through SVG text elements styled via CSS.

Loading thumbnail…

Scatter Plot

This example shows the top 10 most populous countries in 2018, with each country’s population plotted as a circle along a linear x-axis and a categorical y-axis. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisBottom and d3.axisLeft for the axes. Circles are appended to an SVG, styled in steelblue via CSS. Axis labels and a title are added as text elements, with gridlines generated by tickSize settings. The data comes from a local CSV file, and the chart renders entirely as SVG.

Loading thumbnail…

Customizing Axes

A horizontal bar chart shows the top 10 most populous countries, with population values on the x-axis. The chart customizes the x-axis to format large numbers as billions (e.g., "1.42B") and removes the default axis lines and domain. It uses D3's `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to handle scales, ticks, and number formatting. Data is loaded from a CSV file, and the SVG rendering is set up in `index.html` with `styles.css` controlling visual styling.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking ten countries by population, from China down to Mexico. It is an SVG rendering built with D3 version 6, using the `csv` function to load the data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to draw the axes. The chart is generated by appending `rect` elements to an SVG group, with the data sourced from a CSV file where population values are multiplied by 1000.

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined eyes and a curved mouth is rendered inside an SVG, centered via a D3 selection and translation. Two eyebrow rectangles loop through a 2000-millisecond animated bounce using chained `transition` calls with `attr`. The mouth is drawn with `d3.arc()`, and all shapes are positioned relative to the SVG's center point.