Dolbyref113

@Dolbyref113·8 public vizzes

Untitled

An orthographic globe projects world landmasses and graticule onto a Canvas, with countries highlighted in red on hover and named in a header. The globe auto-rotates using a d3.timer, and users can drag to spin it via versor-based quaternion rotation, pausing rotation after interaction. Data comes from the world-atlas TopoJSON and a world-country-names TSV, rendered using d3.geoPath and d3.geoOrthographic within the d3-geo library.

Jun 26, 2020

Loading thumbnail…

Map with Selectable Countries

This interactive world map uses a choropleth encoding to visualize country-level data, tinting each nation dark blue based on values from the UN Population Estimates 2017 dataset. A click on any country triggers a smooth d3.zoom animation that magnifies the selection, while a color legend allows filtering of data categories. The visualization, rendered as SVG, is built with d3.geoPath and d3.geoNaturalEarth1 projections, all managed through the d3.selection API.

Mar 17, 2020

Loading thumbnail…

Map with Selectable Countries

This interactive choropleth map displays global population data, allowing users to see which countries have a specific economic characteristic (marked "has") highlighted within the geographic layout. Built with D3 v5, the visualization uses the topojson library to convert GeoJSON world boundaries into SVG paths, while population statistics from the UN 2017 medium variant dataset are joined to country features via CSV parsing. The map leverages D3's projection and geographic path functions to render the selectable country polygons, with the color legend providing a visual key for the economic attribute.

Mar 17, 2020

Loading thumbnail…

Choropleth Map

This example presents an interactive choropleth map using a globe projection, where users can select a country from a dropdown list to rotate the globe and focus on that specific location. The visualization also shows a color legend built with custom D3 code, and it includes a tooltip that displays the country name on mouseover. The map is constructed with D3's geo projection and path functions, TopoJSON for geographic data processing, and static JSON and TSV files from the world-atlas package. The globe is rendered using the orthographic projection, with the styling defined in CSS.

Mar 17, 2020

Loading thumbnail…

Choropleth Map

A choropleth map of the world colors each country by its economy category, with a legend showing the ordinal color scale. The visualization uses D3.js with a natural Earth projection and topojson for geographic data. Hovering over a country highlights it in red and displays a tooltip with its name and economy value. The map features zooming via D3’s zoom event, and the color legend is built from D3’s `scaleOrdinal` with blue color schemes.

Mar 17, 2020

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays U.S. state-level data with interactive filtering, allowing users to select a category and see the corresponding color shading update across the map. The visualization uses D3 v5 and TopoJSON to render the geographic boundaries via `d3.geoPath`, while a color legend component updates dynamically based on the selected filter. State polygons are drawn in an SVG container, and the filtering logic re-applies a color scale to the shapes. The map loads and processes CSV data with a custom utility, and styling is defined in a separate CSS file.

Mar 9, 2020

Loading thumbnail…

Map It

This visualization uses a natural Earth projection and an ordinal color scale to map countries by their type, with a color legend and zoom interaction. Built with D3 v5, it uses `geoPath`, `geoNaturalEarth1`, `scaleOrdinal`, and `schemeSpectral` to render SVG paths, loading country data from the world-atlas TopoJSON and TSV files. The map colors each country based on its `properties.type`, and hovering highlights the country in red. A color legend shows the scale’s domain, and zoom transforms are applied via `zoom()` events.

Mar 4, 2020

Loading thumbnail…

Map it

This map visualizes world countries colored by their type, with a legend showing the categorical color scale. Built with d3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to render the TopoJSON world-atlas data, while d3.zoom enables panning and zooming. Hovering a country displays its name and type in a tooltip, and the d3.scaleOrdinal with schemeSpectral assigns colors.

Mar 4, 2020