Skip to main content
SimilarExport ZIP
100%

d3 Test visualization with scatterplot

✓ Published0🌍 Public
YYoungmoOh
Last edited Apr 23, 2020
Created on Apr 23, 2020

This d3.v5 scatterplot renders red, semi-transparent circles on a large SVG canvas, with axis labels, tick marks, and a title styled via CSS. The chart uses `d3.axisBottom` and `d3.axisLeft` to generate the axes, and the data is hard-coded in the JavaScript file, plotted via `d3.selectAll` and `d3.attr` for positioning. The visualization emphasizes simplicity, with all marks sharing a uniform color and opacity.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3: A simple, unstyled axis

This example demonstrates a basic scatterplot rendered as an SVG, with red data-point labels and axes that adopt a default, unstyled appearance. Using D3 v4, the code loads a hardcoded array of coordinate pairs and applies linear scales to map the data to a 500-by-300-pixel drawing area. The `d3.axisBottom` and `d3.axisLeft` functions generate the x- and y-axes, while circles are placed and labeled via D3’s `selectAll` and `append` chain. Data is presented without any custom styling rules, highlighting raw axis output.

深深度碎片
82% match
Loading thumbnail…

The d3 test

A basic scatterplot maps four pairs of numbers from the `xdata` and `ydata` arrays onto a two-dimensional chart. The visualization uses the D3 v2 library to create linear scales for both axes and draws circular points with a fixed radius and partial opacity. The chart renders axes via `d3.svg.axis()` and updates the points through `g.selectAll("scatter-dots")` in a `redraw()` function, though the code does not invoke this function, so only the axes and empty plotting area are visible on load.

Aavesh1998
81% 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: Drawing a Scatter Plot

This example displays a basic scatter plot of ten data points, each represented by a circle and a red text label showing its coordinates. The visualization uses D3.js v7 to append SVG circles and text elements to the document body. Circle radii are calculated as the square root of the difference between the plot height and the y-coordinate, creating a size variation tied to vertical position. The chart is drawn with a 500 by 100 pixel viewport, using the data array directly as the source for positioning.

MMarisa Tania
78% 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
78% match
Loading thumbnail…

D3 Experiment

A scatterplot of 20 fictional student marks displays each value as a pink dot, positioned with its value as both horizontal and vertical offset in viewport units, alongside a red underlined title. The example uses D3 v7 selection and join APIs, specifically `d3.select` and `d3.selectAll` with `.data()` and `.join()` to create and bind the data, then appends an SVG circle for each point. Data is hardcoded as an array in the script, and rendering uses SVG elements with absolute positioning.

YYiorgos Bagakis
77% match
Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar
77% match
Loading thumbnail…

Check

This example demonstrates a scatterplot with five circles positioned on an SVG canvas, each sized according to a numerical value. The visualization is built using D3 version 7, specifically leveraging `select`, `scaleLinear`, `extent`, and the `axisLeft` and `axisBottom` helpers. The chart maps data from an inline array of objects with `xVal`, `yVal`, and `rVal` properties to positions and radii. The code uses the declarative scale functions to compute the mapping and appends the resulting circles to the SVG element, with the axes rendered at the left and bottom edges.

Fferneyhoughedward@gmail.com
77% match