Skip to main content
SimilarExport ZIP
100%

Basic Scatter Plot

✓ Published0🌍 Public
TTaraZhu
Last edited Sep 18, 2017
Created on Sep 18, 2017

A basic scatter plot displays the relationship between age (x-axis) and an index value (y-axis) for individual records, with points colored by a categorical status field. The visualization uses D3.js v4 to render SVG circles, with axis ticks and gridlines styled via CSS. Data is loaded from a local CSV file, and the x and y scales are computed using `d3.scaleLinear` with `d3.extent` to determine domains. A categorical color scale (`d3.scaleOrdinal`) and legend (`d3.legendColor`) distinguish the status groups.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Basic Scatter Plot

A basic scatter plot displays the relationship between age and Apo10 index, with each data point colored by status from the neg.csv dataset. The visualization uses D3 v4 to create SVG circles, with linear scales for both axes and an ordinal color scale for categorical grouping. Axis ticks are styled with custom formatting, and a color legend is generated using the d3-legend library's legendColor function.

TTaraZhu
85% match
Loading thumbnail…

Basic Scatter Plot

This static SVG scatter plot displays the relationship between patient age (x-axis) and TKTL1 index (y-axis), with points colored by negative status via a categorical color legend. Built with D3 v4, it uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.legendColor` for the color key, rendering circles with `fill-opacity` 0.6 from a CSV dataset.

TTaraZhu
83% match
Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang
80% match
Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange
79% match
Loading thumbnail…

Scatter Plot

A scatter plot displays dummy data from a CSV file, mapping the numeric `value` field to the x-axis and the categorical `index` field to the y-axis, with circle size fixed and fill color transitioning from yellow to green based on value. Using D3 v5, the code employs `d3.scaleLinear` for both x and y scales, `d3.scalePoint` for categorical positioning, and `d3.axisBottom` with a `~s` format tick label for the value axis. Circles are rendered as SVG elements with a color scale, while the chart includes axis labels and a title.

MMert Gürkan
79% 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
78% match
Loading thumbnail…

Scatter Plot

A scatter plot displays the relationship between age and monthly income for employees in a dataset loaded from a CSV file. Each circle represents an employee, with position determined by the `d3.scaleLinear` scales for age and income. Hovering reveals a tooltip with exact values. The visualization uses D3 v7 to append SVG circles, axes, and labels, with data parsed from a remote CSV source.

TTejasriKari@my.unt.edu
78% match
Loading thumbnail…

reusable scatter plot

This example demonstrates a reusable scatter plot that visualizes the relationship between age and price, with points colored by gender. It automatically alternates between two subsets of the data every five seconds, using a timer to refresh the visualization. The implementation leverages D3 v6’s modular functions, including `scaleLinear`, `scaleOrdinal`, `extent`, and `axisLeft`/`axisBottom`, within a custom chart factory function. Data is loaded from a remote CSV file and parsed, while SVG rendering and animation are handled through D3’s selection and join methods, ensuring a clean, declarative approach to updating the plot.

Vvishnupriya eupuri
78% match