Skip to main content
100%

d3 random circle practice

✓ Published0🌍 Public
Aadammak137
Last edited Jul 8, 2018
Created on Jul 8, 2018

This example maps an array of coordinate pairs to an SVG scatterplot, encoding each point as a circle whose radius reflects the y-value. The code uses d3.scaleLinear for the x and y axes, d3.scaleSqrt for the radius, and d3.axisBottom and d3.axisLeft to draw teal axes. It renders circles and red coordinate labels, then animates a one-second transition that recolors each circle teal and shrinks its radius to 3. The data is hardcoded in a JavaScript array.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/adammak137/'>adammak137</a>'s block: <a href='http://bl.ocks.org/adammak137/b55abfa6bad0ce96b9637070d07bd832'>d3 random circle practice</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3 random circle

This visualization maps eleven coordinate pairs from a hardcoded data array to circles in an SVG scatterplot, with each point labeled by its x and y values. It uses d3.scaleLinear for the x and y axes, d3.scaleSqrt for circle radius, and d3.axisBottom and d3.axisLeft for the teal-styled axes. After drawing the circles and red text labels, a d3 transition animates each circle over one second, changing its fill to teal and shrinking its radius to 3.

Aadammak137
94% match
Loading thumbnail…

d3 random circle practice

This visualization plots a static set of 11 coordinate pairs as red-labeled circles on an SVG canvas, with each circle’s position scaled by linear x and y axes and its radius by a square-root scale. The code uses d3.scaleLinear, d3.scaleSqrt, d3.axisBottom, and d3.axisLeft to build the chart, then applies a one-second transition that recolors all circles to teal and shrinks their radii to 3 pixels. The data is an inline array, and rendering relies on SVG elements with d3.v4.

Aadammak137
93% match
Loading thumbnail…

random circle 3d practice

This example plots a set of 2D coordinates as circles in an SVG, with each circle’s position and radius scaled using d3.scaleLinear and d3.scaleSqrt. Axis lines and tick labels are drawn via d3.axisBottom and d3.axisLeft, while red text labels display each point’s raw values. After the initial render, all circles transition over one second, shrinking to a radius of three and filling with teal, demonstrating d3.transition on SVG circle elements. The data is a hardcoded array of coordinate pairs, and the visualization uses D3 v4 with SVG rendering and animation.

Aadammak137
92% match
Loading thumbnail…

d3 circle practice

A scatterplot displays 50 randomly generated data points as small black circles on an SVG canvas, with teal axes and tick labels. Clicking the prompt above the chart generates a new random dataset, triggering a transition where circles grow to magenta, scale based on their y-values via `d3.scaleSqrt`, and then shrink back to black after the axes update. The code uses D3 v4 with `d3.axisBottom`, `d3.axisLeft`, and `clipPath` to constrain drawing, animating position and appearance through `transition().duration()`.

Aadammak137
91% match
Loading thumbnail…

d3 circles

This example displays a scatterplot of 50 randomly generated data points, each positioned by x and y coordinates on linear scales. The circles transition from teal to black with varying radii based on the y-value. Clicking the prompt above the chart generates new data points, triggering animated transitions that update circle positions, radii, and the axes using d3.axisBottom and d3.axisLeft. The visualization uses d3.v4 with SVG rendering, including a clipPath to contain the circles within the chart area.

Aadammak137
88% match
Loading thumbnail…

D3: Scaled scatterplot, using a square root scale for circle areas

This example shows a random dataset of 50 points rendered as circles in a scatterplot, with circle area scaled by the y-value using `d3.scaleSqrt`. The SVG chart includes linear x- and y-axes styled with teal strokes and bold labels. The code loads D3 v5 and uses `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for ticks, and randomly generated numbers for the data. The `aScale` maps the y-domain to a radius range of 0 to 10, while padding keeps the axes visible. No labels are drawn, as the text elements are commented out.

Nnikomc
82% match
Loading thumbnail…

D3 tutorial

This example shows a scatterplot of 50 randomly generated data points, with each point’s position and radius mapped using linear scales. The visualization demonstrates how D3.js 3.5.5 creates axes and scales for dynamic data, drawing circles as SVG elements. The x- and y-axes are rendered using `d3.svg.axis`, with tick formatting applied as percentages on the x-axis. The code uses `d3.scale.linear` for positioning and radius, and the data is generated on the fly with `Math.random`. The tutorial source is from alignedleft.com, and the SVG rendering approach is explicit in the markup.

CChristosT
82% match
Loading thumbnail…

simple animation

This example demonstrates an interactive scatterplot of 1,000 randomly generated circles. The data is created on the fly and rendered as SVG circles within a full-window visualization. Using the D3.js library (version 7.8.5), the code applies linear scales to map random values to screen coordinates and circle radii. Hovering over a circle triggers a transition via the `transition` API, animating the circle to a new random position over one second with an elastic easing effect.

NNeeraj Kumar
81% match