Puja Maharjan

@puzzz21·2 public vizzes

Untitled

This interactive scatterplot displays the relationship between horsepower and weight for cars, with circles colored in a semi-transparent blue. Users can toggle checkboxes to switch the x-axis mapping from horsepower to a separate origin scale. The visualization uses D3.js v5 for data binding, scales, and axes, with data loaded from a CSV file via `d3.csv()`. The SVG rendering includes gridlines and axis labels, and jQuery handles the checkbox interactions that reassign the circle positions.

Nov 26, 2021

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset, with each red semi-transparent circle representing a vehicle. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and gridlines, while `csv` loads the external data and `select` manages SVG elements. Values are converted to numbers before rendering, and the title, axis labels, and tick formatting are styled via a separate CSS file.

Nov 22, 2021