matt-hooper

@matt-hooper·5 public vizzes

Let's make a face

Using D3 v5, a yellow SVG face with circular eyes and rectangular brows renders in the center of the viewport. The code draws the face via `d3.arc` for a smiling mouth and uses `transition()` to animate the eyebrows up and down over two-second intervals. The face’s features are positioned using SVG transforms, and the animation loops twice to lift and lower the brows. Simple shape primitives like `circle`, `rect`, and `path` form the complete facial expression.

Jan 17, 2019

Loading thumbnail…

Untitled

This example presents a simple bar chart rendered with D3.js and d3fc, displaying labeled bars on a fixed-height canvas. The visualization uses d3’s selection and data-join methods to bind the dataset to SVG rectangles, while d3fc provides the chart layout and axis components. A custom bar-label class controls text placement, and the chart’s width is responsive to its container. The code relies on ES6 modules and D3 v5, with the data source defined inline in the index.js file.

Jan 17, 2019

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows a multi-line chart tracking population over time for different world regions, with a vertical black line marking a selected year. Moving the mouse across the chart updates the selected year by inverting the x-scale position, and a color legend identifies each region. The visualization uses d3.line with curveBasis for the smoothed paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group the data by region. Population data comes from UN estimates and medium variant projections, rendered as SVG.

Jan 17, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using both inline attributes and CSS classes. The code applies transformations like scaling and translation to reposition groups of shapes, while CSS controls stroke color, width, and line joins. Shapes are rendered directly in SVG without any external libraries, relying on native browser support for SVG elements and stylesheet rules. The result highlights the interplay between SVG presentation attributes and CSS for structuring a static composition.

Jan 16, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the letter frequency data for the English language from a `letters.tsv` file. The visualization uses a band scale for the categorical y-axis and a linear scale for the quantitative x-axis, with axes rendered via `axisLeft` and `axisBottom`. The chart's bars are drawn as SVG `<rect>` elements, filled with steelblue. The code loads data using the d3 `tsv` function, and the layout is positioned within an SVG canvas using computed margins and inner dimensions.

Jan 15, 2019