SK_AGRICULTURE

Agricultural District Prominence of Bee Colony Population by State - Hue Variation of Ag District by State (X axis) and Year (Y axis)

This visualization uses circles to show the prominence of bee colony populations across agricultural districts in each state over time. The X-axis represents the state, the Y-axis represents the year of the census, and the color hue indicates the specific agricultural district. Built with the Vega-Lite API, it uses `markCircle` to encode data from the Bee Colony Census Data by County CSV file, with `fieldN` and `fieldT` mappings for categorical and temporal axes. The visualization is rendered using D3.js and Vega-Lite, with a custom tooltip revealing district details.

85% match

Crop_Yield Data

This example visualizes year-wise crop production across Indian states using a scatter plot. Each circle represents a data point, with the x-axis showing the crop year, the y-axis showing production quantity, and color encoding the state using a category20 color scheme. Hovering reveals the crop name via a tooltip. The code leverages the Vega-Lite API, registering both Vega and Vega-Lite with a custom tooltip handler, and loads data from a remote CSV file using d3.csv. The visualization auto-fits its dimensions to the window size.

PPothuguntla Pranitha

73% match

Bee Colonies by State as Surveyed Across Time

This visualization displays a point for each U.S. state, with the size of each point encoding the number of bee colonies surveyed in that state for a given year, and the x-axis showing states sorted alphabetically while the y-axis represents the survey year. The chart is rendered using the Vega-Lite API, leveraging the `markPoint` function and the separation of data by color. It loads survey data from a CSV file using d3’s `csv` function, and applies custom configuration for axis styling and label readability.

73% match

Percent Bee Colony Loss by State and Year - a Vega-Lite MarkSquare Heatmap

This color-coded heatmap shows the percentage of bee colony loss across US states and years, revealing a random pattern with no clear geographic hotspots or temporal trends. Each square represents a state's loss for a given census year, with color intensity encoding the loss percentage. The visualization uses the Vega-Lite API’s `markSquare` function, projecting state names on the x-axis and years on the y-axis, with data sourced from a CSV of Bee Colony Loss. Built with D3 and Vega-Lite, it applies custom axis and label styling from a config file.

Cchungmin-yu

Percent Bee Colony Loss by State and Year - a Vega-Lite MarkSquare Heatmap

Cchungmin-yu

Steve's Scatter Plot with Color and Legend

This scatter plot visualizes bee colony loss percentages across years, with each circle representing a state and color encoding the state name. The visualization uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal for the color mapping, and React components for rendering SVG axes, marks, and a color legend. Data is loaded as CSV via d3.csv from a GitHub gist, with tooltips showing loss values on hover through SVG title elements.

Percent Bee Colony Loss by State and Year - a Vega-Lite MarkSquare Heatmap

This heatmap displays the percentage of bee colony loss across US states and years, with each square colored by the magnitude of loss. The visualization reveals no clear geographic or temporal patterns, suggesting colony loss is random and consistent nationwide. Built with Vega-Lite API using the `markSquare` function, it encodes state on the x-axis, year on the y-axis, and loss percentage as color. Data comes from a CSV loaded via d3.csv, with rendering handled by Vega and vega-tooltip for interactive inspection.