FEM: Exercise 2

100%

FEM: Exercise 2

✓ Published0🌍 Public

Last edited Feb 5, 2018

Created on Feb 4, 2018

This animated scatterplot explores barley yield data from 1927–1929 across six Minnesota sites, using D3 v4 with SVG rendering. Each circle represents a barley variety’s yield, positioned by site and year. Animated transitions cycle through the three years, shifting the points to show how yields change across locations and seasons. The chart includes axes, labels, and a legend mapping variety names to colors, making it easy to track individual cultivars over time. Built with Blockbuilder.org, the example demonstrates D3’s data-joining and animation capabilities on a classic agricultural dataset.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

test

This visualization presents the classic barley yield dataset, showing the yield of different barley varieties across six farm sites in Minnesota for the years 1931 and 1932. The layout is organized hierarchically: each of the six sites is rendered as a separate SVG, and within each site, varieties are grouped and their yields are drawn as rectangles. Animation is applied to the rectangles, likely to transition between the two years of data, revealing how yields compare across varieties and locations. The bar chart uses a color legend to distinguish the barley varieties and includes axis labels for yield values.

AAbin

85% match

Loading thumbnail…

transition

This animated scatterplot cycles through barley yield data from six Minnesota sites across nine years, showing how the distribution shifts with each season. Circles represent individual variety-site combinations, colored by barley strain and positioned by site on the x-axis and yield on the y-axis. The visualization uses D3 v4’s `d3.csv` to load the data and `d3.transition()` with a 1.5-second interval to animate circle entry, exit, and radius changes. Data comes from the `barleyfull.csv` file, rendered as SVG circles with opacity.

EEranM6

85% match

Loading thumbnail…

Gist e2af47cc464c038f9482606ee1c201a1

This interactive scatterplot displays barley yield data across multiple sites and years. The visualization uses an SVG rendering with D3.js, featuring a site selector dropdown that animates circle transitions when filtering. Circles represent individual yields, sized by yield value and colored by barley genotype. A legend allows highlighting specific genotypes through mouseover interactions. The code uses D3's ordinal and linear scales, SVG axes, and transition methods to animate the data updates.

AAjayyy

83% match

Loading thumbnail…

circle transition

This animated scatterplot displays barley yield data across multiple sites and years, with each circle representing a specific genus at a location. The visualization cycles through nine yearly snapshots, transitioning circles as they enter, exit, and reposition according to their yield values. Built with D3 v4, it uses SVG circle elements, a band scale for site categories, and a linear scale for yield measurements. Transitions animate circle radius and vertical position over one-second intervals, while a color scale distinguishes different barley genera.

SSoorin

82% match

Loading thumbnail…

Barley Yields Simple Multiples

This visualization uses small multiples to compare barley yields across six Minnesota sites for the 1927–1929 growing years. Each panel represents a site, with yield (in bushels per acre) plotted along the x-axis and barley varieties along the y-axis. Individual data points are encoded as colored circles, and a horizontal line marks the average yield for each variety at that site. The chart is built with D3 and SVG, using the classic barley-yields dataset. The multi-panel layout makes it easy to compare yield patterns across sites and years at a glance.

WWillNetsky

80% match

Loading thumbnail…

Reusable Barley PunchCard Chart v5 - static

This punch card chart visualizes barley yield data from 1927-1929 across multiple sites and barley genotypes. The chart uses a static SVG rendering with a reusable D3.js v5 module pattern, featuring circular marks whose radius encodes yield magnitude and color distinguishes barley genotypes. The visualization incorporates D3's `scalePoint` for the categorical y-axis, `scaleLinear` for the year-based x-axis, and `scaleSqrt` for radius scaling, alongside ordinal color mapping. The data is sourced from a CSV file containing yield measurements for different barley varieties across experimental stations in Minnesota.

JJimMaltby

78% match

Loading thumbnail…

Fork of D3 Update Pattern –Punchcard Example V5

This interactive punchcard chart uses D3 v5 to visualize barley crop yields across multiple Minnesota sites over two years. Users select a site from a dropdown menu, triggering animated transitions of circles positioned by year and barley genotype, with circle radius scaled by yield value. The chart displays SVG axes and marks, and the code uses D3's `nest()`, `map()`, `dispatch`, `scalePoint`, `scaleSqrt`, and `axisBottom` for data aggregation and rendering.

PPujitha14challagulla

77% match

Loading thumbnail…

Barley PunchCard Chart v5 - static

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.

JJimMaltby

77% match