Skip to main content
100%

Gist 4d4e90bc085ad356a5c5cac2755b91b9

✓ Published0🌍 Public
Aadamjanes
Last edited Mar 17, 2018
Created on Mar 17, 2018

A scatterplot maps student GPA on the x-axis against height on the y-axis, using D3.js to render circles with a fixed radius of 5 pixels and grey fill. The code binds data to circle elements via `d3.select("#canvas").selectAll("circle")`, then appends new circles with `.enter()` and positions them using the scale functions `x(d.gpa)` and `y(d.height)`. The example demonstrates basic SVG circle creation from an array of data objects, with no axes or interactivity shown.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 8548490d909ebd28976aae6f26b74048

A scatterplot drawn on an HTML canvas displays each record from a dataset as a grey circle, with horizontal position mapped to GPA and vertical position mapped to height. The code uses D3.js to select the canvas element and append circle elements for every item in the `data0` array, setting their `cx` and `cy` attributes accordingly. The visualization shows the distribution of GPA against height, with a fixed radius of 5 pixels for all points.

Aadamjanes
90% match
Loading thumbnail…

Gist e4c1b21e553b04d66d0a22279bf0a766

This example demonstrates how D3.js handles data joins by updating circles on a scatterplot, where each circle’s position is mapped from GPA and height values. New data elements enter the visualization as small grey circles, appended via `circles.enter().append("circle")`, with their horizontal and vertical coordinates set using the `x` and `y` scale functions. The code explicitly assigns the circle’s radius to 5 pixels and fill color to grey, showing a basic static rendering of newly added points without transition or animation.

Aadamjanes
88% match
Loading thumbnail…

Gist dea55f0103ffa19a24d77facd9624b58

Two small scatterplots compare GPA against height for two separate student groups, using circles positioned by Cartesian coordinates. The code loads data arrays with six and nine points respectively, then renders them with D3.js, likely via `d3.forceSimulation` for layout or a standard scale-based plot. Each dot encodes the paired numerical values, and the minimal styling keeps focus on the distribution difference between the datasets, though no axes or labels are drawn in the provided snippets.

Aadamjanes
88% match
Loading thumbnail…

Gist c2eea6a36d935cfbe01d807d9b149d0e

A scatterplot of student grade point averages against heights flickers between two datasets every second, swapping the points to show how the axes rescale to fit the new data. Built with D3.js, the visualization uses `d3.scaleLinear` to map the domains, `d3.axisBottom` and `d3.axisLeft` for the axes, and a `d3.interval` timer to trigger the update. The `update` function reuses existing circles via `enter` and `exit` selections, appending new ones with a radius of 5 and filling them grey.

Aadamjanes
86% match
Loading thumbnail…

Gist 1966586a209f68b2ce9a3826496a42d4

A scatterplot animates the transition of individual data points between two quantitative axes, plotting GPA against height. The D3.js code uses a single shared transition (`t`) to coordinate exit, update, and enter selections, moving circles vertically while fading opacity. Entering circles appear grey and semi-transparent at the baseline before transitioning to full opacity at their target height, while exiting circles fade back down. The animation relies on D3's data join and `transition` API to smoothly interpolate circle positions and opacity.

Aadamjanes
85% match
Loading thumbnail…

Gist 4fd2027fce22d7cd0c0df0face9bba2c

This scatterplot shows the relationship between grade point average and height in centimeters, with each point representing an individual. The visualization uses D3.js to render the axes, employing `d3.axisBottom` for the x-axis and `d3.axisLeft` for the y-axis. Axis labels are appended directly to the axis groups, with the x-axis titled "Grade Point Average" and the y-axis rotated to read "Height / Centimeters." The data is plotted against these quantitative scales, though the underlying dataset is not visible in the code excerpt.

Aadamjanes
82% match
Loading thumbnail…

Gist 43fbaf9c6adc2c8fa5ca639d1599e20e

This example shows how D3.js updates existing circle elements when the underlying dataset changes. The visualization binds new data to previously rendered circles, then repositions them by setting their `cx` and `cy` attributes through the `x` and `y` scale functions, which map `gpa` and `height` values to screen coordinates. Using the data join pattern, the code explicitly targets old elements present in the new data array. The scales are defined elsewhere, but the update logic relies on D3’s selection and attribute methods to reflect the changed data without recreating the entire scene.

Aadamjanes
77% match
Loading thumbnail…

d3 circle practice

A scatterplot displays 50 randomly generated data points as small black circles on an SVG canvas, with teal axes and tick labels. Clicking the prompt above the chart generates a new random dataset, triggering a transition where circles grow to magenta, scale based on their y-values via `d3.scaleSqrt`, and then shrink back to black after the axes update. The code uses D3 v4 with `d3.axisBottom`, `d3.axisLeft`, and `clipPath` to constrain drawing, animating position and appearance through `transition().duration()`.

Aadammak137
77% match