dot plot

DerekNolan Graph - Flourish

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.

74% match

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.

73% match

CS360 A2 Dot Plot

This example renders a dot plot using React and D3, displaying individual data points as circles positioned along axes. The visualization leverages d3-scale for mapping data values to pixel coordinates and d3-axis to generate tick marks and labels. Data is drawn as SVG circles via React’s declarative rendering, with the framework managing state and updates. The plot’s design emphasizes simple, clear encoding of quantitative values, suitable for comparing distributions or categories. The underlying data structure is not specified, but the code follows a standard React starter template.

EEric Yao

70% match

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.

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.

Dot Chart

This dot chart displays annual values from 2011 to 2021 as individual circles, with a tooltip revealing each dot's exact value on hover. The visualization uses d3.csv to load the data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft for tick marks. Circles are appended to SVG groups with mouseover, mousemove, and mouseleave handlers controlling tooltip visibility. The chart includes a title and uses a teal fill with black stroke for each dot.

Pprateekvasi

connect the dots

This animated scatterplot visualizes a time series of 50 data points, connecting them in chronological order with a smooth line. Each dot represents a moment in time, with its vertical position encoding the "rate" value while the x-axis maps temporal progression. The visualization uses D3 v4's SVG rendering to draw a continuously-updating path that links each point to the next, creating the sense of drawing a connected line through the data. As time advances, the line extends to incorporate new points while earlier segments remain visible, producing a dynamic "connect-the-dots" effect. The animation highlights the temporal flow and changing values across the dataset, with the line's movement revealing patterns in the rate changes over time. The visualization uses a minimal, uncluttered aesthetic that focuses attention on the trajectory of the data points.

EEranM6