Skip to main content
100%

Gist 8548490d909ebd28976aae6f26b74048

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

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 4d4e90bc085ad356a5c5cac2755b91b9

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.

Aadamjanes
90% 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
85% 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
84% 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
83% 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
83% 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
82% match
Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

AAlexDaGr8
76% match
Loading thumbnail…

Gist 65b32812a88403c5b2c49fc2de450136

This example shows how to map two quantitative data fields—GPA and height—to screen positions using linear scales. The code defines an x-scale that translates GPA values into a horizontal range of 0 to 800 pixels, and a y-scale that maps height values to a vertical range of 500 to 0 pixels (reversed for typical Cartesian orientation). Both scales compute their domains dynamically from the data, expanding the minimum and maximum by 5% to add padding. The implementation uses D3.js’s `d3.scaleLinear` with explicit `.domain()` and `.range()` calls, relying on `d3.min` and `d3.max` to derive the input extents from the `data0` array.

Aadamjanes
75% match