Rolftest

@Rolftest·5 public vizzes

Fork of Color and Size Legends

This example demonstrates two reusable legend components rendered side-by-side: a color legend for ordinal data (apple, lemon, lime, orange, kivi) and a size legend for a square-root scale ranging from 0 to 10. The color legend displays colored circles with labels, while the size legend uses semi-transparent black circles of varying radii. Both are built with D3 v5’s `scaleOrdinal`, `scaleSqrt`, and `selection.call()`, generating SVG groups with circle and text elements styled via CSS classes.

Oct 23, 2021

Loading thumbnail…

4 World

This example shows a world map with countries rendered in light green on a blue sphere, using a natural Earth projection. Hovering over a country turns it red and reveals its name as a tooltip. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, then projects it with d3.geoNaturalEarth1 and d3.geoPath. Pan and zoom interactions are enabled through d3.zoom, while the map is drawn as SVG paths within a scalable vector graphic.

Oct 23, 2021

Loading thumbnail…

3 World Countries Tree

This visualization displays a hierarchical tree of world countries, grouping them by continent and subregion. The data, sourced from a JSON file, is organized from a root "World" node down through regional categories. D3.js v5 is used to render the structure as horizontal links and text labels on an SVG canvas. The implementation employs D3's `tree` layout, `hierarchy`, `linkHorizontal`, and `zoom` APIs to create the expandable tree. The display features a custom Playfair Display font and applies a font-size based on the node's depth in the hierarchy.

Oct 23, 2021

Loading thumbnail…

2 Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes, using a circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth. The example demonstrates fundamental D3.js DOM manipulation and animation by using `d3.select` to target the SVG, `d3.append` to add elements, and chained `transition` calls with a 2000-millisecond duration to move the eyebrows up and down. The code also uses `d3.arc` to calculate the path for the mouth shape.

Oct 23, 2021

Loading thumbnail…

1 Shapes and Colors with SVG and CSS

This example demonstrates fundamental SVG shapes and CSS styling within a React starter template. It renders circles, rectangles, lines, and a path inside an SVG element with a scale transform, showcasing fill colors, stroke properties, and stroke-width attributes. The code applies CSS classes to style grouped elements, such as the `.lines` class adding black strokes to lines and paths, while inline attributes like `fill="red"` and `#83cc2a` set explicit colors. The visualization relies on plain SVG markup and external CSS rules to control appearance.

Oct 23, 2021