Skip to main content
SimilarExport ZIP
100%

ICE6-Prathima-scatter plot

✓ Published0🌍 Public
Ppilliprathimarani@my.unt.edu
Last edited Mar 21, 2024
Created on Mar 20, 2024

This scatter plot displays the relationship between the price and sales volume of various items, with each data point represented as a circle. The visualization uses D3.js version 7 to fetch data from a remote CSV file via `d3.csv`, then renders the chart as an SVG using `d3.scaleLinear` for both axes. Interactive tooltips appear on mouseover, displaying the item name, price, and sales volume. The axes are labeled and the chart includes a title, with styling applied through a separate CSS file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6-Prathima -coffee-Bar chart

This bar chart visualizes the sales volume of different coffee shop menu items, with each bar representing a specific coffee type. The data is loaded from a remote CSV file via `d3.csv` and parsed to convert sales figures into numbers. Using D3.js v7, the chart applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the chart includes a title and axis labels. The x-axis labels are rotated for readability, and bars change color on hover.

Ppilliprathimarani@my.unt.edu
81% match
Loading thumbnail…

Reusable D3 Scatter Plot -ICE 7 -Prathima

This animated scatter plot explores the Iris Dataset, cycling the x-axis between price and sales volume every two seconds while the y-axis remains fixed on sales volume. Built with D3.js (v7), the visualization uses a reusable chart component created via a closure pattern, employing `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circle elements for data points. The chart's dimensions, margins, and radius are configurable through a fluent API, and a 2-second interval triggers data re-rendering with updated x-axis mappings.

Ppilliprathimarani@my.unt.edu
81% match
Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes store sales data, showing the relationship between sales and the number of orders for products across multiple categories, with each category assigned a distinct color. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub gist, then applies `scaleLinear` and `extent` to map the axes, with `axisLeft`, `axisBottom`, and SVG circles rendering the points. Axis labels are styled via CSS and SVG text elements.

Llibramanju
81% match
Loading thumbnail…

ICE7

This interactive scatter plot visualizes the relationship between sales and profit using a cleaned sales dataset loaded via D3’s `csv` method. It uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and renders circles with SVG. A custom tooltip displays category, sales, and profit values on mouseover. The chart includes axis labels and a title, with data cleaning applied to handle formatting and invalid entries.

Ssrinathkarumuru@my.unt.edu
81% match
Loading thumbnail…

ICE6 - Scatter Plot

This scatter plot visualizes the correlation between sales and profit using a dataset from a public GitHub repository. The visualization displays individual data points as circles, with sales on the x-axis and profit on the y-axis. The code uses d3.csv to load and parse the data, d3.scaleLinear to map the data values to pixel coordinates, and d3.axisLeft and d3.axisBottom to render the axes. The chart renders as SVG, with each data point represented by a circle of radius 5, and includes axis labels for both dimensions.

Kkuraakhila9@gmail.com
80% match
Loading thumbnail…

ICE7 - Scatter Plot

A reusable scatter plot built with D3.js 6.7.0 visualizes sales, profit, and discount data from a remote CSV file. The plot displays circles for each data point, with axes and labels, and each circle is rendered with a white stroke and black fill. Every two seconds, the plot cycles the x-axis between the Profit, Discount, and Sales columns, updating the axis labels and re-rendering the points accordingly. The implementation uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scaling and axis generation.

Kkuraakhila9@gmail.com
80% match
Loading thumbnail…

ICE-7 SAKETH SARA

This scatter plot displays the relationship between sales and profit for a set of products. The visualization maps sales values along the horizontal axis and profit along the vertical axis using d3.scaleLinear and d3.axisBottom/axisLeft. Data is loaded asynchronously from a CSV file via d3.csv with d3.autoType. Each product is rendered as an SVG circle with fill color #2563eb, and hovering reveals a custom tooltip showing the product name, sales, and profit values.

Ssarasaketh3@gmail.com
79% match
Loading thumbnail…

ICE-6 Yearly Sales Scatter Plot

A scatter plot displays yearly sales data as steelblue circles, with orange highlighting on hover. The chart maps the Year and Sales fields from a CSV file onto linear scales, with axes labeled accordingly. Built with D3 v7 in a React environment, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisBottom`/`axisLeft` for axis generation, rendered as SVG circles sized at a fixed radius.

Aarchanagoli@my.unt.edu
79% match