hortulanus

@hortulanus·2 public vizzes

d3 data table basics

This example shows a simple SVG-based data table visualization built with D3 and React, where a set of black horizontal lines represent table rows, with a highlighted red row to draw attention. The code uses `d3.select` to grab the SVG element, reads its width and height attributes, and renders the lines as SVG `<path>` elements using `d3.arc`. The stylesheet controls stroke color and width, while a `.highlighted` class turns the selected row red. The visualization demonstrates basic D3 data binding and SVG rendering without any interactive behavior.

Feb 7, 2021

Loading thumbnail…

Fork of Shapes with SVG and CSS

A yellow circle with black outline and a smile-shaped arc form a face, complete with two eyes and rectangular eyebrows. The eyebrows animate by translating up and down over two-second intervals using chained `transition` calls. Built with React and D3 v6, the visualization renders purely as SVG elements (circles, rectangles, and a path) styled partly through an external CSS file. The code explicitly sets SVG dimensions, uses `d3.arc` to generate the mouth path, and applies transforms to position facial features.

Feb 7, 2021