Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published0🌍 Public
Aanniehoshi18
Last edited Jul 16, 2020
Created on Jul 13, 2020
Forked from Scatter Plot

This scatter plot visualizes the heat values of different foods, mapping each food type along the y-axis and its heat value along the x-axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to position circular marks, with SVG rendering for the plot. Data is loaded from a local JSON file via `json()`, and axes are generated using `axisLeft` and `axisBottom`. The x-axis labels are formatted with `format`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

1 dimensional Scatter Plot

A one-dimensional scatter plot displays discrete quantities for categorical food items, with each circle positioned along a linear scale for quantity and a point scale for item names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering circles as SVG elements. Data loads from a local CSV file containing item and quantity pairs. The chart includes labeled axes, a title, and horizontally aligned tick marks that extend across the plot area to aid comparison.

FFhouston17
77% match
Loading thumbnail…

Scatterplot (Canvas)

This interactive scatterplot displays nutritional data for various foods as colored dots on a canvas. Users can switch the X and Y axes via dropdown menus to explore relationships between nutrients such as protein, calcium, sodium, and calories. Built with D3.js v2 and rendered on an HTML5 canvas, it uses Underscore.js for data handling and updates the visualization dynamically without page reloads. Hovering over a point reveals the food name in a dedicated readout. The example shows how D3 can drive canvas-based scatterplots with axis controls and linked tooltips.

GGerHobbelt
77% match
Loading thumbnail…

Scatter Plot

This reusable scatter plot displays the relationship between calorie content and price for inventory items, with each circle positioned along the x- and y-axes according to those numeric values. Built with D3 v6, the visualization loads a CSV file and maps its fields to linear scales, using `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` to generate tick marks and labels. The SVG output renders circles with a fixed radius and steel-blue fill, while axis titles clarify the measured variables.

Rr79162810@gmail.com
75% 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
75% 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
75% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between calorie content and price for menu items, with each point colored by category using a D3 ordinal color scale. The visualization uses `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Data is loaded asynchronously from a GitHub gist via `d3.csv`, then mapped to SVG circles with `d3.select` and `append`. The SVG rendering includes styled axes and labeled dots within a fixed 460×400 viewport.

Vvp9156623@gmail.com
75% match
Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the relationship between calorie content and price for food items, with each point colored by category using a categorical color scale. Built with D3 v6, the visualization renders as an SVG and loads data from a CSV file hosted on GitHub. The code defines linear scales for both axes, maps data values to circle positions, and applies the `d3.scaleOrdinal` color scheme with `d3.schemeCategory10` for category-based coloring.

Mmadipadiga.raviteja@gmail.com
75% match
Loading thumbnail…

Scatter Plot

This reusable scatter plot visualizes the relationship between calorie content and price for menu items, with each circle colored by category. The visualization uses D3.js v6 with an SVG rendering approach, loading data from a CSV file hosted on GitHub Gist. The code implements linear scales for both axes, an ordinal color scale using `d3.schemeCategory10`, and renders circles positioned by the x and y scales. Axis construction uses `d3.axisBottom` and `d3.axisLeft`, while the data loading relies on `d3.csv` with promise handling. The chart displays points with a radius of 5 pixels, colored according to categorical values.

Rr79162810@gmail.com
75% match