fresh block

100%

✓ Published0🌍 Public

Last edited Aug 23, 2018

Created on Aug 22, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

80% match

Loading thumbnail…

fresh block

This example shows a simple line chart with circular dots plotted against a linear scale, where both axes use a value range of 0 to 1. The visualization begins with a static rendering, but the dots respond to mouseover and mouseout events, changing color to red and scaling up briefly before returning to black. The code uses D3 v4 with `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to generate the chart, while SVG circle elements handle the interactive hover behavior via `transition().duration(500)`. Data is randomly generated with `d3.randomUniform`, and the chart fills the browser window.

663anp3ca

80% match

Loading thumbnail…

fresh block

Four small multiples display vertical bar charts, each with its own set of bars and labeled axes. D3 v3 is used to generate the charts, with `d3.scale.ordinal` and `d3.scale.linear` mapping data to positions and heights. A click on the text in the fourth panel triggers a one-time update, replacing the existing bar data via `d3.select` and `data()`. The axes are rendered with `d3.svg.axis` and styled with black strokes.

NN0taN3rd

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

78% match

Loading thumbnail…

fresh block

A bar chart displays six hardcoded numeric values as vertically scaled blue rectangles, with white strokes separating them. Each bar's height is proportional to the value divided by the maximum of the dataset, computed using `d3.max`. The chart renders in SVG via `d3.select` and `selection.append`, positioning bars with `attr('x')` based on their index and using a percentage-based height. The data is static, and the visualization uses d3.v4 without axes or labels.

MMilliners-Son

78% match

Loading thumbnail…

fresh block

A simple bar chart displays five hardcoded values—10, 30, 15, 20, and 100—as vertical rectangles. The chart uses D3 v4’s selection and `append` API to create SVGs directly: `d3.select("body").append("svg")` builds the canvas, then `.selectAll("rect").data(data).enter()` generates bars whose height, y-position, and opacity are derived from each data value. Text labels repeat the same numbers below each bar using `d3.selectAll("text")`, with fixed styling for font size and monospace family. All geometry and styling are set via SVG attributes and styles, with no axes or gridlines present.

GGregory-Howard

78% match

Loading thumbnail…

fresh block

A set of five blue rectangles forms a simple bar chart, with each bar’s height directly proportional to values from an inline array. The code uses D3 v4’s selection and data-binding methods (`selectAll`, `data`, `attr`) to map each data point to an SVG `rect`, positioning bars side‑by‑side along the x‑axis and scaling their y‑positions and heights from a fixed baseline. The bars are evenly spaced using a constant `rectWidth`, while the SVG’s total height is fixed at 300 pixels. The chart is rendered entirely with SVG elements and hardcoded data, without scales or axes.

DDanielAguirre

78% match