Skip to main content
SimilarExport ZIP
100%

ICE7 - REUSABLE SCATTER PLOT VEENA

✓ Published1🌍 Public
Vveenachowdarykavuri@gmail.com
Last edited Apr 5, 2025
Created on Apr 2, 2025

This visualization shows car sales by month using a reusable scatter plot class. Each dot represents a sale, colored by car model, with jitter applied to reduce overlap among points. Hovering reveals a tooltip with model, sales, and month details. The chart includes x and y axes with labels and a legend. Built with D3 v7, it uses `d3.scaleBand` and `d3.scaleLinear` for positioning, `d3.scaleOrdinal` for colors, and SVG circles with mouse event handlers for interactivity.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7_Reusable scatter plot

A reusable scatter plot built with D3 v6 visualizes car sales across three years (2019–2021). The SVG chart maps 2021 sales to the x-axis and 2019 sales to the y-axis, with each circle representing a car type. Every two seconds, the x-axis animates to a different year's sales data, cycling through 2019, 2020, and 2021, while the y-axis remains fixed. The visualization uses responsive sizing and smooth transitions, making it a clear example of an animated, reusable D3 chart component.

RRahulbelede97@gmail.com
84% match
Loading thumbnail…

Fork of ICE7 - REUSABLE PIE CHART VEENA

This reusable pie chart visualizes total car sales by model across six months, aggregating raw data with d3.rollup and d3.sum to show each model's share as a colored slice. The chart renders as SVG using d3.pie and d3.arc, with labels positioned via labelArc.centroid and an interactive tooltip that displays percentage values on mouseover. A legend with a background box accompanies the pie, and the code uses d3.scaleOrdinal for color mapping and a custom PieChart class for reusability.

Vveenachowdarykavuri@gmail.com
83% match
Loading thumbnail…

ICE 7 Reusable scatter plot (Sai Kaushik Ganji)

This interactive scatter plot shows car sales data, displaying price in thousands of USD against horsepower for individual vehicles, with point size reflecting engine size and color/shape encoding vehicle type. The visualization uses D3.js v7’s `d3.csv` to load and parse the Car_sales dataset, and employs `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` to map numeric and categorical variables. Marks are generated using `d3.symbol()` with varying symbol shapes, including circles, crosses, and triangles, demonstrating a reusable charting function that separates configuration from rendering.

SSai Kaushik Ganji
83% match
Loading thumbnail…

ICE-7

This animated scatter plot visualizes used car data, comparing selling price against various attributes including maximum power, mileage, and kilometers driven. The visualization cycles through different x-axis variables every two seconds, allowing viewers to explore correlations between car characteristics and market value. Built with D3.js, the chart uses a reusable scatter plot function with linear scales for both axes, implementing smooth transitions through a `setInterval` callback. The SVG rendering incorporates the Share Tech font and displays data points as circles, with axis labels updating dynamically to reflect the currently selected variable.

RRaajithaSabbineni
83% match
Loading thumbnail…

ICE - 7 Reusable D3 Scatter Plot

This example shows a reusable scatter plot that displays sales figures over time, with each circle representing a data point. It uses D3.js version 7 to render the visualization as SVG elements, with a band scale on the x-axis for categorical years and a linear scale on the y-axis for continuous sales values. The code leverages `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while interactive tooltips appear on mouseover using D3 event handlers. Data is loaded from a CSV file using `d3.csv`, and the plot includes animated transitions for tooltip visibility.

Yyvarshachowdary@gmail.com
83% match
Loading thumbnail…

ICE-reusable scatter

This example demonstrates a reusable scatter plot implemented with D3.js, visualizing a used car dataset. It plots selling price against various attributes—max power, kilometers driven, mileage, or selling price—which rotate automatically every two seconds. Each point is color-coded by car status (sold in green, unsold in red) with a legend. The chart leverages D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` APIs, and uses SVG rendering with animated transitions between attribute axes.

RRaajithaSabbineni
82% match
Loading thumbnail…

Fork of Fork of ICE7 - LINE CHART VEENA

Five side-by-side line charts compare monthly car sales for different models, with each chart using a distinct color and interactive dots that reveal model, month, and sales figures in a tooltip on hover. The visualization is built with D3 v7, using a reusable `LineChart` class that filters the dataset by model, scales the data with `d3.scalePoint` and `d3.scaleLinear`, and renders lines via `d3.line`. SVG axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while mouseover transitions animate the tooltip’s opacity.

Vveenachowdarykavuri@gmail.com
82% match
Loading thumbnail…

ICE-7 Reusable Scatterplot

This reusable scatter plot, built with D3.js, visualizes the cars dataset, plotting Mileage on the x-axis and Price on the y-axis, with each point colored by car brand (Honda, Mercedez, Ferrari). The chart includes labeled axes, a legend, and a title, all rendered as SVG. The visualization animates by cycling through the dataset's numeric columns (disp, Mileage, hp, Price) as the x-value every two seconds, demonstrating the chart's reusability through a configurable `scatterPlot` function that leverages D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs.

Mmanojgne
82% match