fresh block

100%

✓ Published0🌍 Public

Last edited Aug 11, 2018

Created on Aug 11, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/606739ac4cd7251f8e4df71e48abeaa2'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example shows a small scatterplot of four people, mapping their age on the x-axis and height on the y-axis. The chart is rendered as an SVG with D3 v4, using `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` for tick marks. The data is hardcoded in an array of objects and drawn as circles via `g.selectAll(".point")` in a complete enter-update-exit pattern. The code uses `d3.select` (a typo for `d3.select`) to target the SVG element and appends axis groups manually. The plot includes a title and a playful caption in Spanish.

TTamayoValencia

94% match

Loading thumbnail…

fresh block

A scatterplot displays four fictional people (John, Ivan, Gerardo, Roger) with age on the x-axis and height on the y-axis. The static SVG chart uses d3.scaleLinear for both axes and a fixed 3.5-pixel radius for each circle. The code defines an update function that selects, enters, merges, and exits circle elements using d3.select and chained selection methods, though the chart renders once with the provided data. No axes or gridlines are drawn, leaving the raw points visible.

663anp3ca

88% match

Loading thumbnail…

fresh block

This example presents a donut chart displaying the age distribution of a population, with each slice colored and labeled by age group. The chart is created using D3 v4, employing the `d3.pie` function to compute arc segments and the `d3.arc` API for rendering both the chart's path and label positioning. Data is loaded from a CSV file with columns for age and population, and the ordinal color scale assigns distinct colors to each category. The visualization renders as an SVG element, with white text labels placed at the centroid of each arc for clarity.

JJennKempCodes

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

80% match

Loading thumbnail…

fresh block

A stacked area chart displays how four unnamed data categories change over time, with each layer labeled at the right edge and a y-axis formatted as a percentage. The code loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. SVG rendering and axes are created with `d3.axisBottom` and `d3.axisLeft`.

AAsilve00

80% match

Loading thumbnail…

fresh block

This example shows an empty scatterplot-style SVG canvas with a title and a playful Spanish message. The code initializes an SVG element with a width of 400 and height of 600 pixels, selects it using `d3.select`, and logs those dimensions to the console. It relies on the D3.js v4 library loaded from a CDN, but the visualization itself contains no rendered data points or axes. The script sets up the basic structure for a future scatterplot without implementing any drawing or data-binding logic.

TTamayoValencia

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

79% match

Loading thumbnail…

fresh block

Four orange circles are drawn on a blank SVG canvas, each sized and positioned proportionally to its corresponding value in the static array `[10, 30, 50, 100]`. The example demonstrates a basic data join using d3.v5, where `selectAll("circle")` and `.data()` bind the array elements, and `.enter()` appends the shapes. Circle radii and y-coordinates reflect the data values directly, while x-coordinates increase with index. The visualization shows a simple, non-interactive mapping of numbers to visual attributes, with no axes or labels included.

IIMYin

79% match