Skip to main content
SimilarExport ZIP
100%

Fork of vizhub scatterplot

✓ Published0🌍 Public
Mmadipadiga.raviteja@gmail.com
Last edited Mar 21, 2024
Created on Mar 21, 2024

This scatter plot displays car safety ratings against vehicle makes, with each circle representing a car model. The visualization uses a linear scale for safety ratings on the x-axis and a band scale for car makes on the y-axis, showing the distribution of safety scores across manufacturers. Built with D3.js v7, the chart loads CSV data from a GitHub-hosted dataset and renders as an SVG. The code applies a blue fill to circles, with a green hover effect highlighting individual data points, while axis labels and tick marks are styled using the Poppins font.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of vizhub scatterplot

This scatter plot displays car safety ratings and selling prices for different car makes, using a dataset loaded from a CSV file. D3.js v7’s `d3.scaleLinear` maps the safety rating to the x-axis while `d3.scaleBand` positions each car make along the y-axis. The SVG rendering includes styled circles with hover effects, along with labeled axes from `d3.axisBottom` and `d3.axisLeft`. The code explicitly fetches the data with `d3.csv` and formats the numeric fields on ingestion.

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

Akhil- vizhub scatterplot

This scatterplot displays the relationship between car safety ratings and car makes, using a D3.js v7 bar-based layout where each circle’s vertical position corresponds to a specific make and horizontal position maps to its safety score. The visualization encodes data from a cleaned CSV dataset, with hover effects highlighting individual points. The code uses D3’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `d3.axisBottom` and `d3.axisLeft` to render axes. The SVG circles are colored blue with a green hover state, and the chart includes labeled axes for clarity.

AAkhil Charugulla
86% match
Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes car performance by plotting speed (km/h) against fuel efficiency (mpg) for five car models over four years. Each point represents a single year’s data, with distinct colors (red, blue, green, orange, purple) assigned per car brand, sourced from an embedded CSV table. Built with D3 v6, the SVG chart uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks, while circles are appended via `.selectAll().data().enter()`. The code shows a static rendering with `svg` output, and no animation or interaction is implemented.

Ssaivaishnogaruda@gmail.com
83% match
Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes car performance over four years, with speed on the x-axis and fuel efficiency on the y-axis. Each point represents a specific car-year observation, and five distinct cars are differentiated using custom SVG path shapes: circles, squares, triangles, diamonds, and crosses. The visualization uses D3 v6 to create linear scales (`d3.scaleLinear`) and axes (`d3.axisBottom`, `d3.axisLeft`), with the data defined as a hardcoded JavaScript array. The SVG rendering applies a fixed domain for speed and efficiency, and the code styles points with a stroke and fill via a CSS class.

Ssaivaishnogaruda@gmail.com
82% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example displays a scatter plot of car performance, comparing speed against fuel efficiency for five car models across four years, from 2020 to 2023. Each car is distinguished by a unique shape and color, such as circles for Car A and triangles for Car C, revealing trends in the trade-off between speed and efficiency over time. The visualization uses D3.js v6 to create an SVG with linear scales for both axes, rendering each data point as a `path` element with a `d` attribute generated from the shape definitions. Axis labels and tick formatting are added using `d3.axisBottom` and `d3.axisLeft`, with the data embedded directly in the script.

Ssaivaishnogaruda@gmail.com
81% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example shows a scatter plot of global road accidents from 2015 to 2020, with each circle representing a year’s accident count and colored by accident severity (green, orange, red for Low, Medium, High). The plot uses D3 v6 to load a CSV file via `d3.csv`, then builds an SVG with linear scales for the x- and y-axes (`d3.scaleLinear`), ordinal color mapping (`d3.scaleOrdinal`), and axis generators (`d3.axisBottom`, `d3.axisLeft`). Circles are appended and positioned using the scales, with a legend added manually alongside the axes. The data source is a global road accident CSV, and rendering is entirely SVG-based.

Llikhithakarunakarreddym@gmail.com
80% match
Loading thumbnail…

Activity6-Q3.6

This scatter plot displays car makes on the y-axis against combined performance metrics—horsepower, torque, and highway MPG—on the x-axis, with colored circles distinguishing each category. The visualization loads CSV data from a GitHub repository using d3.csv, then transforms the dataset into combined points for three metrics per car. It renders an SVG using d3.scaleLinear for the x-axis, d3.scaleBand for categorical y-axis placement, and d3.axisLeft/axisBottom for tick marks. A legend and axis labels clarify the grouped metric values.

Ssriyaalugupalli@my.unt.edu
79% match
Loading thumbnail…

Fork of vehicles Scatter Plot

A jittered strip plot shows the distribution of vehicle prices for each drive type (FWD, RWD, AWD), with semi-transparent dots colored by category. Hovering reveals tooltips with year, make, model, price, and fuel type. The visualization uses d3.csv to load data from a GitHub gist and renders circles via SVG, with d3.scaleBand and d3.scaleLinear for axes and d3.axisLeft/axisBottom for grid lines and ticks.

Ssaisathwikaguntupalli@gmail.com
78% match