Sized Points on a Map

100%

Sized Points on a Map

✓ Published0🌍 Public

Last edited Jun 9, 2020

Created on Jun 9, 2020

Two legends demonstrate how to encode data with color and size scales on an SVG map. The color legend uses a `d3.scaleOrdinal` to map fruit categories to distinct colors, while the size legend applies a `d3.scaleSqrt` to represent numeric values through circle radii. Both legends are rendered with custom functions, `colorLegend` and `sizeLegend`, which append groups containing circles and text labels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and size legends

This example demonstrates the use of two separate legends to map data values to visual encodings. A color legend shows categorical fruit names with a d3.scaleOrdinal scale, while a size legend represents numbers from 0 to 10 with a d3.scaleSqrt scale that maps values to circle radii. The legends are rendered as SVG groups using custom reusable functions, with circles and text labels arranged vertically. The underlying data scales and spacing are defined in the JavaScript code, with fruit categories and numeric ranges specified directly.

Ggorfoula

91% match

Loading thumbnail…

Colour and Size Legends

This example demonstrates two types of map legends rendered as SVG. A color legend for an ordinal scale shows four fruit categories with distinct colors, while a size legend for a square-root scale displays five circular symbols whose radii encode numeric values. The code builds reusable legend components using D3 v5 selection methods, including `selectAll`, `enter`, and `merge`, with scales from `scaleOrdinal` and `scaleSqrt`. Both legends are positioned manually via `translate` and styled with CSS classes.

Ppkcesar

90% match

Loading thumbnail…

Color and size legends

This example demonstrates two legends for mapping data to visual encodings. A color legend uses a d3.scaleOrdinal scale to map categorical fruit names to distinct colors, while a size legend uses a d3.scaleSqrt scale to map a numeric range to circle radii. The legends are custom reusable components, created with d3.selection and appended to an SVG canvas, with each tick rendered as a group containing a circle and a text label.

Aarths-glitch

90% match

Loading thumbnail…

Color and Size Legends

Two customizable legends demonstrate how D3 v5 encodes data through color and size. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend employs `scaleSqrt` to represent numerical values through circle radii. Both legends are constructed through reusable functions that bind data to SVG groups, with legends rendered as circles and text labels. The color legend applies `attr("fill", colorScale)`, while the size legend filters zero values from its ticks and spaces circles vertically.

Jjay

90% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend types rendered as SVG: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to encode numeric values through circle radii. The color legend uses `d3.scaleOrdinal` with domains for apple, lemon, lime, and orange, while the size legend employs `d3.scaleSqrt` with tick marks generated from the scale. Both legends are built procedurally using custom functions (`colorLegend` and `sizeLegend`) that append grouped circles and text elements, with spacing and offset parameters controlling layout. The visualization is constructed with D3 v5 and rendered entirely in SVG, with styling applied via CSS classes.

TThomas Seberechts

90% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create separate legends for ordinal color scales and quantitative size scales in D3 v5. The color legend uses a `scaleOrdinal` with fruit names mapped to distinct colors, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends are rendered as SVG groups using custom reusable functions that bind data to enter/merge/exit selections, positioning circles and text labels with transform attributes and spacing offsets.

MMounikaBeerelly

89% match

Loading thumbnail…

Color and size legends

This example demonstrates two custom SVG legends: a color legend for ordinal data and a size legend for quantitative data. 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 circles and text labels, positioned via transform attributes. The reusable functions colorLegend and sizeLegend accept configuration props like spacing and textOffset, and the size legend uses d3.scaleSqrt.ticks to generate labeled values.

AAjit Singh

89% match

Loading thumbnail…

Color and Size Legend

Two reusable D3 legends demonstrate how to encode data through color and size. The color legend uses `d3.scaleOrdinal` to map fruit names to categorical colors, while the size legend uses `d3.scaleSqrt` to map numeric values to circle radii. Both legends are implemented as custom D3 functions that append SVG circles and text elements, using `.merge()` for efficient updates and `.exit().remove()` for cleanup. The rendering is entirely SVG-based within a single `<svg>` element, styled with CSS classes.

EEdoardoRegini

89% match