fresh block

100%

✓ Published0🌍 Public

Last edited Jun 18, 2017

Created on Jun 18, 2017

A scatterplot displays seven data points on a linear scale, with each point rendered as a pink-to-red circle whose fill reflects its Y value and labeled by its array index. The visualization uses D3 v4 to load JSON data, compute extents, and create SVG axes with `d3.axisLeft` and `d3.axisBottom`. Circles are appended via a data join, positioned with `xScale` and `yScale`, and colored using a `d3.scaleLinear` interpolating between pink and red. The chart is fixed at 500 by 500 pixels with a 30-pixel margin.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A scatterplot maps a small array of numbers to points where each value is paired with its square. The visualization shows a diagonal cluster of chartreuse squares rising toward the upper right, alongside a static yellow circle and a text label reading "Hello everyone!" in monospace. The code uses d3.v4 to bind data to SVG rectangles, setting their x and y positions from the mapped data points, while a console log prints the first transformed pair. The SVG canvas is 960 by 500 pixels, with the circle defined directly in the markup.

VVickyLouise

87% match

Loading thumbnail…

fresh block

This visualization displays five data points as circles positioned along a chart area. The circles are colored either purple or green depending on whether their value exceeds 100, with each point’s x and y coordinates equal to its data value. Built using d3.v4, the code appends an SVG canvas to the page and populates it with circles via the `.data().enter().append()` pattern. The fill color is determined by a conditional function, and the circle radius and positions are set using SVG attributes. The data is a hardcoded array in the script.

LLisaPicado

85% match

Loading thumbnail…

fresh block

This visualization plots five data points from a static array as green or purple circles on an SVG canvas. Each circle’s x and y coordinates equal its data value, creating a diagonal scatter pattern. The code uses d3.select and append to build SVG elements, with the d3.v4 library handling data binding. Colors are set conditionally: values over 100 appear purple, while all others render green. The circle radius is fixed at 5 pixels.

KKunnyKou

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

84% match

Loading thumbnail…

fresh block

This example shows a simple scatterplot-like chart with axes, plotting five data values between 10 and 30 on a 400-by-400 SVG canvas. It demonstrates how to use d3.scaleLinear for both x and y axes, with the y-axis scaled from the chart’s height down to zero and the x-axis scaled from zero to the data maximum. The code appends two groups to the SVG, translating them to position the axes, and uses d3.axisBottom and d3.axisLeft to render the ticks. The data is hardcoded as an array, and the visualization relies solely on d3.v4 for scaling and axis generation.

DDjokovalle

84% match

Loading thumbnail…

fresh block

A scatterplot displays four data points mapping each person's age on the x-axis against their height on the y-axis, using D3 v4's `d3.scaleLinear` and `d3.axisBottom` for scales and axes. The SVG circles are bound to an array of objects with `name`, `age`, and `height` fields, and updated through D3's data join pattern with `enter()`, `merge()`, and `exit()`. The data is hardcoded in the script, and the visualization renders as a small 200-by-200 pixel SVG with margin-based grouping.

TTamayoValencia

84% match

Loading thumbnail…

fresh block

This visualization displays three red circles on a blank canvas. It uses the D3.js v4 library to select the body element, append an SVG container, and bind an array of three numeric values as the primary dataset. The circles are then rendered using the `.data().enter().append()` pipeline, with the numeric values directly mapped to both the x and y coordinates using the `.attr("cx")` and `.attr("cy")` methods. The radius is fixed at 5 pixels, and all circles are filled with the color red.

KKerchoo

83% match

Loading thumbnail…

fresh block

This example shows a simple line chart of 21 random data points, with each point represented as a circle. The visualization uses D3.js v4 to generate an SVG, with a black line connecting the dots and interactive hover effects that turn the circles red on mouseover and fade back to black on mouseout. The code applies the margin convention, scales the data with `d3.scaleLinear`, and uses the `d3.line` generator to draw the path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart fills the browser window.

663anp3ca

83% match