Scatter Plot

100%

✓ Published1🌍 Public

Last edited Aug 11, 2020

Created on Aug 11, 2020

This scatter plot displays the number of interventions per procedure category, using a categorical y-axis and quantitative x-axis. SVG circles mark the values, with gridlines and axis labels for readability. The visualization is built with React and D3 v5, using functions like `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to map data from `data.csv`. Axis ticks are formatted and styled via CSS, and the plot includes a title and axis labels within an SVG canvas.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

HTML Starter

This example shows a horizontal bar chart displaying the number of interventions across different procedure categories, such as "CAB alone" and "Valve alone." The data comes from a CSV file loaded via `d3.csv`. The chart uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars. A logarithmic tick format using `format` converts large numbers, and the chart includes custom axis labels and a title, all styled via an external CSS file.

Ggregosaure

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

76% match

Loading thumbnail…

ScatterPlot

This example displays a scatter plot of work-related variables, with each point representing an initiative and color-coded by its category. The visualization loads CSV data from a GitHub repository and uses the vega-lite-api to construct the chart, with custom styling applied through a config object. The plot is rendered as an SVG, and interactive tooltips show initiative names on hover. The code integrates React for state management and uses d3.csv for data parsing, with VEGA-Lite handling the quantitative encodings for both axes.

Mmayhob

75% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables from a CSV dataset, plotting each point with x and y coordinates. It uses D3 version 6 with an SVG rendering approach, employing `d3.scaleLinear` to map the data domains to pixel ranges and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded asynchronously via `d3.csv`, and circles are appended and joined to the data using `.join('circle')`. The plot is styled with a teal fill and includes axis labels for "Numbers" and "Amount."

Bbugfree55

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

74% match

Loading thumbnail…

Scatter Plot

A scatter plot displays the relationship between item weight and item rate from a CSV dataset, with each point positioned by d3.scaleLinear scales and rendered as an SVG circle. The visualization includes axes with tick marks, axis labels, and a title, all styled via CSS. The code uses d3.csv, d3.extent, d3.axisLeft, d3.axisBottom, and d3.format for data loading, scaling, and formatting, while React serves as the framework hosting the D3 v5 implementation.

BBaraneedharan N M

73% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot lets users explore attributes from the inpatient rehabilitation utilization dataset by selecting which variable appears on each axis via dropdown menus. The visualization renders as an SVG using React components, with D3 v5 functions such as `scaleLinear` for axis scaling and `extent` for domain calculation. Axes are built from custom `AxisBottom` and `AxisLeft` components that generate tick lines and labels, while circular marks include tooltips showing formatted payment values. The layout separates menu controls from the chart area, and the styling uses the Poppins font with distinct tick and label colors.

Ddeltiger

73% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, showing relationships between numeric attributes while allowing users to change the X and Y variables through dropdown menus. The visualization uses React for state management and rendering, with D3.js v5 scales and SVG marks. Axis components generate ticks via scale methods, while circle elements with embedded titles serve as tooltips. The plot retrieves CSV data using d3.csv and scales the axes with scaleLinear.

MMichael Bergerson

73% match