Basic Chart, simple dataset

100%

Basic Chart, simple dataset

✓ Published1🌍 Public

Last edited Mar 14, 2020

Created on Mar 13, 2020

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.

AI-generated description

Bar chart to display population data of most populated countries in the world United Nations: world population prospects 2017 page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Basic Chart, simple dataset

This example displays two overlaid line charts, each plotting a distinct series from a tab-separated dataset against the same x-axis. The visualization uses D3 v5 to load data via `d3.tsv`, applies linear scales (`d3.scaleLinear`) to map x and y values, and renders the series as both green and steel-blue circles and connected paths using `d3.line`. The SVG output is transformed by a 25-pixel offset, while the dataset contains paired y-values across nine x-points.

NNoWizards

86% match

Loading thumbnail…

D3 Example 1

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.

OOleJRask

84% match

Loading thumbnail…

fresh block

This example shows a simple scatterplot-style visualization of five circles, with each circle's position and color determined by its data value. The circles are placed horizontally and vertically based on the array `[25, 50, 125, 75, 100]`, and they turn purple when the value exceeds 100, otherwise yellow. The visualization uses D3 v4, selecting the body element, appending an SVG, and binding data with `selectAll` and `enter()`. Circle radii are fixed at 10, while `cx` and `cy` attributes derive directly from the data points, creating a one-dimensional distribution of distinct colored dots.

BBrieLewis

80% match

Loading thumbnail…

World population data set

This visualization displays a simple array of five red circles representing fruit data, arranged horizontally across an SVG canvas. The circles are evenly spaced using index-based positioning, with a fixed radius of 50 pixels. The code uses D3 v5's `select` and `range` utilities to generate the fruit dataset and bind it to circle elements via the data-join pattern. The SVG dimensions are dynamically read from the HTML attributes and parsed as numbers using the unary plus operator, centering the circles vertically. The example demonstrates fundamental D3 data-binding and SVG rendering techniques within a React framework setup.

AAnShed

78% match

Loading thumbnail…

D3.js

This example shows a scatterplot of population values from a CSV file, rendered as red circles on a black SVG canvas. It demonstrates basic data binding and enter/exit updates in D3 version 6, using `d3.select`, `d3.csv`, and `svg.selectAll` with `.enter()` and `.exit()`. The code initially positions circles using arbitrary random coordinates derived from each population value, then removes and re-adds a circle to illustrate update patterns. The positions do not correspond to meaningful axes, emphasizing the data-binding mechanics rather than accurate visualization.

IInnoFail

78% match

Loading thumbnail…

1 Circles with D3

A D3.js data visualization displays fourteen colored circles at fixed positions with varying radii and hex fills across an SVG canvas. The code imports circle data from a separate JavaScript module and uses D3's `select` API with a data join to append and configure each `circle` element. Rendering targets a 960 by 500 pixel SVG, with the visualization defined in a reusable function that binds the dataset to attributes like `cx`, `cy`, `r`, and `fill`.

BBismark Kofi Owusu Sarfo

78% match

Loading thumbnail…

Circles with d3

A static SVG visualization displays six concentric circles centered at the same point, each with a progressively smaller radius and a distinct fill color (red, green, blue, yellow, purple, orange) outlined in black. The circles are rendered using D3 v7’s data join pattern, where an array of circle objects with explicit `cx`, `cy`, `r`, `stroke`, `strokeWidth`, and `fill` properties is bound to SVG circle elements via `.data()` and `.enter().append()`. The example demonstrates basic shape creation and attribute binding with D3, using a hardcoded dataset rather than external data or animation.

BBar Shopen

78% 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

77% match