Export Image
Export Code

ice_7 , question 1

1
Fork
0
Stars

tshaila

Last edited Mar 28, 2024
Created on Mar 28, 2024
Forked from HTML Starter

Scatter Plot Visualization

This project demonstrates a simple scatter plot visualization using D3.js library.

Features:

  1. Data Loading: Data is loaded from a CSV file (car_dataset.csv) using D3's d3.csv method.

  2. Scalable Vector Graphics (SVG): The scatter plot is rendered using SVG elements, allowing for scalable and responsive visualization.

  3. Interactive Tooltip: Hovering over data points displays a tooltip showing the year and kilometers driven of the corresponding car.

  4. Axis Labels: X and Y axis labels are added to denote the data dimensions.

  5. Dynamic Scales: Scales for both X and Y axes are dynamically calculated based on the loaded data.

  6. Data Binding: Data points are bound to circles, making it easy to update the visualization with new data.

  7. Styling: CSS styling is applied to the tooltip for better readability and aesthetics.

  8. External Library: D3.js library is included via CDN (https://d3js.org/d3.v7.min.js).

  9. Responsive Design: The visualization adjusts to different screen sizes using the viewBox attribute of the SVG element.

  10. Accessibility: The visualization is designed to be accessible, with tooltips providing additional information for users with disabilities.

MIT Licensed