thespiraltree

@thespiraltree·6 public vizzes

Marking a Bar Chart

This bar chart displays survey results ranking ideas by the number of “fucks given,” with values from 2 to 10 across five categories. Horizontal bars are rendered as SVG rectangles, scaled linearly by value and positioned vertically using a band scale. The visualization uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to construct axes and encode data from a CSV file, with each bar’s width proportional to its numeric value.

Aug 20, 2019

Loading thumbnail…

Marking a Bar Chart

This bar chart displays population counts for twelve countries, using horizontal bars to compare values from China to the Philippines. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with `axisLeft` and `axisBottom` generating the tick labels. The SVG rendering includes steel-blue rectangles, and the data is loaded from a CSV file, with population values multiplied by 1000 during processing.

Aug 20, 2019

Loading thumbnail…

Let's Make a Face with D3.js

A smiling face is drawn with D3.js v5, featuring circular eyes, rectangular eyebrows, and an arc-shaped mouth on a filled circle head. The eyebrows animate upward and back down using chained `transition().duration()` calls, while all shapes are positioned relative to a centered group. The code uses `d3.select`, `d3.arc`, and SVG elements, rendering with a static yellow head and black outlines.

Aug 17, 2019

Loading thumbnail…

Let's Make a Face with D3.js

This example animates a simple cartoon face built entirely with SVG shapes in D3.js. Shown head-on, the face consists of a circular head, two eyes, rectangular eyebrows, and an arc-based mouth, all centered within an SVG canvas. The eyebrows repeatedly bounce upward and downward using chained `transition` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs, constructing the face by appending circles, rectangles, and paths to a translated group element.

Aug 17, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create geometric shapes using SVG elements and style them with CSS. It shows circles, rectangles, lines, and a path, with some shapes filled with a cyan color and others inheriting default styling. The code uses a CSS class to apply stroke attributes to line and path elements, while inline attributes define fill colors and transforms for grouping. The example renders entirely with SVG markup in an HTML document, with a linked stylesheet that resets the body margin and hides overflow. The design illustrates basic SVG composition, grouping, and styling techniques without JavaScript.

Aug 17, 2019

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML cars report listing four used and new Nissan models with prices, highlighting the 2012 Leaf in red. It uses plain HTML with an external stylesheet (styles.css) to style the body with a large monospace font and apply the red highlight through a `.highlighted` class. The page relies entirely on static markup and CSS, with no JavaScript libraries or data loading, showcasing basic document structure and styling.

Aug 17, 2019