Skip to main content
SimilarExport ZIP
100%

Fork of Circles with D3

✓ Published0🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Aug 27, 2025
Created on Aug 27, 2025
Forked from Circles with D3

This example visualizes projected cloud infrastructure service revenue for seven major providers across 2023, 2025, and 2030, using monotone-curved line paths to compare trends. The chart renders as an SVG line chart with colored circles at each data point, labeled with dollar values in billions. The code uses D3 v7’s `select`, `scalePoint`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveMonotoneX` APIs within a fixed container that fills the viewport. Data is embedded directly in the script, with dashed strokes distinguishing projected years from the solid 2023 baseline.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

A fork of circles with D3 shows a static bar chart of billing amounts by customer name, rendered as SVG rectangles. The chart uses D3 v7 scales and axes to map data, with bars colored steelblue that turn brown on hover. The code sets up a linear y-scale and band x-scale, then appends axes and rects to the SVG. The sample data appears truncated, and the visualization relies on `d3.scaleBand` and `d3.scaleLinear` for layout.

SSamir Tarda
79% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example visualizes the relationship between state-level data from 2020 and 2024 using a reusable scatter plot built with D3 v6. It shows how individual data points map from the x-axis (2020 values) to the y-axis (2024 values) through a clean SVG rendering. The code employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3 to compute scales and draw axes, while circles are joined to data via `selection.selectAll('circle').data().join()`. The underlying dataset is loaded as CSV from a remote URL, and the chart adapts to the viewport size.

Ppmbhupathibalu@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Fork of Circles with D3

This visualization uses a D3.js line chart to display store sales data aggregated by store area. The code loads CSV data, groups it with `d3.rollup`, and sums sales per area, then renders a smooth curve using `line()` with `curveBasis`. Axes are drawn with `axisLeft` and `axisBottom`, while scales are created using `scaleLinear` and `extent`. The SVG output includes labeled axes and a title, with a blue line path styled via CSS.

RRohithNaiduDevareddy@my.unt.edu
76% match
Loading thumbnail…

Fork of Circles with D3

This visualization presents salary data as a heatmap, using color intensity on a linear scale from light gray to blue to represent salary amounts in US dollars across job titles and company sizes. The SVG chart employs D3 v7 with `scaleBand` for the categorical axes and `scaleLinear` for the color mapping. Hovering over individual rectangles triggers a tooltip displaying the exact salary value, while a legend with axis ticks and color rectangles provides a visual reference for the salary scale.

MMonish Galla
75% match
Loading thumbnail…

Fork of Circles with D3

This visualization shows a fixed composition of overlapping geometric shapes on a pale green background, including seven semi-transparent circles, five thick colored lines, and three rectangles. The code uses D3 v7 with the `select` API and data joins (`join`) to bind each SVG element to its corresponding array of objects. Shapes are rendered directly as SVG `circle`, `line`, and `rect` elements, with attributes like position, size, color, and opacity set from the data. The example demonstrates static, non-interactive SVG rendering with hardcoded coordinates and no scales or axes.

Aadamsnothere@gmail.com
75% match
Loading thumbnail…

Fork of Circles with D3

A static visualization of seven circles in a cream-colored container uses a custom palette of muted colors like charcoal gray, burnt orange, and beige. The circles are connected by thin, semi-transparent lines, and larger ones are framed with rounded rectangles. Rendered with D3 v7, the code uses `select`, `join`, and attribute setters like `.attr` to draw geometric shapes from hard-coded data arrays, demonstrating basic SVG construction without animation or interaction.

KKal
75% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a simple bar chart visualizing a small dataset of five numeric values, rendered as sky-blue rectangles with white value labels. It uses D3.js (version 7.8.5) to create an SVG container, bind data to rectangles via `selectAll().data().enter().append()`, and set each bar’s height and position based on its value. The code also leverages method chaining with `.attr()` to configure dimensions, colors, and text properties, with all rendering occurring client-side in the browser.

PPriyank Singh
75% match
Loading thumbnail…

Fork of Circles with D3

This visualization creates a striking striped pattern using 100 horizontal rectangles of varying heights, each rendered in SVG. The code uses a D3 mask with a circular cutout to reveal the colored bars through a black overlay, producing a lens-like effect. Built with D3 v7, it employs `select`, `range`, and `join` to bind data to rect elements, while the mask is constructed with custom SVG elements.

Ggold.g@northeastern.edu
75% match