Cars Report

100%

✓ Published0🌍 Public

Last edited Mar 3, 2020

Created on Mar 3, 2020

This example displays a world map of cities with populations over 50,000, using data from Simplemaps’ World Cities Database and country boundaries from World Atlas TopoJSON. It renders the map with d3.geoPath, adding graticules and styled land and sphere fills. The page also incorporates a car dataset, parsing JSON with JSON.parse and outputting the first car’s make into a pre element, while CSS styles the map and text with Poppins font and circular markers.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

The dashboard displays a global map highlighting cities with populations exceeding 50,000, sourced from Simplemaps, layered over country boundaries from World Atlas TopoJSON. The visualization renders geographic features using d3.geoPath and includes graticules for spatial reference. The interface presents a title, “Cars Report,” and dynamically inserts a “Hello World” message into the DOM via plain JavaScript. The styling is handled with a clean, modern aesthetic using the Poppins font, while the map and city data are processed and drawn using D3’s mapping utilities.

DD2552

92% match

Loading thumbnail…

Cars Report

This visualization presents a world map highlighting cities with populations over 50,000, with circles sized by population. The map uses a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, displaying land boundaries, graticules, and country interiors. City data comes from Simplemaps, loaded as CSV with `d3.csv`, while country boundaries use TopoJSON from the world-atlas package. The visual style, including translucent teal circles and light gray fills, is defined in CSS.

Cchrille0o

88% match

Loading thumbnail…

Cars Report

This example displays a choropleth map of world countries, sized and colored by their land area and continent. It renders each country as a separate SVG path within its own stereographic projection, scaled to fit its bounding box. The visualization uses the d3.geo.stereographic projection and d3.geo.path to draw the paths, with area data from `areas.csv`, country names from `world-country-names.tsv`, and continent assignments from `continents.csv`. Hovering reveals a tooltip with the country name, area in square kilometers, rank, and continent.

YYuanhongShi

80% match

Loading thumbnail…

lets make a Map

This example displays a world map rendered as SVG paths, with countries filled in light green against a dark blue spherical backdrop. It also demonstrates asynchronous data loading and report generation from a JSON dataset of car listings. The visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate country outlines from TopoJSON data fetched via `d3.json` from the world-atlas package, and converts TopoJSON to GeoJSON using the `feature` function from topojson. Car data is retrieved through a custom promise-based `getCars` function.

Rrazidazi88

78% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded dataset, rendering it as large text in an HTML `<pre>` element. It demonstrates loading D3 via UNPKG, though the primary functionality uses local ES6 modules: `cars.js` exports parsed JSON data, and `index.js` imports it to update the DOM through `document.getElementById`. The visualization is minimal, showing a single string value rather than a chart, with styling provided by an external `styles.css` and inline font-size attributes.

YYumpman

76% match

Loading thumbnail…

Cars report

This example demonstrates how to display a car make from a static JSON dataset. The visualization imports a small array of car objects, accesses the first entry’s make property, and renders that text into a large HTML pre element. The page uses a custom Google Font and a dark blue background via CSS. The code relies on the cars module’s exported parsed JSON and manipulates the DOM with vanilla JavaScript through document.getElementById.

Cclara6

76% match

Loading thumbnail…

Cars Report

Cars Report displays the make of the first car in a hardcoded JSON dataset by rendering it as large text in the browser. The example demonstrates a minimal D3 version 6 setup, importing car data from a separate `cars.js` module and using `JSON.parse` and `JSON.stringify` to handle the data. The `index.js` file accesses the `make` property and writes it to a DOM element via `textContent`, while `index.html` provides the page structure and loads the bundled script.

DDaniel Walder

75% match

Loading thumbnail…

world map w/ cities

This example presents a world map visualization of cities with populations exceeding 50,000. It uses a React framework with SVG rendering, employing d3-geo-projection’s geoNaturalEarth1 projection and d3-geo’s geoPath to draw landmasses, country boundaries, graticules, and geographic lines. City locations are plotted as circles from Simplemaps’ World Cities Database, while country and land data come from World Atlas TopoJSON. The visualization includes hover tooltips showing country names, with styling applied through CSS.

Zzach b.

75% match