VigyoRex

@VigyoRex·4 public vizzes

Gyümik?

Five pieces of fruit sit in a bowl, labeled as “Alma” (apple) or “Citrom” (lemon). A timed sequence removes pieces, swaps an apple for a lemon, and filters out another apple, with each change triggering a smooth transition. The visualization uses D3 v5 with `scaleOrdinal` for color and radius mapping, and `transition().duration(1000)` to animate the SVG circles and text. The code executes multiple `render()` calls via `setTimeout` to update the bound data and re-render the scene.

Nov 5, 2019

Loading thumbnail…

Hungary and its neighbours

This chart uses a bar chart to compare the populations of Hungary and its six neighboring countries, with data loaded from a CSV file and displayed as animated bars that grow horizontally. The visualization employs D3.js v5 with linear and band scales for axes, utilizing `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, while a `transition().duration(2420)` animates the bar widths. The SVG rendering includes gridlines, a population axis label, and cursive font styling, with numbers formatted as compact notation.

Oct 22, 2019

Loading thumbnail…

Smiley

A smiling face is rendered as a static SVG figure, with a purple circular head, two eyes, and a curved mouth drawn using a D3 arc path. The eyebrows, created as rectangles, animate up and down in a repeating sequence via chained `transition.attr` calls. The visualization uses D3 v5's `select`, `arc`, and SVG element creation, with all coordinates computed relative to the viewport’s center.

Oct 21, 2019

Loading thumbnail…

Exercise

This visualization shows a choropleth map of countries colored by their economy type, with an interactive legend that filters and highlights selected categories. The map uses a natural Earth projection with d3.geoPath, while the view supports pan and zoom via d3.zoom. Data comes from world-atlas TopoJSON with a TSV mapping country codes. Colors are assigned through d3.scaleOrdinal with the Spectral scheme, and clicking legend items toggles dimming of non-selected countries.

Oct 14, 2019