Skip to main content
SimilarExport ZIP
100%

Akhil- vizhub scatterplot

✓ Published2🌍 Public
AAkhil Charugulla
Last edited Mar 20, 2024
Created on Mar 18, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of vizhub scatterplot

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.

Mmadipadiga.raviteja@gmail.com
86% match
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
83% match
Loading thumbnail…

Akhil Pie Chart -Cars

This pie chart displays the aggregated selling price of cars grouped by make, with a legend and a data table alongside the visualization. The chart uses D3.js v7 to compute the pie layout and arc paths, while a sequential color scale maps each car make to a distinct color. The code loads CSV data, groups it by car make, and sums the prices using d3.group and d3.sum. Hovering over a segment reveals a tooltip with the make and total price. The SVG rendering includes an interactive legend and a styled HTML table, all set against a light blue background.

AAkhil Charugulla
79% match
Loading thumbnail…

Akhil -vizhub assignment bat-scatter

This bar chart displays the total price of vehicles aggregated by vehicle type, showing that SUVs and hatchbacks have the highest sales values. The visualization uses D3.js v5 within a React component to load CSV data from a GitHub gist, aggregate prices by type using JavaScript’s reduce, and render horizontal bars via SVG rect elements. Axes are created with d3.axisBottom and d3.axisLeft, while scales from d3.scaleBand and d3.scaleLinear map vehicle types to bar positions and lengths. The chart includes labeled axes for “Average Price” and “Vehicle Type,” with hover effects defined in CSS.

AAkhil Charugulla
78% match
Loading thumbnail…

Fork of Akhil -vizhub assignment bat-scatter

This visualization shows a horizontal bar chart of car sales prices aggregated by car type, using a bat-scatter style layout. The code loads CSV data from a remote GitHub gist, aggregates the Price field by Type, and renders bars with SVG in a React app. It uses D3 v5 functions like `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisBottom`/`axisLeft` for axes. The bars are colored with an RGB scale, and the chart includes labeled axes for average price and car sales.

MM
78% match
Loading thumbnail…

Fork of Akhil -vizhub assignment bat-scatter

This example visualizes the relationship between car type and total price using a bar chart, with horizontal bars showing aggregated price sums per car category. The code uses React state and effects to load CSV data via D3’s `csv` method, then aggregates prices by car type with a reduce operation. D3’s `scaleBand` and `scaleLinear` map the categorical types and continuous price values, while `axisBottom` and `axisLeft` render the axes. The SVG rendering approach positions bars and labels, with title text annotating the chart. Data comes from a cleaned cars dataset hosted in a GitHub gist.

MM
77% match
Loading thumbnail…

Fork of Akhil -vizhub assignment bat-scatter

This bar chart visualizes the total vehicle price aggregated by vehicle type, showing how different car categories contribute to overall sales value. The chart uses horizontal bars with a green fill that darkens on hover, displaying the summed prices along a linear x-axis scale while the vehicle types are listed on a band y-axis. The visualization is built with React and D3.js v5, using the `csv` loader to fetch the cars dataset from a GitHub gist and the `scaleBand` and `scaleLinear` functions to construct the axes. Data is aggregated on the client side by reducing the raw records by the "Type" field, with axis labels for "Average Price" and "Vehicle Type" clarifying the chart's purpose.

KKusumaKumariDama@my.unt.edu
77% match
Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between movie ratings and ranks across a dataset of films, with each circle representing a movie. The visualization uses D3 v5 within a React framework, leveraging `d3.csv` for data loading, `d3.scaleLinear` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` for tick marks and gridlines. Rendered as an SVG, the plot includes axis labels, a title, and red semi-transparent circles. The data comes from an external `movies.csv` file, and the code parses numeric fields before plotting.

AAkhilesh7866
76% match