fresh block

100%

✓ Published0🌍 Public

Last edited Aug 11, 2018

Created on Aug 11, 2018

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.

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

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

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

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

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

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

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

77% match