Skip to main content
SimilarExport ZIP
100%

Kumar Danam Reusable Scatter Plot ICE-7

✓ Published0🌍 Public
KKumar Danam
Last edited Oct 27, 2025
Created on Oct 27, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable Scatter Plot ICE-7

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.

118121a1545
85% 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
81% 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
81% 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
79% 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
79% 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
78% 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
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
77% match