Skip to main content
SimilarExport ZIP
100%

Activity7_task2

✓ Published0🌍 Public
MMili Patel
Last edited Apr 6, 2025
Created on Apr 6, 2025
Forked from Hello VizHub

This example visualizes car sales data with two charts. The first is an area chart of selling price over time, using a time-based x-axis and a linear y-axis. The second is a smoothed line chart showing the average selling price aggregated by 10,000-mile odometer intervals. Both charts are rendered as SVG using D3’s `select`, `scaleTime`, `scaleLinear`, `area`, `line`, `curveBasis`, and `mean` APIs. The data is loaded from a remote CSV file.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity-7.2

This example displays an area chart of car sales data loaded from a CSV file. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with an area path rendered using `d3.area`. Hovering over invisible rectangles reveals a tooltip with the car model and sales value, implemented with `d3.select` and `.on('mouseover')` methods.

SSiva Kishore Reddy
85% match
Loading thumbnail…

Activity 7 Area Chart

This area chart displays car sales prices over time, with the x-axis representing sale dates and the y-axis showing selling price in USD. The visualization uses D3 v6 to load CSV data from a remote gist, parse dates and numeric values, and render an SVG path using the d3.area generator with a steelblue fill. The chart includes labeled axes, a main title, and uses d3.scaleTime, d3.scaleLinear, and d3.axisBottom/axisLeft for scales and tick rendering.

KKhushi Desai
84% match
Loading thumbnail…

Activity 7 area chart

This area chart visualizes car sales from 2014 to 2024, with the x-axis mapping time and the y-axis showing sales volume. The chart combines a smooth black line and an orange filled area, with a legend positioned at the top-right. The code uses D3 v5 functions like `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to generate SVG paths, and loads data from a CSV hosted on GitHub.

BBamanGayathri
82% match
Loading thumbnail…

Activity6_task3

This example shows the relationship between car price and mileage with an interactive scatter plot. Each circle represents a vehicle, positioned by mileage on the x-axis and price on the y-axis, with color encoding price ranges via a `d3.scaleThreshold` (green, yellow, orange, red). Hovering over a point enlarges the circle and reveals the make, model, and price in a temporary text tooltip. The chart uses `d3.csv` to load external data and renders axes and circles as SVG, with a legend summarizing price bins.

Yyadlapallisaisathvik@gmail.com
81% match
Loading thumbnail…

Activity7 Area Plot

This chart visualizes car sales versus price for different manufacturers, with each manufacturer represented as a filled, smooth area. The areas show the relationship between price (x-axis) and sales (y-axis) using data from a CSV file. The chart is built with a reusable D3 component that uses `scaleLinear` for axes, `area` with `curveBasis` for the smooth fills, and `scaleOrdinal` with `schemeCategory10` for distinct manufacturer colors. It renders as an SVG.

JJean
80% match
Loading thumbnail…

Activity8_Task4

This visualization displays the cost of sales from 2000 to 2013 using an area chart with a smoothed basis curve line. The SVG chart uses D3 v5 scales (scaleTime, scaleLinear) and axes (axisLeft, axisBottom) to map the temporal and cost dimensions. Data is loaded from a CSV hosted on GitHub, with year values parsed as dates. The code demonstrates local ES6 module imports and D3's line and area generators with curveBasis to create the filled region and overlaid stroke.

AArun Pratap
80% match
Loading thumbnail…

Assignment2-Question2

This example shows a smoothed area chart of car sales from 2013 to 2023, with a line overlay and green fill beneath the curve. It uses d3.csv to load the dataset, then d3.scaleTime and d3.scaleLinear to map years and totalsales to SVG coordinates. The chart renders axis labels, grid lines via d3.axisLeft and d3.axisBottom, and generates the path with d3.line and d3.area, both using curveBasis for smoothing. Data parsing converts the years column to JavaScript Date objects and sales to numbers.

SSaiKiranReddyKancharla@my.unt.edu
80% match
Loading thumbnail…

Activity6_question3

This interactive scatter plot visualizes a car dataset, with each point representing a vehicle plotted by its Total Sales and Product. The chart, rendered as an SVG, uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `schemeTableau10` to map data to position and color. A legend identifies the product categories via color. The visualization is loaded from a remote CSV file and fills the browser window, with axes labeled "Highway MPG" and "Horsepower."

Kkandulasunny17@gmail.com
79% match