Fork of Fork of Hello VizHub

Fork of Hello VizHub

This scatter plot visualizes car performance over four years, with speed on the x-axis and fuel efficiency on the y-axis. Each point represents a specific car-year observation, and five distinct cars are differentiated using custom SVG path shapes: circles, squares, triangles, diamonds, and crosses. The visualization uses D3 v6 to create linear scales (`d3.scaleLinear`) and axes (`d3.axisBottom`, `d3.axisLeft`), with the data defined as a hardcoded JavaScript array. The SVG rendering applies a fixed domain for speed and efficiency, and the code styles points with a stroke and fill via a CSS class.

95% match

Fork of Hello VizHub

This scatter plot visualizes car performance by plotting speed (km/h) against fuel efficiency (mpg) for five car models over four years. Each point represents a single year’s data, with distinct colors (red, blue, green, orange, purple) assigned per car brand, sourced from an embedded CSV table. Built with D3 v6, the SVG chart uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks, while circles are appended via `.selectAll().data().enter()`. The code shows a static rendering with `svg` output, and no animation or interaction is implemented.

94% match

Fork of question_3

This example shows a scatter plot of car data, mapping horsepower on the x-axis and highway MPG on the y-axis. Each circle is colored by the car’s make, with a legend listing the makes. The visualization loads CSV data via `d3.csv` from a GitHub repository, scales axes with `d3.scaleLinear`, and assigns colors using `d3.scaleOrdinal` with `schemeTableau10`. Axes are rendered using `d3.axisLeft` and `d3.axisBottom`, and the SVG is created with D3 v6 selections.

JJaswanthkota@my.unt.edu

Fork of Fork of Fork of reusable scatter plot

This animated scatter plot displays the relationship between horsepower and miles per gallon across 20 car models from a CSV dataset, alternately swapping the x- and y-axes every two seconds. Built as a reusable D3.js v6 module, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `select` to render SVG circles with tooltips. A `setInterval` timer triggers re-rendering of the chart with swapped accessor functions, while axis labels update dynamically based on the current orientation.

119h61a05c9@cvsr.ac.in

Fork of Fork of Fork of Fork of reusable scatter plot

This example shows a reusable D3.js scatter plot of a small car dataset, comparing horsepower and miles per gallon. A controller module updates the chart every two seconds, automatically swapping which attribute appears on the x- and y-axes. The visualization uses a modular `scatterPlot()` component with getter-setters, building an SVG with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Data loads from a local CSV via `d3.csv`, and each point is rendered as a circle with an opacity of 0.8.

119h61a05c9@cvsr.ac.in

Fork of Hello VizHub

This D3.js v7 bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s x-position maps to horsepower, y-position to torque, and radius to highway MPG, while color distinguishes makes using `d3.scaleOrdinal` with `d3.interpolateTurbo`. The code reads data from a CSV via `d3.csv`, renders an SVG with axes and labels, and includes an interactive tooltip on `mouseover`, `mousemove`, and `mouseleave` events. A legend communicates bubble size and color mapping.

Fork of Fork of Hello VizHub

This area chart visualizes car prices by manufacturing year using a dataset of 20 car models from brands like Tata, Hyundai, and Maruti. The SVG rendering uses D3 v6 with `d3.area()` to create a red filled path, `d3.scaleLinear()` for both axes, and `d3.axisBottom()` and `d3.axisLeft()` for tick marks. Years are plotted on the x-axis with prices in INR on the y-axis, while labeled axes indicate the variables.

Hharinimoorthi05@gmail.com

Fork of Fork of Hello VizHub

This example visualizes the relationship between horsepower, torque, and highway MPG for various car makes. A bubble chart uses x- and y-axes for horsepower and torque, while bubble size and color encode MPG and car brand, respectively. Built with D3 v5 and SVG, it reads data from a local CSV file, employs d3.scaleLinear for axes and bubble sizing, uses d3.scaleOrdinal with d3.interpolateTurbo for color mapping, and includes interactive tooltips on mouseover. Animated transitions handle tooltip fading.