Fork of vizhub scatterplot

100%

Fork of vizhub scatterplot

✓ Published0🌍 Public

Last edited Mar 21, 2024

Created on Mar 21, 2024

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.

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

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

83% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each red semi-transparent circle representing a vehicle. The code uses D3 v5’s `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to load data from the UCI Auto MPG dataset and render an SVG chart. Axes include tick marks and labels, while a title and rotated y-axis label are manually positioned. Filtering and data type conversion occur before rendering, matching the original example’s styling and layout.

AAlexandre Pinho

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.

78% match

Loading thumbnail…

Fork of Hello VizHub

This interactive scatterplot lets users explore the relationship between any pair of numeric variables from the auto-mpg dataset. Two dropdown menus, built with the custom `dropdownMenu` function, independently select the x and y axes. The chart updates dynamically using D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and SVG rendering. The `scatterPlot` module reuses enter/merge patterns to efficiently update circles and axis labels. Data loads via `d3.csv` and appears as semi-transparent red circles.

PPiotr Paszek

78% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes car specifications from a CSV dataset, plotting engine size against horsepower with circle size encoding mileage and color encoding car age using `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart is constructed with `d3.scaleLinear` for x and y axes, `d3.axisBottom` and `d3.axisLeft` for scales, and `d3.csv` for asynchronous data loading. A separate `scatterPlot.js` module defines a reusable chart factory with configurable accessors for dimensions, margins, and radius, following the "Towards Reusable Charts" pattern.

78% match

Loading thumbnail…

Fork of ICE-7 Reusable Scatterplot

This interactive scatterplot visualizes a car dataset, plotting various numerical attributes like mileage, price, horsepower, and displacement against each other in an animated loop. The visualization includes a legend with colored markers for car brands (Honda, Mercedes, Ferrari) and dynamically updates the x-axis every two seconds to cycle through data attributes. Built with D3.js, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for chart construction, and `setInterval` for animation. The data is loaded via `csv()` from a remote CSV file, with SVG rendering handling all graphical elements.

Mmanojgne

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.

78% match