Skip to main content
SimilarExport ZIP
100%

Fork of activity6_tutorial3.2

✓ Published1🌍 Public
NNaveen Kumar Kolla
Last edited Apr 1, 2025
Created on Apr 1, 2025

This area chart displays car model names along the x-axis against the number of doors on the y-axis, using a single line with a semi-transparent fill. The visualization is rendered on an HTML canvas using the Chart.js library, which fetches its data from a CSV file hosted on GitHub. The code asynchronously loads the CSV, trims the rows, and parses the numeric door counts before constructing the line chart with green coloring and a legend positioned at the top.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of activity6_tutorial3.2

This interactive scatter plot visualizes the relationship between the number of doors and owner count for a car price dataset. It uses Chart.js to render a canvas-based scatter chart, fetching data from a remote CSV file hosted on GitHub Gist. The JavaScript code asynchronously loads the CSV, parses each row, and filters out invalid numeric entries before plotting points with a teal color. The chart configuration includes linear axes with integer tick steps, and a legend positioned at the top. Data is mapped as x-coordinates for doors and y-coordinates for owner count, with each point having a radius of five pixels.

NNaveen Kumar Kolla
87% match
Loading thumbnail…

Fork of Fork of Reusable Scatter Plot

This interactive line chart displays car prices and door counts across different car models. The visualization fetches CSV data from a GitHub Gist and renders it using Chart.js on an HTML canvas. After parsing the dataset asynchronously, the code creates a line chart with car models on the x-axis and door counts on the y-axis, using teal coloring and point markers. The chart is contained within a fixed-size container and responds to viewport changes.

NNaveen Kumar Kolla
79% match
Loading thumbnail…

Fork of Fork of Reusable Scatter Plot

This interactive line chart displays car prices and door counts across different car models. The visualization fetches CSV data from a GitHub Gist and renders it using Chart.js on an HTML canvas. After parsing the dataset asynchronously, the code creates a line chart with car models on the x-axis and door counts on the y-axis, using teal coloring and point markers. The chart is contained within a fixed-size container and responds to viewport changes.

NNaveen Kumar Kolla
79% match
Loading thumbnail…

ice-7.3

This example shows an area chart of car types plotted against their number of doors, using data fetched from a remote CSV file. The chart is rendered on a Canvas element via the Chart.js library, with the `fill: true` option creating the shaded area beneath the line. The code fetches the dataset asynchronously, parses the comma-separated rows, and populates the chart’s labels and values. It uses Chart.js’s `new Chart()` constructor with a line type, and configures axes titles for “Car Model” and “no of doors”.

NNaveen Kumar Kolla
79% match
Loading thumbnail…

Fork of Reusable Scatter Plot

This example visualizes car prices as a line chart, plotting car models along the x-axis against the number of doors on the y-axis. It fetches CSV data from a remote GitHub gist and uses the Chart.js library to render the chart on an HTML canvas element. The code defines asynchronous functions to retrieve and parse the data, then constructs a line dataset with customized colors, point styling, and axis titles. The chart is rendered within a fixed-size container, making it a straightforward demonstration of Chart.js’s canvas-based line chart capabilities for tabular dataset exploration.

NNaveen Kumar Kolla
77% match
Loading thumbnail…

ice-7.4

This example shows a scatter plot of the number of doors versus owner count for cars, with each point representing one vehicle from a CSV dataset fetched from a GitHub gist. The chart is rendered on a Canvas element using Chart.js, with linear scales for both axes and step sizes set to one. Data is loaded asynchronously via the Fetch API, parsed from comma-separated rows, and filtered for valid numeric values before being passed to the scatter chart. The plot uses teal points with a border width of one and a point radius of five, and includes a legend at the top.

NNaveen Kumar Kolla
75% match
Loading thumbnail…

Fork of Activity6_tutorial2

This visualization displays the distribution of horsepower percentages across different car models using a stacked horizontal bar chart. Each bar represents a car model, with colored segments corresponding to horsepower ranges. The chart uses D3.js v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to compute and render stacked segments as SVG rectangles. Interactive tooltips, styled via CSS, reveal the exact percentage for each range on hover. Data originates from the included `data.csv`, read as a static D3 dataset.

Yyadlapallisaisathvik@gmail.com
73% match
Loading thumbnail…

Fork of Activity6_Question3

This example displays a scatter plot of car prices against model year, using blue circles positioned on an SVG canvas. It loads car price data from a GitHub-hosted CSV file and parses the price field as a number. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data to x and y coordinates with labeled axes. The plot fills the entire browser window, with the title styled in red italics.

Ssaimanvith22@gmail.com
72% match