Skip to main content
SimilarExport ZIP
100%

activity7.1-2

✓ Published0🌍 Public
DDeekshitha Annreddy
Last edited Nov 6, 2024
Created on Nov 6, 2024
Forked from activity 7 task 2

This chart displays the relationship between car horsepower and highway miles per gallon as a filled area. The code loads CSV data from a GitHub repository and parses the numeric fields. It uses D3.js v7 to create an SVG, applying a linear scale for both axes and the d3.area generator to construct the area path. Axis labels are added using d3.axisBottom and d3.axisLeft, with the chart rendered on a white, rounded background.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity-7Q2

Three overlapping area layers compare horsepower, torque, and highway MPG across car brands on a shared point scale, with distinct steelblue, orange, and green fills and a matching legend. The chart renders to SVG using D3 v6, loading CSV data remotely and parsing numeric fields. It employs `d3.area` generators, `scalePoint` and `scaleLinear`, `axisBottom` with rotated labels, and `axisLeft`, while tooltips appear via appended `title` elements.

Jjahnavigummadi@my.unt.edu
85% match
Loading thumbnail…

activity 7 task 2

This area chart visualizes the maximum horsepower for various car makes, with the x-axis ordered by make and the y-axis scaled linearly from zero. The chart loads CSV data from a GitHub repository using `d3.csv`, then renders a filled blue area via the `d3.area()` generator onto an SVG canvas. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and labels for “Car Make” and “Horsepower” are positioned using SVG text elements. The visualization uses D3 v7 with a clean, responsive layout and subtle hover opacity effects.

Ssindhureddykandada@gmail.com
84% match
Loading thumbnail…

activity6 -question 3

This visualization compares car performance metrics using a scatter plot of horsepower against highway MPG, with points colored by car category (Economy, Standard, Luxury, Sports) and a legend. It loads car data from a CSV file and uses D3 v7 with SVG rendering to create the chart, including axes, labels, and a title. The example demonstrates basic D3 scales, axis generation, and data binding for circular marks.

Hharsha13638@gmail.com
84% match
Loading thumbnail…

Fork of Area Chart ice-7

This area chart displays the relationship between horsepower and miles per gallon for a set of cars, with a filled green region showing how MPG decreases as horsepower increases. The visualization loads a CSV file from GitHub using `d3.csv`, converts the numeric fields, and sorts the data by horsepower. It uses `d3.scaleLinear` for both axes, `d3.area` to generate the filled path, and `d3.axisBottom` and `d3.axisLeft` to render the coordinate axes. The SVG output is styled with CSS for a clean presentation.

Ssowjanya
84% match
Loading thumbnail…

activity6-task_4

This visualization displays the correlation between average horsepower, torque, and highway MPG across various car makes using a bubble chart. Each circle’s position encodes horsepower and torque, while its size and color represent highway MPG and make, respectively. Built with D3 v7, the SVG chart includes interactive tooltips on hover, axis labels, and legends for both bubble size and color categories. Data is loaded from a CSV file, and d3.scaleLinear and d3.scaleOrdinal handle the encodings.

Kkandulasunny17@gmail.com
84% match
Loading thumbnail…

Activity6_question3

This example visualizes car performance metrics from a CSV file, plotting horsepower against highway MPG for various car makes. It features a scatter plot with color-coded categories (Economy, Luxury, Sports, Other) and a horizontal bar chart showing average horsepower by make, using D3.js for the former and Chart.js for the latter. The SVG scatter plot uses `d3.select`, `d3.scaleLinear`, and `d3.axisBottom`, while the canvas bar chart uses `getContext('2d')` and Papa Parse to load the data.

Aamulyareddykondru01@gmail.com
84% match
Loading thumbnail…

activity6_q3

This example shows the relationship between car horsepower and highway MPG using two coordinated visualizations. The scatter plot encodes car category (Economy, Standard, Luxury, Sports) with color via d3.scaleOrdinal, while the bar chart, rendered with Chart.js on a canvas, displays average horsepower grouped by car make, colored by brand category. The code loads data from bubblechart.csv using Papa.parse, with d3.v7 handling the SVG axes, scales, and scatter plot circles. The bar chart sorts makes by descending average horsepower.

Mm.maanvireddt761@gmail.com
84% match
Loading thumbnail…

Activity 6

This scatter plot visualizes the relationship between horsepower and miles per gallon (MPG) for cars, with points colored and shaped by origin (USA, Europe, Japan). The visualization uses d3.csv to load data from a GitHub-hosted CSV file and renders the chart as an SVG with d3.v7. Interactive tooltips appear on mouseenter to display car details, while a legend indicates the mapping between shape, color, and origin. The implementation uses d3.scaleOrdinal, d3.symbol, and d3.axisBottom/axisLeft to create the marks and scales.

Bbhargavipagolu2025@gmail.com
84% match