Oliverlee1003

@Oliverlee1003·3 public vizzes

Let's make a face with D3.js!

This interactive choropleth map displays global income groups using a natural Earth projection, with a linked color legend that filters highlighted countries on click and enables zooming via `d3.zoom`. It loads world topology from the World Atlas TopoJSON and tab-separated metadata, processing features through `d3.geoPath` and `d3.geoNaturalEarth1`. Colors are assigned with `d3.scaleOrdinal` and `d3.schemeSpectral`. The legend, built with custom SVG groups, toggles selection states and updates opacity, while the map’s sphere and country paths respond to hover and interactive filtering.

Feb 25, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green against a blue sphere background. It uses D3 v5 to load GeoJSON data from the world-atlas TopoJSON file, converting it with `topojson.feature`. The map is projected using `d3.geoNaturalEarth1` and drawn with `d3.geoPath`. A separate path represents the sphere outline. The visualization updates dynamically once the data loads, adding country paths to the SVG.

Feb 21, 2020

Loading thumbnail…

HTML Starter

This example presents a minimal HTML page that displays the text “Hello HTML 123” in large, centered type. It uses a plain `<!DOCTYPE html>` document with an embedded `<style>` block to set the body’s text alignment and font size. The page includes no JavaScript or external libraries, serving solely as a basic starter template for HTML rendering.

Jan 17, 2020