Skip to main content
SimilarExport ZIP
100%

chapter 7

✓ Published0🌍 Public
EEmmanuel Chukwujindu
Last edited Apr 1, 2021
Created on Apr 1, 2021

This example visualizes six data points mapping salary to friend count using a scatterplot. D3.js v5 creates the SVG circles and axes. It uses `scaleLinear`, `extent`, `axisBottom` with negative tick sizes, and `axisRight` for the y-axis. An empty group element renders the x-axis, while the y-axis appears without an explicit transform. The circles are positioned using the scales from the hardcoded array of salary and friend values.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

activity6-task-3

This example visualizes the relationship between employee experience and salary in a scatter plot. Each circle represents an employee, with the x-axis showing years of experience and the y-axis displaying salary, while the circle’s fill color encodes the number of projects handled using a sequential blue scale. It uses D3 v6 to load CSV data from a GitHub repository and render SVG elements with `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleSequential` for color mapping.

Rrajeswariamruthabommaraju@my.unt.edu
80% match
Loading thumbnail…

Scatter plot using d3.js

This scatter plot visualizes the relationship between years of experience and salary, with each circle representing a data point from a CSV file loaded via d3.csv. The example uses d3.scaleLinear to map the data to x and y axes, with axis labels for both variables. Circles are appended to an SVG container with a fixed radius of 5 pixels and a teal fill, positioned using the scales. Axes are rendered with d3.axisBottom and d3.axisLeft, and the visualization uses d3.v6 in a simple HTML page.

Yyvarshachowdary@gmail.com
76% match
Loading thumbnail…

Creating Scatter plot using D3.js

This example shows a scatter plot of age against salary, where each dot represents an individual data point from a CSV file. The code uses D3.js v6 to load and parse the data, then applies `d3.scaleLinear` to map the values. Axes are generated with `d3.axisBottom` and `d3.axisLeft` for the x- and y-axes, respectively, and circles are appended to an SVG container. The data comes from a remote CSV hosted on GitHub, and the plot is styled with a green fill and labeled axes.

Yyvarshachowdary@gmail.com
76% match
Loading thumbnail…

circles with D3

This example demonstrates the fundamental D3.js pattern of binding data to SVG circles. It uses `d3.select` to create circles, `d3.scaleLinear` to map data values to pixel positions, and `d3.axisBottom` to render an x-axis. The visualization shows how a simple dataset of numbers translates into a scatterplot, with circle radii scaled proportionally. The code highlights the step-by-step sequence of entering, updating, and exiting elements in a D3 data join.

DDonald Bagwell
75% match
Loading thumbnail…

Pseudo Scatter Plot with D3

This example shows a minimal scatter plot of six static data points, each rendered as a circle with a 34-pixel radius on a full-screen SVG canvas. It uses D3 v7’s join pattern: `selectAll('svg').data([null]).join('svg')` creates the canvas, while `selectAll('circle').data(data).join('circle')` binds the coordinates. The visualization adapts responsively to the browser window via a fixed-position container, and the data comes from a static JavaScript array in `data.js`.

CCurran Kelleher
75% match
Loading thumbnail…

D3 Scatterplot

This example visualizes a scatterplot of eight x-y coordinate pairs, with each point labeled by its numeric coordinates. It demonstrates how to map data values to screen positions using linear scales. The visualization is built with D3.js v3 and renders to SVG. It uses `d3.scale.linear` to create the x and y scales, `d3.svg.axis` to add axes, and binds data to circles and text elements for points and labels. The code defines axes with a bottom orientation and left orientation, and applies CSS styling for the axis lines and text.

GGerardoFurtado
74% match
Loading thumbnail…

Fork of Pseudo Scatter Plot with D3

This example displays a scatter plot of seven circles positioned along a quadratic curve where each y-coordinate is the square of its x-coordinate (1, 4, 9, 16, 25, 36, 49). The visualization builds a full-viewport SVG via D3’s `select` and joined `join` operations, sizing it to the container’s dimensions, then renders the circles with `d3.r` set to 25 using the `renderCircles` function. The code separates setup and rendering into modular functions, importing data from a local `data.js` file that calculates coordinates with `Math.pow`.

Eethanrampersaud@gmail.com
74% match
Loading thumbnail…

Check

This example demonstrates a scatterplot with five circles positioned on an SVG canvas, each sized according to a numerical value. The visualization is built using D3 version 7, specifically leveraging `select`, `scaleLinear`, `extent`, and the `axisLeft` and `axisBottom` helpers. The chart maps data from an inline array of objects with `xVal`, `yVal`, and `rVal` properties to positions and radii. The code uses the declarative scale functions to compute the mapping and appends the resulting circles to the SVG element, with the axes rendered at the left and bottom edges.

Fferneyhoughedward@gmail.com
73% match