Skip to main content
SimilarExport ZIP
100%

piechart_linechart

✓ Published0🌍 Public
GGorantla Vishnusai
Last edited Apr 2, 2025
Created on Apr 2, 2025

This example shows a line chart depicting the relationship between fuel efficiency and engine size for a car dataset. The SVG visualization uses D3.js v6 to load CSV data from a GitHub gist, parse numeric values, and render a single blue line path via `d3.line()`. Linear scales (`d3.scaleLinear`) map the fixed domains for fuel efficiency and engine size, while axes are generated with `d3.axisBottom()` and `d3.axisLeft()`. The chart includes labeled axes for fuel efficiency and engine size, with margins and dimensions set explicitly in the code.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between fuel efficiency and engine size for a dataset of cars, with each point’s radius representing horsepower and its opacity representing price. The chart uses D3 v6 to load CSV data from a GitHub gist, apply linear scales for the axes and point attributes, and render circles in an SVG. Color encodes car type (Sedan, Coupe, SUV, Truck) via `d3.scaleOrdinal`, with a legend included. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

GGorantla Vishnusai
83% match
Loading thumbnail…

Areachart

This area chart visualizes the relationship between fuel efficiency and engine size for a car dataset loaded from a GitHub-hosted CSV file. The chart uses `d3.area` to generate a filled path, with `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG rendering displays a semi-transparent steelblue region, with labeled axes for "Fuel Efficiency" and "Engine Size". Data values are parsed from strings to numbers before domain scaling, and the area’s baseline is set to the chart’s height.

GGorantla Vishnusai
82% match
Loading thumbnail…

Areachart

This area chart visualizes the relationship between fuel efficiency and engine size for a car dataset loaded from a GitHub-hosted CSV file. The chart uses `d3.area` to generate a filled path, with `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG rendering displays a semi-transparent steelblue region, with labeled axes for "Fuel Efficiency" and "Engine Size". Data values are parsed from strings to numbers before domain scaling, and the area’s baseline is set to the chart’s height.

GGorantla Vishnusai
82% match
Loading thumbnail…

Area Chart

This area chart visualizes the relationship between fuel efficiency (in miles per gallon) and engine size (in liters) for a sample of cars. A single blue, semi-transparent filled area rises to show engine size across the fuel-efficiency range, overlaid with axes and labels. The visualization is built with D3 v6, using `d3.area` to generate the area shape, `d3.csv` to load data from a GitHub Gist, and `d3.axisBottom` and `d3.axisLeft` for the axes. The chart is rendered as an SVG element.

RRamdas Dheeraj
80% match
Loading thumbnail…

Line Chart

This line chart visualizes the relationship between engine size and average vehicle price using a sampled car dataset. The chart aggregates raw CSV data with `d3.rollup` to compute mean prices per engine size, then renders a monotone-smoothed path with `d3.line` and SVG circles for each data point. Axes use `d3.axisBottom` and `d3.axisLeft`, with price formatting as currency. Interactive hover tooltips display exact values via mouse events, all styled with a dark theme.

RRamdas Dheeraj
79% match
Loading thumbnail…

check

This example visualizes the relationship between engine size and horsepower in a dataset of car models. A smooth, curved area chart displays the trend, with engine size plotted on the x-axis and horsepower on the y-axis, using linear scales and grid lines for reference. The code uses D3 v5’s `csv` to load data, `scaleLinear` for both axes, and `area` and `line` generators with `curveBasis` to produce the SVG path. Axis labels are added via `axisBottom` and `axisLeft`, and the data is parsed from a GitHub-hosted CSV file.

BBryanA999
79% match
Loading thumbnail…

Reusable Scatter Plot (Car Engine)

This scatter plot visualizes the relationship between engine size and fuel efficiency (MPG) using a dataset of car engines. The visualization shows individual data points as blue circles, with clear axis labels displaying the measured variables. Built with D3.js (v7), the implementation uses `d3.csv` to load data from a GitHub-hosted CSV file, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` to render the chart axes. The SVG-based rendering is encapsulated in a reusable `ScatterPlot` function that accepts configurable dimensions, margins, and data value accessors, allowing for flexible reuse across different datasets.

PP Manisha
79% match
Loading thumbnail…

Fork of Hello VizHub

This example presents a pie chart of engine efficiency across various vehicle types. The D3.js code builds the visualization using the `pie` and `arc` generators, rendering SVG paths for each slice and a legend with colored boxes and formatted text labels. The chart's data is hardcoded within the script, and colors are assigned via `scaleOrdinal` with the `schemeCategory10` palette. The final visualization includes a title and a legend positioned to the right of the pie.

Ssanavenkatasurendrareddy@gmail.com
78% match