ShareSha

@ShareSha·6 public vizzes

Map with Legends !

A choropleth map of global economies uses d3.geoNaturalEarth1 and d3.geoPath to render countries from TopoJSON data, with each nation’s fill color derived from a d3.scaleOrdinal using the schemeSpectral range. A custom color legend, built with SVG circles and text, displays the economy categories, while d3.zoom enables panning and zooming. Hovering highlights a country in red.

Apr 14, 2020

Loading thumbnail…

Color and Size Legends !

This example demonstrates customizable color and size legends for scatterplot-style data visualization. The color legend maps fruit names to distinct hues using d3.scaleOrdinal, while the size legend uses d3.scaleSqrt to translate numeric values into circle radii. Both legends are rendered as SVG groups, with reusable functions colorLegend and sizeLegend managing tick placement, circle attributes, and text labels. The implementation leverages D3 v5 data joins to update the legend elements dynamically.

Apr 14, 2020

Loading thumbnail…

Color Legends !

This example presents a reusable color legend component built with D3 v5. The visualization displays four categorical color swatches—apple, lemon, lime, and orange—using circles filled via a `scaleOrdinal` color scale. The `colorLegend` function, exported from `colorLegend.js`, appends grouped circle and text elements to an SVG, with spacing, text offset, and circle radius configured through its props. The legend is transformed into position using a `translate` attribute and rendered with the d3 `select` and `call` methods.

Apr 14, 2020

Loading thumbnail…

Blank Canvas !

A full-screen blank canvas is rendered as a single rounded rectangle filling the browser viewport. The example demonstrates minimal SVG setup with D3 v5, using `d3.select` to size the `<svg>` element to the document body’s dimensions and appending one `rect`. The code relies on `document.body.clientWidth` and `clientHeight` for sizing, while static CSS positions the body to prevent scrolling. No data or interaction is shown; the piece simply presents an empty, neutral space ready for further visualization work.

Apr 14, 2020

Loading thumbnail…

World Map Zoom Feature !

This example shows an interactive world map that supports zooming, with countries colored white on a blue sphere and highlighted in red on hover. The map displays country names as tooltips sourced from a TSV file. It builds the map using d3.geoPath with a d3.geoNaturalEarth1 projection, and enables zoom behavior through d3.zoom. The map renders as SVG paths generated from TopoJSON world data via the topojson library, with interaction managed through the zoom event handler.

Apr 14, 2020

Loading thumbnail…

World Map !

This example shows a world map of countries rendered as filled white shapes with thin black borders on a blue sphere, providing a simple geographic overview. It uses d3.geoPath with the geoNaturalEarth1 projection to generate SVG paths for each country. The geographic data comes from the world-atlas package’s countries-110m.json, and the code employs the topojson feature function to convert the TopoJSON geometries into GeoJSON features. The sphere background is created separately, while all paths are drawn using SVG within the d3.v5 framework.

Apr 14, 2020