waqastufail

@waqastufail·10 public vizzes

UK HE Providers

This visualization of UK Higher Education Providers uses a natural Earth projection to map the geographic distribution of institutions. It displays each provider as a circle positioned by its centroid coordinates, with circle size encoding the population attribute and color representing other categorical data. The visualization incorporates interactive zooming functionality through `d3.zoom`, enabling users to explore the map at different scales. Rendering employs `d3.geoPath` for country boundaries and `d3.scaleSqrt` for proportional symbol sizing, with a size legend and color legend using `d3.scaleOrdinal` and `d3.schemeSpectral`. Data is loaded from external CSV and TopoJSON sources, processed via `d3.csv` and `topojson.feature`.

Mar 27, 2020

Loading thumbnail…

Circles on a Map

This visualization maps UK higher education providers as circles on a natural Earth projection, with circle area proportional to each provider’s student population. Users can pan and zoom the map and hover over country paths to see tooltips. The code combines `d3.geoPath` for geographic outlines, `d3.geoCentroid` for positioning circles, and `d3.scaleSqrt` for sizing, while `d3.zoom` enables interaction. Data comes from a CSV joined to world-atlas TopoJSON, with a custom size legend built using D3 scales.

Mar 26, 2020

Loading thumbnail…

Circles on a Map

This visualization displays UK higher education providers as circles on a world map, with circle area representing the number of students with known disabilities. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render country boundaries, while d3.scaleSqrt maps population values to circle radii. Users can pan and zoom the map using d3.zoom, and hovering over country patches highlights them, though circles have pointer events disabled. Data comes from a CSV dataset joined to TopoJSON world geometry, with a size legend showing population scale and a separate color legend for categories.

Mar 26, 2020

Loading thumbnail…

Circles on a Map

This visualization maps higher education providers across the UK, using circles positioned at geographic centroids to represent the number of students with known disabilities. The circle area scales with this population value via a square-root scale, and a size legend with formatted ticks clarifies the mapping. Users can pan and zoom with d3.zoom, while hovering over region paths highlights them. The code uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering, and loads data from a CSV describing provider characteristics joined to TopoJSON world boundaries.

Mar 26, 2020

Loading thumbnail…

Circles on a Map

This visualization shows global population distribution for 2018 by placing semi-transparent circles at the centroid of each country on a natural Earth projection map, with circle area scaled to population. Users can pan and zoom via d3.zoom, and hovering over a country reveals its exact population in a tooltip. The visualization uses d3.geoPath to render country boundaries from TopoJSON and couples them with CSV data, while a custom size legend with d3.scaleSqrt and d3.format communicates the circle sizes.

Mar 26, 2020

Loading thumbnail…

Circles on a Map

This example visualizes population by country using scaled circles overlaid on a natural Earth projection map, with circle area proportional to each country’s 2018 population. Pan and zoom are enabled via d3.zoom, and hovering over a country reveals its exact population through a title tooltip. The map is rendered as SVG using d3.geoPath and topojson, while a d3.scaleSqrt maps population values to circle radii. A size legend generated with custom d3 code displays population ticks, and the data is loaded from a CSV and a TopoJSON world atlas file.

Mar 26, 2020

Loading thumbnail…

3D Scatter Plot

This example visualizes a 3D scatter plot of iris flower data, mapping female, male, and no-known-disability measurements to the x, y, and z axes while coloring points by species. Points render as circular sprites generated on a Canvas texture and composited with Three.js’s WebGLRenderer. D3’s `scaleLinear` maps data ranges to a unit cube, while `scaleOrdinal` assigns categorical colors from `schemeCategory10`. D3’s `zoom` behavior handles pan-based rotation, and `requestAnimationFrame` adds slow continuous rotation. Data loads via `d3.csv` from a remote GitHub gist.

Mar 26, 2020

Loading thumbnail…

3D Scatter Plot

This example shows a 3D scatter plot of iris-like data, with each point colored by species using an ordinal color scale. The visualization maps female, male, and no-known-disability measurements to the x, y, and z axes, rendered as circular sprites in a Three.js scene. D3.js handles data loading via `csv`, scales with `scaleLinear` and `scaleOrdinal`, and provides zoom interaction for drag-based rotation, while a WebGL renderer animates continuous slow rotation.

Mar 26, 2020

Loading thumbnail…

3D Scatter Plot

A 3D scatter plot displays data points from a CSV dataset, mapping three quantitative dimensions to x, y, and z axes while using color to distinguish categorical groups. The visualization uses Three.js with WebGL rendering to create and animate sphere sprites, and D3.js for data loading, linear scaling, and ordinal color mapping. Points are continuously rotated through a slow animation, and users can pan with mouse interaction to change the viewing angle. The scene uses a perspective camera with sprite-based circle markers for each observation.

Mar 26, 2020

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes a dataset of higher education providers using Three.js and D3 v5, mapping three columns to x, y, and z coordinates and coloring points by species. The code scales each dimension to a unit cube, renders circles as WebGL sprites with CanvasTexture, and animates continuous rotation via D3’s zoom interaction’s `translateBy` method. Users can pan to orbit the scene, with rotation limited to prevent pole inversion, using data from a CSV loaded with `d3.csv`.

Mar 26, 2020