D

dvinubius

@dvinubius·21 public vizzes

Loading thumbnail…

Missing Migrants Vega Lite

This visualization displays the daily count of total dead and missing migrants from a subset of the Missing Migrants Global dataset, rendered as orange bars. It uses the vega-lite-api to construct a bar chart with a binned time axis on the Reported Date field and counts the numeric Total Dead and Missing values. The code registers vega, vega-lite, and vega-tooltip, customizing appearance through a config object that adjusts axis and label styling. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file.

Loading thumbnail…

World Map - React & D3

This map visualization displays global cities with scaled square-root population marks overlaid on a land-based world map. Built with React and D3 v5, it renders an SVG projection using `d3.geoMercator()` and `d3.geoPath` with graticules, land features, and interior boundaries. City data comes from a CSV file, and population values drive symbol sizing via `d3.scaleSqrt`.

Loading thumbnail…

Globe with Cities - React & D3

An orthographic globe projection displays world landmasses and city markers scaled by population, with graticules and a sphere contour providing geographic context. Built with React for state management and D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` for projection and rendering, the visualization includes interactive rotation via mouse position tracking. City coordinates come from a CSV dataset, and land features are derived from TopoJSON using `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Cities Population Vega Lite

This visualization plots the populations of world cities as circles, using the Vega-Lite API to construct the chart. Each circle is positioned along a categorical city axis and a quantitative population axis, with a tooltip showing the city name. The code loads data from a CSV file via `d3.csv` and renders the chart using Vega, Vega-Lite, and the `vega-lite-api` library, with a custom dark theme applied through configuration settings.

Loading thumbnail…

Slectable Iris Scatterplot - React & D3

A selectable Iris scatterplot displays measurements of Iris flowers, with the user able to choose which features appear on the x and y axes via two dropdown menus. Hovering over a species in the color legend highlights only that species’ points while dimming the others. The visualization is built with React, uses D3’s `scaleLinear`, `scaleOrdinal`, and `extent` to compute scales, and renders SVG circles, axes, and legend. Data originates from a CSV of Iris measurements loaded via D3’s `csv` utility.

Loading thumbnail…

Temperatures Line Chart - React & D3

This line chart displays weekly temperature readings over time, with each data point marked as a circle and connected by a smooth monotone curve. The chart uses React for component structure and D3 v5 utilities like `scaleTime`, `scaleLinear`, `line`, and `curveMonotoneX` for scales and path generation. Dashed reference ticks and axis labels are rendered as SVG elements. Temperature and time axes are formatted with `timeFormat` and `format`, and the data is loaded via `d3.csv` from a GitHub-hosted dataset.

Loading thumbnail…

City Temperature LineChart Vega Lite

This example uses the Vega-Lite API to render a line chart of daily San Francisco temperatures from a CSV dataset. The visualization plots time on the x-axis and temperature on the y-axis, with an orange semitransparent line and tooltips showing exact temperature values. The code registers Vega-Lite with D3.js, fetches data via `d3.csv`, and customizes axes, tick formatting, and dark-label styling through a configuration object. The chart auto-fits to the window size and renders as SVG with an interactive tooltip handler.

Loading thumbnail…

Iris Scatterplot - React & D3

An interactive scatterplot of the Iris dataset plots petal length against petal width, with points colored by species. Built with React, the chart renders as SVG using D3 scales, ordinals, and extents. Data is loaded via D3's CSV utility, and axes and marks are constructed as React components, with tick lines and labels generated directly from D3 scale methods.

Loading thumbnail…

Iris Scatter Vega Lite

This scatter plot shows the relationship between petal length and petal width for iris flowers, distinguishing species by color and filtering out the Iris-setosa type. It is built using the vega-lite-api library, which constructs a Vega-Lite specification that is then rendered as an SVG by Vega. The data is loaded from a CSV file via d3.csv, and the visualization is configured with custom axis and label styling for improved readability. The chart is sized to fit the window and includes interactive tooltips provided by the vega-tooltip handler.

Loading thumbnail…

Population by Country - React & D3

A horizontal bar chart displays population estimates for 20 countries, with countries listed on the y-axis and population values on the x-axis. The chart uses React components to render SVG elements, while D3 utilities such as `scaleBand`, `scaleLinear`, and `format` handle data scaling and tick formatting. Data is loaded from a CSV via `d3.csv` and originates from the UN World Population Prospects.

Loading thumbnail…

Population Vega Lite

This line chart displays population trends for selected countries from 1950 to 2020, using a color-encoded line for each nation. The visualization is built with the Vega-Lite API (vl) on top of Vega and Vega-Lite, rendering to SVG. Data is fetched as CSV via d3.csv from a remote gist, then unfolded into long format with Year and Population fields. Tooltips, provided by Vega-Tooltip, show the country name on hover, while a custom config adjusts axis and label styling.

Loading thumbnail…

Airlines Safety VegaLite

The visualization plots airline safety incidents from 1985–1999 against incidents from 2000–2014, with each point’s color and tooltip encoding available seat-kilometers per week. It uses the Vega-Lite API (vl) to define a circle mark, with D3 v6 for CSV loading via d3.csv, and renders through Vega’s SVG view. The chart config customizes axis and label styles, while the tooltip handler is provided by vega-tooltip. Data comes from FiveThirtyEight’s airline-safety dataset.

Loading thumbnail…

CSS Colors with React & D3

A pie chart displays the distribution of CSS named colors, with each slice filled using the color’s own RGB hex value. The chart is built with React for component rendering and D3 v5 utilities, including `csv` to load the data, `pie` to compute slice angles, and `arc` to generate SVG path geometry. Rendered as SVG, the visualization loads from a CSV of named colors and updates once the data arrives.

Loading thumbnail…

Life expectancy Health Expenditure VegaLite

This example maps life expectancy against health expenditure per capita for 189 countries in 2014, using horizontal bars colored by health spending to reveal potential correlations. It imports data from a CSV file via D3 v6's `csv` loader, filtering and reshaping the raw World Bank dataset. The visualization is built with Vega-Lite and rendered through the Vega-Lite API, using `vl.markBar`, `vl.x().fieldN`, `vl.y().fieldQ`, and `vl.color().fieldQ` to encode country, life expectancy, and health expenditure. Custom axis styling and tooltips are configured via the Vega-Lite config and vega-tooltip handler.

Loading thumbnail…

Alcohol Vega Lite

This example uses a scatterplot to compare beer servings and total liters of pure alcohol consumed per country, with tooltips revealing country names on hover. It fetches data from the FiveThirtyEight alcohol-consumption GitHub repository using D3’s `csv` loader, then renders the chart with Vega-Lite via the vega-lite-api wrapper, which registers Vega and Vega-Lite and uses vega-tooltip for interactions. The visualization adapts to the full window size and applies custom axis and label styling from a config object.

Loading thumbnail…

Fork of Cars mpg

This example visualizes the relationship between miles per gallon and horsepower for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Color encodes the car’s origin, and point size reflects vehicle weight, with tooltips revealing the model name. Built with the vega-lite-api, it registers the vega and vega-lite libraries, loads CSV data via d3.csv, and renders a fully window-fitted, interactive scatter plot with a custom dark-theme configuration.

Loading thumbnail…

D3 * React

This example demonstrates a minimal data inspection workflow: it loads a CSV file about child wellbeing from a remote URL, computes its size in kilobytes, row and column counts, and renders the entire dataset as formatted text in a large monospaced block. The D3 v6 API (`d3.csv`, `d3.csvFormat`) handles fetching and serializing the data. React manages the UI state via `useState` and `useEffect`, updating a `<pre>` element once the asynchronous `getData` function resolves. The visualization is purely textual, providing a raw look at the data structure without any charts or graphics.

Loading thumbnail…

DatGUI Demo

This example showcases dat.GUI, a lightweight JavaScript library for creating on-screen control panels that manipulate variables in real time. The code instantiates a GUI object and populates it with a variety of input types, including text fields, checkboxes, buttons, sliders with defined minimum, maximum, and step values, dropdown menus, and color pickers. It also demonstrates organizing controls into nested folders and using the `remember()` method to preserve state. No data visualization occurs; the demo focuses exclusively on the GUI's API and its handling of different parameter formats like CSS strings, RGB arrays, and HSV objects.

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of randomly generated smiley faces, each rendered as a standalone SVG, demonstrates composable React components paired with D3 utilities. The faces vary in stroke width, eye offset, eye radius, mouth radius, and background hue, which is assigned via an HSL color string. The implementation uses React components for structure and the D3 `arc` function from `d3` v5 to generate each mouth’s path. Faces are created using a `range` from D3 and randomly parameterized within the app.

Loading thumbnail…

Fork of Smiley Face Part V

A smiling face is drawn as an SVG graphic with a yellow circular head, black outline, two eyes, and a curved mouth. The visualization is built with React components, splitting the face into separate files for the background, eyes, and mouth. It uses D3's `arc` module to generate the mouth path, and React Fragments to group the eyes. The code declares explicit dimensions and positions for all facial features, rendering them within a single SVG element centered on a 960 by 500 canvas.

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a smiley face rendered as an SVG graphic using React and D3. The face is built from a yellow background circle, two dark eyes, and a mouth drawn as an arc path. React components structure the SVG elements, while the D3 `arc` generator defines the mouth’s shape with inner and outer radii and start/end angles. The code uses `react` and `react-dom` for rendering and `d3.arc` for path generation, with fixed dimensions and offsets positioning the facial features.