Gist e2af47cc464c038f9482606ee1c201a1

100%

Gist e2af47cc464c038f9482606ee1c201a1

✓ Published0🌍 Public

Last edited Jul 22, 2019

Created on Jul 22, 2019

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.

AI-generated description

forked from <a href='http://bl.ocks.org/keboice/'>keboice</a>'s block: <a href='http://bl.ocks.org/keboice/6f4693024e469795cb135960fd6e833b'></a>

mit Licensed

Similar vizzes

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

88% 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

84% match

Loading thumbnail…

Barley Line Chart

This chart visualizes barley yield data across multiple varieties and experimental sites for the years 1931 and 1932. Each line represents a variety, with the x-axis mapping the six locations and the y-axis representing yield. The line chart is rendered using SVG within a D3 v4 framework, sourced from a TSV file containing yield measurements across 10 barley varieties at 6 sites over 2 years. The visualization uses a multi-line layout to show how each variety's yield varies across locations, with the data parsed and plotted from the tab-separated values in barley.tsv. The lines are drawn without fill, keeping the chart clean and focused on the trend comparisons between varieties across sites.

663anp3ca

79% 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

79% match

Loading thumbnail…

Vega-lite Visualization Example

This stacked bar chart visualizes barley crop yields across multiple varieties, with each bar segmented by the site where the crop was grown. The visualization uses Vega-Lite’s declarative specification to encode variety on the x-axis, aggregated yield on the y-axis, and site as the color channel. Data is loaded from a local JSON file containing individual yield measurements, and the resulting chart is rendered as an SVG. The stacked segments communicate the total yield per variety while also comparing contributions from different agricultural research sites.

AAsutosh989

78% match

Loading thumbnail…

Barley PunchCard Chart v4 - static

A static punchcard chart visualizes barley yield data across six sites and multiple genetic varieties, with a selected site displayed as a grid of circles representing each variety's yield per year. The D3.js v4 code uses `d3.nest()` to group the `barleyfull.csv` dataset, `d3.scalePoint()` for the categorical y-axis, `d3.scaleLinear()` for the year axis, and `d3.scaleSqrt()` for circle radius. The visualization is rendered as an SVG, employing the general update pattern with `selectAll`, `enter`, and `append` to draw circles, while axes are generated via `d3.axisLeft()` and `d3.axisBottom()`.

JJimMaltby

78% 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 Barley PunchCard Square Chart v5 - static

This visualization presents yield data from the classic barley dataset as a static punch-card chart. It displays a single site, Crookston, with barley varieties along the vertical axis and years on the horizontal axis, using square rectangles sized by yield value. The code uses D3 v5’s `d3.nest()` to group data hierarchically, `d3.scalePoint()`, `d3.scaleLinear()`, and `d3.scaleSqrt()` for positioning and sizing, and `d3.axisLeft()`/`d3.axisBottom()` for axes. SVG rectangles are colored via `d3.scaleOrdinal(d3.schemeAccent)`.

JJimMaltby

77% match