D3 Example 1

100%

✓ Published2🌍 Public

Last edited Aug 25, 2021

Created on Aug 25, 2021

This example plots five red circles on a light grey SVG canvas, with each circle’s position determined by x and y coordinates loaded from a tab-separated values file (`example1.tsv`). The visualization uses D3 v7, fetching the data via `d3.tsv()` and binding it to circle elements through `selectAll().data().enter().append()`. The circles are styled with fixed radius and fill color, while their `cx` and `cy` attributes are set directly from the data values, producing a simple scatterplot without any scales or axes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Basic Chart, simple dataset

This example shows five red circles positioned in a linear diagonal pattern with x values from 100 to 500 and y values from 50 to 250, loaded from a two-column TSV dataset. The visualization uses D3 v5’s `d3.tsv` function to asynchronously fetch the data, then binds it to SVG `circle` elements through the `data()`, `enter()`, and `append()` chain. Each circle’s `cx` and `cy` attributes are mapped directly from the data columns, while the SVG canvas has a light gray background. The dataset mimics simple population-related coordinates, though it contains no actual population figures.

NNoWizards

84% match

Loading thumbnail…

D3 Example

This example demonstrates a simple scatter plot where circular marks are placed on an SVG canvas based on data loaded from an external CSV file. The visualization shows how data points are bound to SVG circles, with their horizontal and vertical positions determined by the `x` and `y` properties of each data record. The code uses D3.js version 3.5.5, specifically the `d3.select`, `d3.csv`, and the `data`, `enter`, `update`, and `exit` selection methods to manage the circles. All circles are styled with a uniform teal fill (`#40E0D0`) and a fixed radius of 15 pixels, while the SVG viewport is set to 250 by 250 pixels. The rendering relies entirely on SVG elements.

AAlvaroMoro

83% match

Loading thumbnail…

D3 Example

A minimal D3.js example renders a set of circles on an SVG canvas, positioning each circle based on an array of objects with `x` and `y` coordinates. The code uses D3's data join pattern—`selectAll`, `data`, `enter`, `update`, and `exit`—to append, update, and remove circle elements dynamically. The visualization is embedded in a plain HTML page with D3 version 3.5.5 loaded from a CDN, and the circles are drawn with a fixed radius of 30 pixels.

EEric Ho

82% match

Loading thumbnail…

Circles with D3

This example shows a set of seven colorful circles scattered across an SVG canvas, each with a distinct size, position, and fill color at 70% opacity. It demonstrates core D3.js v7 concepts including data binding, the General Update Pattern, and method chaining via `select`, `selectAll`, `data`, and `join` to render `circle` elements. The visualization uses static, data-driven coordinates and colors defined in a JavaScript array, rendered through an HTML import map loading D3 from a CDN. The code also showcases the `join` API for creating SVG circles within a container sized to the viewport.

CCurran Kelleher

81% match

Loading thumbnail…

Let's test D3

This example renders a single red SVG circle with a radius of 200 pixels on a 960 by 500 canvas. The visualization is built using D3 v5, where the `select` and `append` methods are used to target the SVG element and add the circle, while `attr` and `style` set its visual properties. The SVG is given a red background, and the circle inherits no fill, so it appears as a hollow ring against the colored backdrop.

MMiguel-GC

80% match

Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania

80% match

Loading thumbnail…

D3: A simple scatterplot with SVG

This example shows a simple scatterplot of ten data points, each rendered as an SVG circle and labeled with its coordinates. The chart uses the D3.js library (version 3) to programmatically build the visualization: first, the code creates an SVG canvas via `d3.select` and `.append("svg")`, then uses `.selectAll("circle").data(dataset).enter()` to map the 2D array of `[x, y]` values to circle positions and radius sizes. Red text labels are added in a similar declarative manner, with font styling applied through attribute setters. The raw coordinate pairs come from a hardcoded dataset, and the circle radius is computed from the data point’s height, creating a visual encoding of magnitude.

Nnikomc

79% match

Loading thumbnail…

d3.tsv

This example demonstrates loading and plotting tab-separated values from an external TSV file using the D3.js library. The chart displays five data points as circles on a simple scatterplot, with linear scales mapping x and y coordinates to SVG positions. The code uses the `d3.tsv` method to fetch and parse the file, then converts string values to numbers with the unary plus operator. Axes are rendered via `d3.svg.axis`, and the SVG circles are appended with the `.point` class, showing basic data parsing and visualization in a minimal setup.

Mmbostock

79% match