Skip to main content
100%

DerekNolan Graph - Flourish

✓ Published0🌍 Public
Aaaizemberg
Last edited May 23, 2019
Created on May 23, 2019

This example embeds a Flourish visualization titled “DerekNolan Graph” directly in an HTML page. It shows an interactive network graph, where nodes and connections are rendered in the browser using Flourish’s public embedding API. The code loads the visualization from the Flourish studio via the `flourish-embed` div and the `embed.js` script, which fetches and displays the pre-built chart. No additional JavaScript libraries, such as D3 or Three.js, appear in the source; the graph’s behavior and rendering are entirely handled by the Flourish platform. The data source is a gist authored by aaizemberg.

AI-generated description

Similar vizzes

Loading thumbnail…

Grafo desde Flourish

This example embeds a network graph visualization created with Flourish, a tool for interactive data visualizations. The page loads a specific Flourish visualization (ID 77624) via the Flourish embed script, which dynamically renders the graph inside a `div` element. The visualization shows nodes and connections between them, though the underlying data is not visible in the code. The implementation relies on Flourish’s public JavaScript API and the `flourish-embed` class to initialize the chart, while the actual graph rendering is handled by Flourish’s internal engine, not by a custom library.

Aaaizemberg
87% match
Loading thumbnail…

dot plot

This dot plot visualization displays a single data series as circular points arranged along a vertical axis. The page embeds a Flourish visualization using the `flourish-embed` script, which loads the chart from a hosted visualisation ID. The rendering relies on Flourish’s internal web-based charting engine, not a custom JavaScript library. The plot shows one variable per dot, with the position and size encoding values, though the exact data source is not visible in the provided HTML. The chart updates dynamically through Flourish’s embedded iframe, allowing interactive exploration of the plotted points.

Aaaizemberg
74% match
Loading thumbnail…

Las noticias del día - GoogleNews - Flourish

This example displays a daily news visualization titled “Las noticias del día” using a Flourish embed, which renders an interactive chart of Google News headlines. The page loads a pre-built Flourish visualization via the `flourish-embed` script, pulling data from a hosted gist by author aaizemberg. The visualization itself is generated by Flourish’s internal rendering engine, which typically relies on D3.js for layout and transitions, though the code here only exposes the embed API and does not directly call specific functions like `d3.forceSimulation` or `d3.geoPath`. The data source is the external gist, and the rendering approach is entirely delegated to Flourish’s cloud-based service.

Aaaizemberg
70% match
Loading thumbnail…

Data with flourish

A timeline of events is presented as a scrollytelling story, where text steps on the left trigger an embedded Flourish story on the right. The example uses the Scrollama library and D3.js to manage the scroll-driven navigation. The Flourish iframe is advanced through its embed API based on the active step, while D3 handles element selection for Scrollama's configuration. The data source is the embedded Flourish story, with the timeline's specifics not defined in this code.

CCaroline Ghisolfi
69% match
Loading thumbnail…

Dendrogram

This dendrogram visualizes a hierarchical clustering of the Flare data set, showing the nested structure of its analytics, animation, and visualization classes. Internal nodes are rendered as small circles, with connecting links drawn as smoothed curves, while leaf nodes display labels. The example uses D3 v4 and SVG rendering, employing the `d3.cluster` and `d3.stratify` layouts to position nodes based on their hierarchical depth and computed height. Data is loaded from a CSV file, and the chart’s orientation places the root at the left, expanding rightward.

Mmbostock
67% match
Loading thumbnail…

Horas de Sol

This visualization displays monthly sunshine hours as an interactive chart, likely in the form of bars or a similar layout, using an embedded Flourish template. The page loads a pre-built visualization from Flourish’s public CDN via the `flourish-embed` script, referencing visualisation ID 846203. The underlying data source is not visible in the code, but the chart is rendered entirely by Flourish’s JavaScript engine, which handles the graphic’s interactivity and styling. The example relies on the Flourish API rather than custom D3 or Canvas code, making it a straightforward embed of a hosted visual.

Aaaizemberg
66% match
Loading thumbnail…

carrera de barras

This visualization, titled "carrera de barras," shows a racing bar chart animation. The page embeds a Flourish visualization via the `flourish-embed` script and a `data-src` attribute pointing to a public Flourish visualisation. The code uses the Flourish public API to load and render the animated bar race, with the chart updating over time to compare categorical values. The data source is specified within the Flourish visualisation itself, not in the local HTML.

Aaaizemberg
66% match
Loading thumbnail…

Gist 484101

This visualization shows an interactive network of interconnected nodes, with each node representing a person and links showing connections between them. It reveals the structure of social ties, likely from a GitHub collaboration graph, by grouping related clusters. The rendering uses a canvas-based `d3.forceSimulation` with custom collision and link forces to position nodes, while a custom `d3.geoPath`-style projection maps node positions onto a projected sphere. The code also employs Canvas `getImageData` to detect node boundaries for hover interactions, and uses `transition.attrTween` for smooth link animations. The underlying data is loaded from a Gist, and the visualization runs entirely client-side without external data files.

DDylanFM
66% match