G

Gino Dzin

@Scr3nt·18 public vizzes

Loading thumbnail…

Coronavirus Death in the World

A world map displays coronavirus deaths by city, with red circles sized proportionally to reported fatalities. The visualization uses a natural Earth projection via `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country boundaries. City data comes from a CSV file loaded with `d3.csv`, while country shapes use TopoJSON from World Atlas. Circle radii are scaled with `scaleSqrt`, and the React component structure manages rendering through SVG elements.

Loading thumbnail…

OpenLayers Dark Basemap

This example combines OpenLayers and React to create an explorable dark-themed map. It uses a Stamen toner-lite basemap layered with D3.js cartographic elements, including a Natural Earth projection, geographic graticules, and circles sized to represent data points from a CSV dataset of city deaths. The map’s muted background is achieved through CSS filters that invert and reduce opacity, while OpenLayers manages panning and zooming.

Loading thumbnail…

Let's Make a Map With D3.js !

This example displays an interactive world map rendered with SVG paths, using D3.js v5 and TopoJSON data from the world-atlas package. It shows country boundaries with hover effects, built using `geoNaturalEarth1` projection and `geoPath` for geometry generation. The map supports pan and zoom through D3’s `zoom` behavior, transforming a group element. Country names are loaded from a TSV file and appended as SVG `<title>` tooltips, while the styling is defined in an external CSS file.

Loading thumbnail…

World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, with text labels sized inversely to their depth in the hierarchy. The D3.js code loads data from a JSON file, uses the `tree` layout and `linkHorizontal` path generator to position nodes and draw curved links, and renders the result as SVG. Pan and zoom interactions are enabled through D3’s `zoom` behavior, while the root view adapts to the browser window dimensions.

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser viewport, rendered as a single rounded rectangle that adapts to the window’s dimensions. The example demonstrates a minimal setup for D3 v5 with React, using `select` from `d3` to target the `<svg>` element and setting its `width` and `height` attributes based on `document.body.clientWidth` and `document.body.clientHeight`. The code appends a `rect` with a 40-pixel corner radius via SVG’s `rx` attribute, while the stylesheet fixes the body to prevent scrolling. It serves as a starting point for building more complex visualizations.

Loading thumbnail…

Let's Make a Map With D3.js !

This example shows an interactive world map rendered with SVG, where each country is colored light green and turns orange on hover, with a dark background and a blue ocean sphere. The map supports pan and zoom through D3’s zoom behavior, which applies a transform to the group containing all country paths. The code uses D3 v5’s `geoNaturalEarth1` projection, `geoPath` for path generation, and `topojson.feature` to convert TopoJSON data from the world-atlas package into GeoJSON. Country names are joined from a separate TSV file, and the hover effect is implemented via CSS styling on the `.country` class.

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles appear in a row, transitioning smoothly from zero radius to their full sizes. The circles are apples and a lemon, each colored by a D3 ordinal scale. Hovering over a circle selects it, shown by a black stroke, and un-hovers deselect it. The scene uses D3 v5’s selection and transition APIs to animate its entering, exiting, and state changes.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples appear in a row as circles, and each circle can be clicked to select it, which adds a black outline. Over time, the fruits change: one is removed, one becomes a yellow lemon with a smaller radius, and another is deleted. The visualization uses a React component with D3 v5’s `scaleOrdinal` for color and radius, and animated transitions via `transition().duration()` to smoothly grow, shrink, and reposition the SVG circles. Data mutations are triggered by timed `setTimeout` calls in the main `index.js`.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates the General Update Pattern with special cases in D3 v5 within a React framework. The visualization shows five apples that are eaten, replaced with a lemon, and filtered over time, updating SVG circles and text elements via `selection.data()`, `enter()`, `merge()`, and `exit()`. It uses `d3.scaleOrdinal` for color and radius mappings based on fruit type, with a static bowl rectangle. The code explicitly handles empty data arrays and in-place type mutations without explicit key functions, relying on index-based binding.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for data joins in D3, animating a bowl of fruit as apples are removed and transformed into lemons over time. The visualization uses a React-like component structure, with a reusable `fruitBowl` function that handles enter, update, and exit selections via `selection.selectAll('circle').data(fruits, d => d.id)`. The code explicitly uses D3 v5 APIs including `scaleOrdinal` for color and radius mappings, `transition().duration(1000)` for smooth animations, and `merge` to combine enter and update selections. The initial five apples pop in with a radius of zero, then exit by shrinking back down.

Loading thumbnail…

Let's Make a Face With D3.js !

A yellow circle face with eyes, eyebrows, and a mouth is drawn on an SVG canvas. The facial features are comprised of D3.js shapes, including circles for the eyes and a path generated with `arc()` for the smile. An animation uses `transition()` with a 2000-millisecond duration to repeatedly raise and lower the eyebrows, creating a surprised expression. The example demonstrates D3's SVG rendering and animation APIs within a React framework.

Loading thumbnail…

World Population Area Chart

A world population area chart visualizes the growth of global population over time, with a smooth upward trend shown as a filled region. The graphic displays population on the y-axis and time on the x-axis, with grid lines and labeled axes for clarity. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.area with d3.curveBasis to render the SVG path. It loads data from a CSV file hosted on VizHub, formatting years as dates and populations as numbers before drawing.

Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart depicts a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file using `d3.csv` and rendered as an orange area chart with a smooth curve via `d3.area` and `curveBasis`. Axes are created using `axisBottom` and `axisLeft`, with scales from `scaleTime` and `scaleLinear`. The SVG output includes labeled axes and a title, styled via CSS.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Each circle represents a single measurement, showing how temperatures fluctuate across the day. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `extent` for domains, and `axisBottom`/`axisLeft` for ticks. Data is loaded as CSV from VizHub and parsed, with circles drawn via `g.selectAll('circle').data(data).enter()` and styled with steelblue fill.

Loading thumbnail…

Cars Scatter Plot

This scatter plot from the auto-mpg dataset visualizes the relationship between horsepower and weight for various car models, with each car represented as a red, semi-transparent circle. D3.js v5’s scaleLinear and extent functions map data values to SVG coordinates, while axisBottom and axisLeft create labeled axes with gridlines via tickSize. The code loads CSV data from VizHub, converts numeric fields, and appends circles using enter selections, with styled SVG text for axis labels and the chart title.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the ten most populous countries, with each country positioned along the vertical axis and its population on the horizontal axis. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `axisBottom` and `axisLeft` to generate the gridlines and ticks. Data is loaded from a CSV file, and population values are formatted with the `format` API to abbreviate large numbers. The circles are uniformly styled with steelblue fills.

Loading thumbnail…

Customizing Axes

A bar chart displays the ten most populous countries, with the x-axis showing population and the y-axis listing country names. The example demonstrates how to customize D3 axes by removing default domain lines and tick marks, adding custom tick formatting, and labeling the axes. Using d3.csv, d3.scaleLinear, d3.scaleBand, and d3.axisBottom, it renders SVG bars and applies custom styling to ticks and labels.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the world’s ten most populous countries, with each bar’s length proportional to its value. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Data is loaded from a CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`. The chart applies a fixed margin layout and styles the rectangles with steelblue fill.