Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Mmclee933
Last edited Oct 3, 2020
Created on Oct 3, 2020
Forked from World Map

This visualization displays a scatter plot of environmental data from the Data Canvas Sense Your City dataset, with each point positioned by its geographic coordinates. The plot is rendered over a world map built from the TopoJSON file `countries.gro.json`, using `d3.geoPath` to project and draw the country outlines. Data points are plotted using d3 scales and SVG circles, with the map projection and scatter plot layers combined in a single d3.js visualization. The example leverages d3’s data-binding and geographic projection APIs to overlay sensor readings on a global context.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This visualization displays a world map with a scatter plot overlay of city locations, using data from the Data Canvas Sense Your City dataset. The map renders geographic features with d3.geoPath and geoNaturalEarth1 projections, including graticules, landmasses, and country interiors. City points appear as semi-transparent teal circles projected onto the map using their latitude and longitude coordinates. The React-based application loads world atlas topology from unpkg and city CSV data, then renders everything as SVG elements through D3 v7's geo and projection utilities.

JJun Suzuki
78% match
Loading thumbnail…

Points on a Map

This example visualizes the geographical distribution of cities from the Data Canvas Sense Your City Dataset, plotting each city as a point on a natural Earth projection of the world. The map is rendered in SVG using React, with d3.geoNaturalEarth1 and d3.geoPath drawing the sphere, graticules, landmasses, and country interiors from TopoJSON data. A supplementary scatter plot layer would likely show quantitative city attributes, though the current code only displays the spatial positions. The styling uses custom CSS classes for land, sphere, and graticule fills.

CCodeDuckie99
77% match
Loading thumbnail…

Untitled

This visualization displays a world map using a Natural Earth projection, with each country rendered as a white SVG path with green borders using D3 v4’s `d3.geoPath` and TopoJSON data from `world-110m.json`. Country names from `world-country-names.csv` are joined to the geometry via their IDs. Hovering over a country changes its fill to grey, thickens its stroke, and shows a tooltip with the country’s name that follows the mouse cursor.

NNecklessCage
77% match
Loading thumbnail…

Untitled

This example displays a choropleth world map colored by the reported happiness score from a CSV dataset covering over 80 countries. The visualization loads world topography via TopoJSON, joins it with the tabular data, and maps each country’s score to a sequential blue color scale using `d3.scaleSequential` and `d3.interpolateBlues`. It renders the geographic boundaries as SVG paths through `d3.geoPath` with a Mercator projection. The underlying libraries are D3 v6 and the world-atlas TopoJSON collection.

NNikithakatta30
77% match
Loading thumbnail…

Untitled

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles scaled by population size. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations are loaded via d3.csv, with circles positioned using the projection and sized through a linear scale. The SVG is built in React, with static styling applying a light fill to land and subtle borders.

VVineel Gannu
77% match
Loading thumbnail…

Untitled

This example shows a world map rendered as gray countries with white borders, overlaid with white circles marking populated places from Natural Earth data. Hovering over a country or city highlights it in pink or blue, respectively. The visualization uses D3 v3's `d3.geoMercator` projection and `d3.geoPath` to draw GeoJSON features from two remote sources: world-110m.geojson for countries and ne_50m_populated_places_simple.geojson for places. Circles are positioned via the projection’s coordinates and respond to mouseover and mouseout events.

JJumblii
77% match
Loading thumbnail…

Untitled

A globe projection of the world renders country polygons onto a Canvas element using `d3.geoPath` and `d3.geoOrthographic`. It displays land masses in dark blue, water in light gray, and a graticule overlay. The globe auto-rotates slowly, but dragging it with the mouse adjusts the projection angles, and hovering highlights a country in a different color while showing its name. The visualization loads world geography as TopoJSON from a remote source and country names from a TSV file, using `d3.geoGraticule10`, `d3.drag`, and the `versor` library for rotation calculations.

AAbhishek Singh
76% match
Loading thumbnail…

Untitled

A choropleth world map visualizes mock document counts by country, with countries colored on a scale from green to red based on their associated values. The map renders in SVG using the Mercator projection via `d3.geo.mercator` and `d3.geo.path`, with graticule lines drawn for reference. TopoJSON data from `world.json` is loaded and merged with aggregation data containing country codes and document counts, then filtered to exclude Antarctica. Country boundaries appear as white strokes, and users can hover to reveal labels, though labels remain hidden by default.

FFatemeh Safarlou
76% match