Skip to main content
SimilarExport ZIP
100%

Fork of Reusable Scatter Plot ICE-7

✓ Published1🌍 Public
118121a1545
Last edited Oct 26, 2025
Created on Oct 26, 2025

This scatter plot shows the relationship between calorie count and price for a cafe menu of drinks and snacks, using each item’s hex color to encode its identity. Built with D3 v7 (d3.select, d3.scaleLinear, d3.axisBottom, d3.axisLeft), it renders an SVG with hover tooltips that reveal the item name, category, and both plotted attributes. The legend lists categories, and the chart reads from a CSV file containing product specifications.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Kumar Danam Reusable Scatter Plot ICE-7

This reusable scatter plot displays calorie count against price for a menu of drinks and snacks, with each point colored by a category-specific hex value from the dataset. Built with D3.js v7, the chart uses the `d3.scaleLinear` API for axis scaling and `d3.axisBottom`/`d3.axisLeft` for tick marks, while tooltips appear on hover via mouse events. The SVG rendering follows a configurable function that accepts data, attribute names, and dimensions, making the visualization portable across different datasets.

KKumar Danam
85% match
Loading thumbnail…

A6_t3_q3

A reusable scatter plot visualizes the relationship between calorie content and price for menu items, with points colored by category. The D3.js v6 code uses `d3.select` to append an SVG, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for ticks. Data loads from a gist CSV, parsed with `d3.csv`, and colored via `d3.scaleOrdinal` with `d3.schemeCategory10`. Circle radius is fixed at 5 pixels.

Llingaladineshteja23@gmail.com
83% 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
82% 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
82% 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
81% match
Loading thumbnail…

ICE7 Reusable Scatter

This interactive scatter plot uses D3 v6 to visualize restaurant menu data, showing Total Sales against Orders Count with points colored by Menu Category. The visualization animates the X-axis, periodically toggling between Orders Count and Stock Availability using setInterval. Built with React-compatible reusable chart components, the example imports scatterPlot.js and the d3 csv, scaleLinear, axisLeft, and axisBottom APIs. SVG circles render with custom colors for Main Course, Beverages, Desserts, and Appetizers, alongside a manually constructed legend and axis labels.

MMahendraGullinkala
80% match
Loading thumbnail…

Reusable Scatter Plot for ICE-7

A reusable scatter plot displays three numeric attributes—weight, height, and price—from a CSV dataset, letting users switch axes via dropdown menus. Built with D3 v6, it uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` to render SVG axes, while `d3.selectAll('circle')` binds data points as steelblue circles. The chart updates by removing and reappending axes and circles on dropdown changes.

NNagasharan Sai Nandyala
80% match
Loading thumbnail…

Scatter Plot

This reusable scatter plot visualizes the relationship between calorie content and price for various beverages, with each circle representing a beverage. The chart uses D3.js v6 to load a CSV dataset, scale the axes linearly, and render circles positioned by calorie content on the x-axis and price on the y-axis. Axes are generated using d3.axisBottom and d3.axisLeft, while circles are appended as SVG elements with a steelblue fill. The static, responsive layout centers the plot on a white background, with styled text and axes for readability.

Rr79162810@gmail.com
80% match