Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Barley PunchCard Chart v5 - static

Public visualization

Viewing a saved revision (read-only)

82f8f7d6b7ec420e880f4e8978e709ec

Barley PunchCard Chart v5 - static

0 stars2🌍 Public
JJimMaltby
Last edited Apr 14, 2022
Created on Apr 14, 2022

This example shows barley yield data for a single site, with each variety as a horizontal row of circles positioned by year, where circle radius encodes yield and color distinguishes barley genotypes. The chart is built with D3 v5 using nested data from a CSV file, rendered as SVG. It employs `d3.nest()` for grouping, `d3.scalePoint` for the y-axis, `d3.scaleLinear` for years, and `d3.scaleOrdinal` with the `schemeAccent` color palette, alongside `d3.axisLeft` and `d3.axisBottom` for axes.

AI-generated description

Punch card Chart: v5 Static

A vanilla HTML implementation of Chris Henrick PunchCard tutorial "D3JS v4 General Update Pattern: Punchcard Chart"

https://clhenrick.io/d3-v4-general-update-pattern-punchcard-chart/

bl.ock: https://bl.ocks.org/clhenrick/2b6b5360748a06b26bfd50d96998b741