mixed multimodal random 2d

100%

mixed multimodal random 2d

✓ Published0🌍 Public

Last edited Dec 5, 2016

Created on Nov 29, 2016

This example shows a 2D scatterplot of 10,000 points, where the x-coordinate is sampled from either a normal distribution centered at 75 or one centered at 25, while the y-coordinate comes from a normal distribution centered at 50. The result is a clear bimodal cluster pattern. Using d3.v3 and the d3-random API, it generates random normal values, then maps them to SVG coordinates via a linear scale. The code appends red circles with radius 1 to the SVG canvas, rendering the distribution as a dense point cloud.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

multimodal random

Three normal distributions appear as horizontal dot plots of 10,000 samples each: blue around 25, red around 75, and purple mixing both at equal probability. A purple histogram below aggregates the mixed distribution into 50 bins. Built with D3 v4, the example uses `d3.randomNormal`, `d3.histogram`, and linear scales, rendering SVG circles and rectangles from procedurally generated random data.

PPatrick Wojda

84% match

Loading thumbnail…

Scatter Plot

This scatter plot displays ten randomly generated data points distributed across a two-dimensional plane, with each circle’s position determined by linear scales mapping the data range to pixel coordinates and its radius scaled proportionally. The visualization uses D3 v4 to create an SVG, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The code applies `d3.scaleLinear` for both x and y positioning, `d3.scaleOrdinal` with `d3.schemeCategory20` for coloring each circle, and a separate radius scale. The data originates from `d3.range(10).map(Math.random)`, producing a simple, uncluttered chart that highlights basic scatter plot construction without external data files.

BBerengerCunillera

77% match

Loading thumbnail…

Distribution Scatter 1

This example visualizes a dynamic scatter plot of 500 values sampled from a normal distribution using `d3.randomNormal`. Vertical rectangles represent each data point, positioned along the x-axis and layered with low opacity. Every five seconds, the background and foreground rectangle colors transition to a new palette, cycling through six predefined color schemes. The visualization is built with D3 v6, rendered as SVG, and uses `transition.attr` to animate color changes over one-second durations.

WWaseem Medhat

76% match

Loading thumbnail…

Large number of points

A scatterplot displays 50,000 generated points, with color and radius encoding each point’s position in the lower, core, or upper quartile range. Built with D3 v4, the visualization uses SVG circles and an animated transition to update the points when the user edits the quantile, color, or radius values. The x-axis maps the point index, while the y-axis shows the generated normal distribution values, with scales recalculated via the `d3.scaleLinear` and `d3.quantile` APIs.

CCJKraenzle

75% match

Loading thumbnail…

Canvas Scatterplot

This example renders 20,000 randomly generated points as a Canvas scatterplot, with x, y, and radius values sampled from normal distributions. It demonstrates a color-picking technique for interaction: a hidden canvas draws each point in a unique RGB color, and the visible canvas draws them in steelblue. On mousemove, the code calls Canvas `getImageData` on the hidden canvas to identify the point under the cursor, then displays a tooltip with its coordinates and radius. It uses d3.scaleLinear for axes and d3.timer for a brief animation loop.

JJverma

75% match

Loading thumbnail…

Untitled

This example demonstrates a generative scatterplot of 150 random data points. Each point is rendered as a circle with a random radius and position, mapped from a linear scale (`d3.scaleLinear`) applied to the data extent. The circles use a categorical color palette (`d3.scaleOrdinal` with `schemeCategory10`), overridden by random red and green stroke colors with variable opacity. The SVG is created via D3 v5 selection and attribute methods, with margins applied through a transform on a group element.

NNita

75% match

Loading thumbnail…

Canvas Scatterplot

Two thousand normally distributed points render as a steelblue canvas scatterplot. The code generates data with d3.randomNormal, binds it to custom elements with a d3 data join, and draws the points using Canvas 2D context arcs. A d3.timer repeatedly calls the draw function for 300 milliseconds, clearing and repainting the canvas to animate the visualization. The example uses d3.v4, with linear scales mapping the domain from 2 to 8 onto a 1400 by 750 pixel canvas.

JJverma

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

74% match