test gj

100%

✓ Published0🌍 Public

Last edited Jul 29, 2016

Created on Jul 29, 2016

This example displays a map of geographic points representing cities, towns, and neighborhoods in the Seattle and Victoria regions, sourced from a GeoJSON file. It uses Vue to manage the application and renders the map with D3.js, likely employing `d3.geoPath` to project the coordinates onto a canvas or SVG. The visualization distinguishes place types such as cities, towns, and localities, with population data available for some features, though no interactive or animated behavior is demonstrated.

AI-generated description

Similar vizzes

Loading thumbnail…

My map

This map displays global cities as labeled points overlaid on a Mercator-projected world map. It uses d3.geoPath to render country boundaries from a GeoJSON file and d3.geoMercator to project coordinates. City data from a CSV file is plotted with SVG circles and text labels. The visualization is built with React, uses SVG rendering, and loads both datasets via Promise.all.

VVineel Gannu

71% match

Loading thumbnail…

test2

This example displays a map of the United States rendered as SVG paths, with each state outlined using GeoJSON data loaded from an external gist. It shows the geographic boundaries without additional styling or interaction. The visualization relies on D3 v3, specifically `d3.geo.path()` to convert GeoJSON features into SVG path data, and `d3.json()` to fetch the state geometry. The map is drawn into an SVG container with fixed width and height, using a simple data join to append one `<path>` element per state. No choropleth or data-encoding is applied, so the result is a plain state boundary map.

FFrieseWoudloper

71% match

Loading thumbnail…

Simplemaps: World Cities Database

This example visualizes a world map of cities with populations over 50,000, using a dataset sourced from Simplemaps. It plots each city as a point positioned by latitude and longitude, with point size reflecting population. The visualization uses Vue for the application structure and D3’s `d3.geoPath` for rendering map outlines, while city markers are drawn on a canvas using `getImageData` to sample pixel colors for styling.

CCurran Kelleher

70% match

Loading thumbnail…

Gist 6ce6b2a6ecda4579b64f

This visualization uses a Vue.js interface to display a list of city and state locations, likely from a dataset of place names. It shows a static, text-based table of these locations, with no visible map or chart. The code relies on standard DOM rendering through Vue’s template system, without additional data-viz libraries like D3 or Three.js. The rendering approach is a simple list, and the data source appears to be a CSV of location strings. No interactive or dynamic behavior is evident beyond the initial display.

CCaged

70% match

Loading thumbnail…

SVG Globe with cities

An interactive SVG globe displays roughly 48,000 cities from the MaxMind WorldCities database, with each city shown as a red point. Users can pan and zoom the globe, which uses `d3.geoOrthographic` and `d3.geoPath` to render the sphere, graticule, and country borders. The implementation leverages `d3.zoom` for navigation, and dynamically redraws the paths on each zoom or drag event. The city data is loaded from a CSV and plotted as a single `MultiPoint` feature, with population values available but not visually encoded.

SSazerland

70% match

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how to work with geospatial data using d3.js projections, visualizing trail points from a GeoJSON file on a Mercator projection. The code uses the d3.geo.path() function with a d3.geo.mercator() projection to render SVG paths, and employs d3.json() to load the data. The map displays points with a transform applied, while path elements are styled with a gray fill and white stroke that turn red on hover.

SSwampGuzzler

69% match

Loading thumbnail…

test

This example displays a choropleth-style map of the United States, rendering each state as a separate SVG path. The visualization shows the geographic boundaries of all states by loading GeoJSON data from a remote gist. Using D3 v3, the code applies `d3.geo.path()` to convert GeoJSON features into SVG path data, then appends each path to an SVG container with a red border. The map is static, with no interactivity or color encoding, serving as a basic demonstration of D3's geographic projection capabilities.

FFrieseWoudloper

69% match

Loading thumbnail…

test

This example visualizes a single point feature from a GeoJSON file, marking the location of Friedrichstraße in Berlin. The map uses D3’s `d3.geoPath` to render geographic outlines, while the point itself is drawn with SVG markers. The feature’s properties include an image carousel with historical photos, toggled by user interaction. The code relies on D3’s data binding and event handling to update the displayed images, and the geographic coordinates are parsed from string values in the GeoJSON. The rendering approach uses a standard Canvas or SVG projection, though the specific projection library is not shown. The source is a gist by CliffordAnderson, with data embedded directly in the file.

CCliffordAnderson

69% match