Trump Topics Streamgraph

100%

Trump Topics Streamgraph

✓ Published0🌍 Public

Last edited Sep 27, 2017

Created on Sep 27, 2017

A streamgraph visualizes search interest in Trump-related news events from January to September 2017, using Google Trends data indexed to 100. The chart stacks 40 topics as colored, wiggling areas, with labels positioned via `d3.areaLabel` and wrapped using a custom `wrap` function. Built with D3 v4, it applies `d3.stack` with `stackOffsetWiggle` and `stackOrderInsideOut`, renders SVG paths via `d3.area` and `curveBasis`, and includes major and minor time axes.

AI-generated description

A StreamGraph visualization of Google Trends: Search interest in Trump-related news events (indexed separately) Jan. 21 - Sept. 5. Notes from the data file: Search interest in news events in the US between January 1, 2017 and September 1, 2017. Values have been indexed to 100 for each news event, where 100 is the maximum search interest. This data is from

Uses d3-area-label to position labels, in addition to the text wrap technique from Wrapping Long Labels.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/30e50fe82819ef73c6b8d9f2d31b99a8'>How Americans Spend Time</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Untitled

This chart visualizes the popularity of research topics over time using a stacked area chart with a silhouette offset. The visualization uses d3.layout.stack, d3.svg.area, and d3.time.scale to render SVG paths with cardinal interpolation, while d3.svg.axis displays the x and y axes. Interactive features include tooltips on mouseover that show topic values, hover highlighting that dims other layers, and a vertical guide line that follows the cursor. Data comes from a comma-separated CSV file loaded with d3.csv.

LLAOKE1997

65% match

Loading thumbnail…

Streamgraph

A streamgraph displays 20 layers of synthetic time-series data, each rendered as a filled area with a smooth, wiggle-based baseline. The visualization alternates between two precomputed datasets when the "Update" button is clicked, triggering a six-second animated transition. The code uses the D3 v3 stack layout with the "wiggle" offset, an area generator, and linear scales for x, y, and color. Layers are vertically offset with a translate transform for added padding.

CCurran Kelleher

65% match

Loading thumbnail…

Streamgraph

A streamgraph displays twenty layers of synthetic time-series data, using a wiggle offset to minimize visual overlap. The graphic animates between two independently generated datasets, smoothly interpolating the stacked area paths over 2.5 seconds. Built with D3 v4, the example uses `d3.stack`, `d3.area`, `d3.scaleLinear`, and `d3.interpolateCool` for color. A button triggers the transition, re-binding the data and applying a transition on the `d` attribute of SVG path elements.

Mmbostock

65% match

Loading thumbnail…

Bubble Chart Template

This interactive bubble chart visualizes the estimated net worth of Donald Trump’s assets in 2016, using area to encode net value and position to convey spatial distribution. Built with D3 v4 and SVG, the chart renders each asset as a circle on a geographic layout, with tooltips providing detailed asset information. Users can click a button to toggle between displaying all assets and those with changes from the prior year, with smooth animated transitions. The visualization is based on Forbes data and highlights the relative financial significance of each asset through bubble size and positioning.

GGerardoFurtado

64% match

Loading thumbnail…

d3 time series streamgraph

This streamgraph visualizes Google Search Trends for five best-selling video game franchises from 2004 to 2024, showing relative popularity over time. It uses d3.stack() with the stackOffsetSilhouette offset to create the layered streamgraph shape, with a colorbrewer categorical palette from the colorbrewer library for the series. The chart employs d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, while the d3-legend library provides the legend. Data comes from Google Trends, simplified for the example, and is rendered as SVG with interactive tooltips.

AAndrew

64% match

Loading thumbnail…

Streamgraph 1.0

A streamgraph displays changes in five data series from 1996 to 2018, including happiness scores, mood disorder diagnoses, and suicide-related metrics. Using d3.stack with stackOffsetSilhouette, the code layers filled areas symmetrically around a central axis, with d3.scaleOrdinal and d3.schemeDark2 assigning colors. The SVG rendering includes a gridline-based x-axis, and interactive hover effects dim other areas while tooltips identify the selected series. Data comes from a CSV file loaded via d3.csv.

EEline000

64% match

Loading thumbnail…

D3 Git History Streamgraph

This streamgraph visualizes commit activity across D3’s GitHub repositories over time, with each layer representing a repository and its thickness reflecting smoothed weekly commit counts. The layer order follows each repository’s first commit, revealing the shift from the monolithic d3 repo to a package explosion during the 4.0 release. Using d3.stack with stackOffsetWiggle and stackOrderAppearance, the code applies array-blur smoothing to the data, renders SVG paths via d3.area, and adds hover effects that highlight individual layers. The visualization links each layer to its repository, and labels are positioned using d3-area-label. Data comes from a JSON file of all D3 commits.

CCurran Kelleher

63% match

Loading thumbnail…

Streamgraph

This streamgraph visualizes multiple time series as smoothly stacked layers, with a button-triggered transition that interpolates between two randomly generated datasets. It uses d3.stack with the wiggle offset to create the baseline, while d3.area renders the filled paths and an animated transition (via .transition().duration(2500)) morphs the layers into a new layout. The code generates synthetic data with a custom bump function and applies the d3.interpolateCool color scale, all rendered as SVG. Zooming is also enabled through d3.zoom, and the entire chart updates in place when the user clicks the "Update" button.

GGerardoFurtado

63% match