Skip to main content
Log in
V

VaggelisKlt

@vaggK·15 public vizzes

Loading thumbnail…

Circles on a map

This visualization displays the global distribution of total COVID-19 cases as of August 30, 2020, using proportional red circles overlaid on a natural Earth projection map. The map is rendered with SVG, using d3.geoPath for country outlines and d3.geoCentroid to position each circular marker. Circle radii are scaled with d3.scaleSqrt, while a color legend uses d3.scaleOrdinal with a spectral scheme to categorize data. Interactive zooming is enabled through the d3.zoom module, and data is loaded from a CSV file and TopoJSON world atlas using d3.csv and topojson.feature.

Mar 11, 2021
Loading thumbnail…

Covid-19 confirmed cases (Date 25/09/20)

This visualization displays a choropleth map of COVID-19 confirmed cases as of September 25, 2020, using an ordinal color scale to represent case counts per country. The map shows geographic distribution of cases, with a hover tooltip revealing country name, total cases, deaths, and cases in the last 14 days. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map projection, `topojson` for world geometry, and `d3.tsv` to load COVID-19 case data. The visualization includes a color legend and zoom functionality via `d3.zoom`.

Mar 2, 2021
Loading thumbnail…

Circles on a map

This example visualizes confirmed COVID-19 cases as of August 30, 2020, using scaled circles positioned at country centroids on a natural Earth projection. It renders an SVG world map with d3.geoPath, applies a d3.scaleSqrt for circle radii, and includes interactive pan/zoom via d3.zoom. A color legend uses d3.scaleOrdinal with schemeSpectral, while a separate size legend displays tick marks. Data comes from a CSV time series and TopoJSON world atlas, processed with topojson.feature, with hover tooltips showing country names and case counts.

Sep 30, 2020
Loading thumbnail…

lets make a map

This example displays a natural Earth projection map of the world, rendered as an SVG with countries filled in light green and a blue sphere background. It loads GeoJSON country boundaries from the World Atlas TopoJSON dataset, converts them using topojson.feature, and draws them with d3.geoPath and d3.geoNaturalEarth1. The code appends a sphere outline and country paths to a 960x500 SVG container.

Sep 29, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the ten most populous countries, using the 2018 estimate from World Population Prospects 2017. The visualization uses a linear scale for population on the x-axis and a point scale for country names on the y-axis, with circular marks rendered as SVG elements. Built with D3 v5, the code employs `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the chart, while data is loaded from a CSV file and formatted with D3’s `format` function to abbreviate large numbers.

Sep 29, 2020
Loading thumbnail…

Choropleth map

This choropleth map visualizes total COVID-19 cases by country, using a spectral color scale to encode case counts on a natural Earth projection. The map supports pan and zoom via d3.zoom, with tooltips showing country names and case values. It renders with d3.geoPath and TopoJSON world data, while a custom color legend built with D3 scales displays the ordinal color mapping. The data is loaded from a TSV file joined to country geometries.

Sep 27, 2020
Loading thumbnail…

Choropleth map

This choropleth map visualizes COVID-19 cases, deaths, and recent 14-day case counts by country, using color to encode case numbers and hover tooltips to reveal detailed statistics. The map uses `d3.geoNaturalEarth1` projection with `d3.geoPath` to render world geography, while `d3.scaleOrdinal` with `schemeSpectral` assigns colors to case values. Data is loaded from a TSV file and TopoJSON world atlas, processed with `topojson.feature`, and rendered as SVG paths. A custom color legend and `d3.zoom` are also implemented.

Sep 27, 2020
Loading thumbnail…

Choropleth map

A choropleth map of COVID-19 cases by country, with each nation colored on a spectral scale via `d3.scaleOrdinal` and `d3.schemeSpectral`. Hovering highlights a country in red, and a click-drag zoom uses `d3.zoom` with a Natural Earth projection (`d3.geoNaturalEarth1`) and `d3.geoPath`. Data loads from a CSV and TopoJSON using `d3.csv`, `d3.json`, and `topojson.feature`; a custom color legend renders SVG circles and text.

Aug 31, 2020
Loading thumbnail…

Circles on a map

This example visualizes the global spread of COVID-19 cases on a date in August 2020, plotting semi-transparent red circles on a natural Earth projection map. Circle size encodes case counts using a square-root scale, while hover tooltips show country names and totals. Built with React and D3 v5, it uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for navigation, with TopoJSON world data and CSV time-series data from a COVID-19 repository. Custom legends display color and size scales via `d3.scaleOrdinal` and `d3.scaleSqrt`.

Aug 31, 2020
Loading thumbnail…

Circles on a map

This example displays total COVID-19 cases per country on a natural Earth projection map, using red circles scaled by case count and a legend for reference. It loads data from a GitHub CSV and world-atlas TopoJSON via `d3.csv` and `topojson.feature`, then projects centroids with `d3.geoCentroid` and `d3.geoNaturalEarth1`. The visualization is built with React and rendered as SVG, using `d3.scaleSqrt` for circle sizing, `d3.scaleOrdinal` with `schemeSpectral` for the color legend, and custom `sizeLegend`/`colorLegend` components.

Jul 29, 2020
Loading thumbnail…

Choropleth map

This choropleth map displays countries colored by economic classification, sourced from the world-atlas dataset. Built with React and d3.v5, it uses d3.geoNaturalEarth1 and d3.geoPath to project and render GeoJSON features. A color legend, created with a custom d3.scaleOrdinal component, maps categories to a spectral scheme. D3 zoom interactions allow panning and scaling, while CSS hover states highlight individual countries.

May 20, 2020
Loading thumbnail…

Color and size legends

This example demonstrates two types of legend encodings for data visualization: a color legend mapping ordinal categories to hues, and a size legend scaling circles according to a square-root scale. The color legend displays fruit names with distinct colors, while the size legend shows numeric ticks with proportional circle radii. Built with D3 v5, the visualization uses `selectAll` and `.enter().append()` to construct SVG groups, circles, and text elements. Custom `colorLegend` and `sizeLegend` functions control the layout, with positioning handled via `attr('transform', ...)` and scales defined by `scaleOrdinal` and `scaleSqrt`.

May 19, 2020
Loading thumbnail…

Color and size legends

This example demonstrates a color legend with two categorical entries, “apple” and “lemon,” each represented by a colored circle and a text label. Using D3.js v5, the `scaleOrdinal` API maps the categories to distinct colors, while a custom `colorLegend` function positions the circles and labels horizontally across the SVG canvas. The visualization is rendered as SVG elements, with the legend items spaced based on an offset calculation and the height parameter passed from the parent SVG.

May 18, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the ten most populous countries in 2018, based on data from the UN's World Population Prospects 2017. The D3 v5 visualization uses a linear scale for the x-axis to represent population values and a point scale for the categorical y-axis listing country names, with circles sized at a fixed radius. The rendering relies on SVG, with axes generated using `axisBottom` and `axisLeft`, and includes custom tick formatting to abbreviate large numbers.

May 18, 2020
Loading thumbnail…

Making a bar chart

This example uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render a horizontal bar chart of country populations from a CSV file. The data is loaded asynchronously and parsed to numeric population values. Rectangles are appended to an SVG group, positioned with the band scale and sized by the linear scale, while axes are added via selection calls. The chart displays ten countries in descending order of population, with steelblue bars and light styling.

May 18, 2020