Overlapping Bump Chart

100%

Overlapping Bump Chart

✓ Published0🌍 Public

Last edited Mar 24, 2017

Created on Mar 24, 2017

This visualization compares the availability of maple and seafood goods at U.S. farmers' markets using a map of the contiguous states and two bump charts showing latitudinal and longitudinal distributions. Each market appears as a colored dot, while the overlapping area charts use a "bump" logic to display where one good outnumbers the other. Built with D3 v4, it uses `d3.nest()` and `rollup` to aggregate data, `d3.area()` with cardinal curve interpolation, and animated transitions via `d3.transition()`. Data comes from the Farmers Markets Geographic Data on data.gov.

AI-generated description

Overlapping Bump Chart

Playing around with the idea of a bump chart comparison with two overlapping areas. Based on Farmers Markets data from data.gov.

Another iteration with step interpolation instead of cardinal.

Alt text

forked from <a href='http://bl.ocks.org/susielu/'>susielu</a>'s block: <a href='http://bl.ocks.org/susielu/1b10cd2de64b027a91e960c43c9bc23f'>Overlapping Bump Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Overlapping Dimensions

Overlapping Dimensions visualizes a dataset of farmers' markets, encoding three categorical attributes—juices, cheese, and baked goods—as cyan, yellow, and magenta ellipses arranged on a grid. Animated via `requestAnimationFrame`, the ellipses shift along horizontal and vertical axes, creating moiré-like overlaps that reveal combinations of product offerings. Rendered on a 2D Canvas using `context.ellipse` and `globalCompositeOperation = "multiply"`, the animation blends colors for intersections, while grey outlines mark markets with none of these categories. The data is fetched asynchronously via `d3.json` from a gist.

TThanaporn-sk

73% match

Loading thumbnail…

Fork of Area Chart Visualization

This interactive area chart visualizes product sales trends from 2018 to 2024, allowing viewers to toggle between stacked and overlapping area representations. The stacked mode shows cumulative market growth across all products, while the overlapping mode displays individual product sales with semi-transparent fills and line borders. Built with D3 v7, the visualization uses `d3.stack`, `d3.area`, `d3.line`, `d3.scalePoint`, and sliding transitions to switch between chart types. Data is loaded from a CSV file containing yearly sales figures for multiple products.

AAmrit Adhikari

68% match

Loading thumbnail…

Marimekko Chart

This Marimekko chart visualizes product sales across US markets, using a mosaic layout where each column represents a market segment with width proportional to total sales and stacked rectangles showing market-specific values. The visualization employs D3's linear scales for x and y axes, with color encoding via the category10 palette. Data is loaded from a JSON file and processed through D3's nest and reduce functions to calculate segment offsets and proportional dimensions, while SVG rects are rendered with crisp edges for precise boundaries.

Mmbostock

66% match

Loading thumbnail…

Zoomable Treemap Bar Chart

This interactive visualization combines a treemap and a bar chart to show U.S. trade balances across countries and years. Users can click a country to zoom into its trade data, adjusting for inflation via a toggle, with nodes animating to their new positions. Built with D3 v4, the chart uses `d3.json` to load Census data, `d3.hierarchy` for structure, and `d3.scaleBand` and `d3.scaleLinear` for axes. The implementation handles divide-by-zero `NaN` values during treemap transitions.

TThanaporn-sk

65% match

Loading thumbnail…

Intersections

This visualization displays the relationship between U.S. state statistics—including median income, alcohol consumption, and murder rate—using a dynamic scatter plot. The plot transitions between categorical bar charts for states and quantitative scatter plots, with animated circles for numeric comparisons. D3's scaleLinear, scaleBand, axisBottom, and axisLeft APIs handle the chart construction, while the `menu` component and `dispatch` enable interactive axis selection. The code uses `transition` for smooth animations and `selection.join` for efficient SVG element updates. The data comes from a CSV file combining income, alcohol, and murder statistics per state.

Aadventuresenglish.info@gmail.com

64% match

Loading thumbnail…

Decision Tree III

This visualization displays a decision tree of farmers market data, branching through product categories like baked goods, cheese, and vegetables to reveal patterns in market offerings. The tree uses an organic, gooey aesthetic with SVG filters for blur and color matrix effects, while animated nodes and edges grow outward using d3’s tree layout and the `.ancestors()` function to position descendants at ancestor depths. Built with d3.v4 and Vue, it renders in SVG with smooth transitions, sourcing real market attributes from a JSON dataset.

FFrissAnalytics

64% match

Loading thumbnail…

Untitled

This visualization combines a scatter plot, a map of US states, and a time-based brush to explore agricultural productivity data. The scatter plot displays each state’s score against its creation time, with circle size reflecting comment count, while the map overlays proportional symbols sized by agricultural productivity. A brush timeline filters the data across all views simultaneously, and hovering over a point or map symbol highlights the corresponding element in the other charts. The code uses d3.svg.brush, d3.geo.albersUsa, d3.geo.path, and d3.svg.axis to render the interactive SVG elements.

Bbl75d

64% match

Loading thumbnail…

D3 Page Template

This interactive line chart from D3 v4 displays monthly sales data for three fruits (strawberry, grape, and blueberry) across two years (2015 and 2016), using a dropdown menu to switch between fruits. The visualization uses `d3.line()` to generate smooth paths from the CSV data and `d3.scaleTime()` for the month-based x-axis. A callback on the dropdown's `change` event triggers a transition that animates the paths over one second, enabling dynamic comparison of seasonal sales patterns across different fruit categories.

SSushanta77

64% match