B

bencestubnya

@bencestubnya·20 public vizzes

Loading thumbnail…

Circles on a map

This map visualization displays circles sized by a country’s 2018 value, positioned at each country’s centroid using the `geoNaturalEarth1` projection and `geoPath` for rendering the world in SVG. The circles’ radii come from `scaleSqrt`, while countries are colored green or red based on whether they have a value, with a categorical `scaleOrdinal` color legend. Data is loaded from a CSV and TopoJSON via `d3.csv` and `d3.json`, processed with `topojson.feature`, and the SVG supports zooming through `d3.zoom`.

Loading thumbnail…

Population density in the European Union (column)

A bar chart displays population density for select European Union countries, highlighting Malta as the most densely populated. Built with D3 v5, the visualization renders as SVG, using `scaleBand` for horizontal positioning and `scaleLinear` for vertical density scaling. Data from a CSV file is mapped to rectangular bars, which turn interactive through mouseover events that log country names. Axis generators `axisLeft` and `axisBottom` provide reference grids, while the chart title and margins organize the layout.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let users select which variables from the auto-mpg dataset appear on the x- and y-axes. The visualization renders circles in SVG with d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft, while the custom dropdownMenu component triggers re-renders via onOptionClicked. Points animate from the center outward using transition().duration(2000), and axis labels update dynamically. The menus are built with plain HTML select elements, and the data is loaded via d3.csv.

Loading thumbnail…

Choropleth map with interactive filtering

This choropleth map displays countries colored by economic classification, with a linked legend that filters the map to highlight selected categories. Clicking a legend entry dims all other countries and emphasizes those matching the chosen value. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render geographic features from TopoJSON world atlas data, while a d3.scaleOrdinal with a spectral color scheme maps economic groups to colors. Interactive zoom and filtering are implemented via d3.zoom and click handlers on the SVG legend elements.

Loading thumbnail…

Choropleth map

A choropleth map colors countries by their economy category, using an ordinal color scale with a spectral scheme and a custom legend that displays each category as a colored circle with a label. The map renders geographic shapes via `d3.geoPath` with a natural Earth projection, while `topojson.feature` converts TopoJSON world-atlas data into GeoJSON features. Users can pan and zoom the map through `d3.zoom`, and hovering over a country highlights it and reveals its name and economy type in a tooltip.

Loading thumbnail…

Color and size legends

This example demonstrates two separate legends: a color legend for categorical data (plum, lemon, limes, oranges) and a size legend for quantitative data on a square-root scale. The color legend maps ordinal domains to fixed palette values, while the size legend generates five tick values using `scaleSqrt` and filters out zero. Both legends are built with reusable D3 v5 functions that append SVG groups containing circles and text, with spacing and text offsets passed as props. The rendering uses `selection.enter` and `selection.merge` to manage dynamic updates.

Loading thumbnail…

World countries tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree layout with curved links. The interactive view supports zooming and panning through D3’s zoom behavior. Built with D3 v5, it uses `d3.json` to load hierarchical data, `d3.hierarchy` and `d3.tree` for layout, and `linkHorizontal` for edge paths. Text labels are styled with the Permanent Marker font, and SVG rendering displays the full country hierarchy from the provided `data.json` source.

Loading thumbnail…

Mosolygós fej

A smiling face is drawn as an SVG with a purple circular head, two eyes, animated eyebrows, and an arc-based mouth. The eyebrows bounce vertically in sequence using chained D3 transitions, creating a playful, expressive motion. The visualization is built with React and D3 v5, using selections and the `arc` generator to construct the mouth path, while the face elements are positioned around a centered group. The animation runs continuously, alternating the eyebrow positions over timed intervals.

Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire browser viewport, offering a clean slate with no imposed data or structure. The visualization queries the body's client dimensions to size the SVG canvas and appends a single rectangle with a 40-pixel corner radius. The page is fixed to the viewport via CSS, and the D3 v5 `select` and `append` methods compose the minimal geometry, rendering as SVG.

Loading thumbnail…

Map with D3.js + cheap tricks

An interactive world map displays country boundaries with hover highlighting, rendered in SVG using the Natural Earth projection. The visualization loads GeoJSON from the World Atlas TopoJSON dataset and merges ISO country codes with name labels from a TSV file. Users can pan and zoom via `d3.zoom`. The code demonstrates `d3.geoPath` with `geoNaturalEarth1`, `topojson.feature`, and CSS transitions for hover effects.

Loading thumbnail…

hover to select

Five fruit circles rendered in SVG respond to hover by toggling a black stroke around the selected fruit. The example cycles through data updates—removing fruits, changing a plum into a lemon, and filtering the array—while `d3.transition` animates circle radii to zero for exits. Fruit type maps to color and radius via `d3.scaleOrdinal`, and the selection state drives re-rendering through a custom `fruitBowl` function.

Loading thumbnail…

click to select

Five circles represent fruit in a bowl, rendered as SVG by D3 v5. Clicking a fruit selects it, highlighting it with a black stroke. A data join with keyed enter, update, and exit transitions animates shape changes: plums shrink and disappear, and one plum transforms into a lemon. The example uses d3.scaleOrdinal for color and radius, and transitions via `selection.transition()` with a duration of 1000ms.

Loading thumbnail…

General Update Pattern (Nested and Singular elements)

This example demonstrates the general update pattern for both nested and singular SVG elements, showing how plums are eaten and replaced with lemons over time. Fruit groups enter, update, and exit with smooth transitions, while circles and text elements are joined to data arrays. The code uses d3-selection’s data join, merge, and exit methods, alongside scaleOrdinal for color and radius mapping, and transition().duration() to animate changes.

Loading thumbnail…

General Update Pattern practice

Five fruits (plums and lemons) are rendered as colored circles in an SVG, demonstrating D3's general update pattern for entering, updating, and exiting elements. The code uses `d3.scaleOrdinal` for color and radius mapping, and `d3.select` with data joins. Each transition animates circle radius and x-position over one second, with exiting circles shrinking to zero before removal. The example uses d3.v5 and follows a modular structure with the `fruitBowl.js` function handling the update logic.

Loading thumbnail…

Costumising axes

This example displays the top 10 most populous countries as a horizontal bar chart, with the x-axis showing population and the y-axis listing country names. The code uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to construct the scales and axes, while applying a custom tick format that converts large numbers to abbreviated forms like "B". The chart removes default axis domains and tick lines, adds grid lines via tickSize, and renders an SVG with styled text labels. Data is loaded from a CSV file using d3.csv.

Loading thumbnail…

Population density in the European Union

A horizontal bar chart displays population density for EU member states, ordered from Malta at 1548 people per square kilometer down to Finland at 18. The visualization uses D3 v5 with `scaleLinear` and `scaleBand` to map density values to bar widths and country names to vertical positions. CSV data is loaded via `d3.csv`, and the chart renders as SVG rectangles with axes generated by `axisLeft` and `axisBottom`.

Loading thumbnail…

Area chart

This area chart visualizes world population trends from 1950 to 2015, with the x-axis mapping years and the y-axis representing population counts (in billions). The chart uses a smooth curve to fill the area beneath the population line. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `area`, and `axisBottom`/`axisLeft` to render the SVG. Data is loaded asynchronously from a CSV file via `d3.csv`, with population values parsed as numbers and years as dates.

Loading thumbnail…

Line chart

A line chart displays temperature readings over one week in San Francisco, with time on the x-axis and degrees on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes. A `line` generator with `curveBasis` smooths the data points, which come from a CSV file of timestamped temperature values. The chart includes labeled axes, a title, and a styled purple stroke.

Loading thumbnail…

Cars scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes and gridlines. Data is loaded via `csv()` from an external file, and circles are appended to the chart with opacity set to 0.5. The chart includes labeled axes and a title, with margins creating space for the axis annotations.

Loading thumbnail…

Scatterplot practice

This scatterplot displays the top 10 most populous countries, plotting population on the x-axis against country names on the y-axis using a categorical point scale. Built with D3 v5, it applies a linear scale for population, formats tick labels with the `format` API, and renders axes via `axisBottom` and `axisLeft`. The SVG output features purple circles and labeled axes, with data loaded from a CSV file.