caydener

@caydener·11 public vizzes

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by economy group, with an interactive color legend that filters the map by hover or click. Clicking a legend item highlights matching countries and dims the rest, while clicking again clears the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for country shapes, d3.scaleOrdinal with a schemeSpectral range for coloring, and loads world data from the world-atlas package. A d3.zoom interaction supports panning and zooming the map.

Sep 21, 2019

Loading thumbnail…

Map with Selectable Countries

This example shows a choropleth map of world countries colored by economic grouping, with interactive selection: clicking a country dims all others and highlights the chosen region, and clicking again clears the selection. A color legend filters the map to a single category. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` for rendering SVG paths, plus `zoom` for panning. Data comes from TopoJSON and TSV files via the world-atlas package, with colors assigned by `scaleOrdinal`.

Sep 21, 2019

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with a color-coded legend that doubles as an interactive filter. Clicking a legend item highlights matching countries and dims all others on the map. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for the map projection, while d3.scaleOrdinal with schemeSpectral drives the color encoding. Hovering over legend items updates their opacity, and d3.zoom enables pan and zoom interactions. Country data comes from the World Atlas TopoJSON and TSV datasets loaded via d3.json and d3.tsv.

Sep 20, 2019

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by economic grouping, with a legend of color categories that users can click to highlight matching regions and fade all others. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, while the legend employs scale-ordinal colors from `schemeSpectral` and interactive click handlers. Panning and zooming are enabled through `d3.zoom`. The geographic data comes from the World Atlas TopoJSON, with ISO country mappings joined from TSV metadata.

Sep 20, 2019

Loading thumbnail…

Map with Selectable Countries

This map visualizes world countries colored by economic classification using a categorical color scale. Clicking a country highlights it while dimming all others, and clicking again deselects it. The map uses d3.geoNaturalEarth1 projection with d3.geoPath to render SVG paths from TopoJSON world-atlas data, while d3.zoom enables panning and zooming. A color legend with clickable swatches filters the map, and the visualization updates reactively through D3 data joins.

Sep 20, 2019

Loading thumbnail…

Color and Size Legends

This example demonstrates two legend styles rendered side by side in SVG. A color legend uses a d3.scaleOrdinal to map categorical fruit names to distinct hues, with circles and offset labels. A size legend employs d3.scaleSqrt to map a continuous numeric domain to circle radii, generating ticks via sizeScale.ticks. Both legends are built with reusable functions that bind data to SVG groups, circles, and text elements, with styling applied through CSS classes.

Sep 19, 2019

Loading thumbnail…

by:cayden

A choropleth map colors countries by economic grouping, with an interactive color legend that filters the map when a category is clicked. Hovering highlights individual countries, and clicking a legend item dims non-matching countries while brightening the selected group. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render SVG paths, with `d3.zoom` for panning and `d3.scaleOrdinal` with `schemeSpectral` for color encoding. Data comes from the World Atlas TopoJSON and TSV files.

Jul 19, 2019

Loading thumbnail…

Map with Selectable Countries

This interactive map displays countries color-coded by economy type using D3’s `geoNaturalEarth1` projection and `geoPath`. Clicking a country highlights it while dimming others, and clicking again deselects it; a `scaleOrdinal` legend with `schemeSpectral` colors supports filtering. The visualization uses topojson data from world-atlas and applies a zoom transform via d3.zoom. Selection state is managed by an internal `selectedCountryId` variable, updated through click handlers on country paths and legend ticks.

Jul 19, 2019

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their economic classification, with a color legend showing ordinal categories from the Spectral scheme. The visualization loads world geometry from TopoJSON and joins it with tabular data from a TSV file. Using d3.geoPath with a geoNaturalEarth1 projection, it renders SVG paths that support zooming via d3.zoom. Hovering highlights individual countries, while a custom colorLegend component displays the color scale with circles and text labels.

Jul 19, 2019

Loading thumbnail…

by:cayden

This bar chart displays the top 10 Lego builds by the number of pieces used, with dark red bars representing each build's piece count on a linear scale. The visualization, rendered as an SVG using D3 v5, loads data from a CSV file containing country and population columns, where the population values are multiplied by 1000. The chart uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` with a custom format to label the axes.

Jul 19, 2019

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups, with each country colored according to its economic classification from the world-atlas dataset. The visualization uses a D3 v5 SVG rendering with a natural Earth projection, allowing users to pan and zoom through the interactive geoPath features. The map employs an ordinal color scale with a spectral scheme, while a custom legend (colorLegend.js) displays the categorical colors with circle markers. The data loads asynchronously from TSV and TopoJSON files via Promise.all, with country names and income group values shown as tooltips on hover.

Jul 16, 2019