Skip to main content
SimilarExport ZIP
100%

ICE7-1-VarshaG

✓ Published0🌍 Public
VVReddy913
Last edited Jul 3, 2022
Created on Jul 3, 2022

This scatter plot visualizes automobile data, mapping engine displacement and horsepower to the x and y axes while encoding weight through circle size and origin through color. The visualization is built using Vega-Lite’s declarative grammar via the `vega-lite-api` wrapper, with `markCircle` and encodings for quantitative and nominal fields. Data is loaded from a CSV file using d3’s `csv` method, and the chart is rendered as an interactive SVG with tooltips provided by `vega-tooltip`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7-1-VarshaG

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower across vehicles, with color mapped to origin and point size to weight. It renders the 398 cars from the UCI Auto MPG dataset using the vega-lite-api library, building a single circle mark with tooltips for names. The visualization adapts to the full viewport, and the accompanying vega-tooltip handler displays each vehicle's details on hover.

VVReddy913
88% match
Loading thumbnail…

ICE 7

This visualization displays a scatter plot of automobile data from the UCI Auto MPG dataset, mapping miles per gallon against horsepower. Points are colored by origin, with point size encoding vehicle weight, and hovering reveals the car name via tooltip. Built with the vega-lite-api and D3’s csv loader, it renders using vega-lite’s markCircle, with axes customized to remove domain lines and configure tick and label styling.

MMalempatiSaranya
87% match
Loading thumbnail…

VarshaICE7

This visualization uses a scatter plot to explore the relationship between fuel efficiency (mpg) and horsepower across vehicles, with color indicating origin and point size encoding weight. Built with the vega-lite-api library and rendered using vega-lite and vega, the plot loads data from the UCI Auto MPG dataset via d3.csv. A tooltip from vega-tooltip displays each car’s name on hover. The visualization fits the entire browser window, and axis labels are styled with a custom configuration for improved readability.

VVReddy913
85% match
Loading thumbnail…

Fork of VarshaICE7

This visualization displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset as a scatter plot, mapping fuel efficiency (mpg) against horsepower, with point size encoding vehicle weight and color marking the country of origin. The chart is built using the vega-lite-api library, which wraps Vega-Lite and Vega, and renders interactively with tooltips showing car names. Data is loaded asynchronously via d3.csv from a remote Gist, while the visualization is configured with custom fonts and axes for improved readability. The layout fits the browser window, adjusting dynamically to viewport dimensions.

VVReddy913
85% match
Loading thumbnail…

Fork of ICE7-1-VarshaG

This visualization explores the relationship between fuel efficiency, horsepower, weight, and origin in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot positions each car by miles per gallon and horsepower, with color encoding the region of origin, while the size of each circle encodes vehicle weight. Tooltips reveal the car name on hover. The chart is built with the vega-lite-api, which registers Vega and Vega-Lite, and loads the CSV data using d3.csv. Custom configuration adjusts axis labels, tick colors, and font sizes for improved readability.

VVReddy913
84% match
Loading thumbnail…

ICE7

This example shows a reusable scatter plot that maps engine weight to horsepower for a small dataset of vehicles. The visualization uses D3.js v7 to render SVG circles and axes, with scales for the x and y dimensions. The code builds a configurable chart function that accepts setters for width, height, data, margins, and radius, demonstrating a modular pattern for reusable visualizations. The implementation relies on `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to handle the mapping and axis generation.

MM Hema
84% match
Loading thumbnail…

VarshaICE7

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository Auto MPG dataset. Each red semi-transparent circle represents a car, with the title clearly stating the variables being compared. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and `extent` to compute domains. Axis labels and a title are added via appended text elements, while gridlines are generated through tick size adjustments.

VVReddy913
83% match
Loading thumbnail…

ICE7

A scatter plot of 40 cars from a small CSV dataset maps horsepower on the x-axis against miles per gallon on the y-axis. Each circle is colored by cylinder count (4, 6, or 8) using a Tableau10 ordinal scale, with a legend in the top-right corner. The visualization uses D3 v6's `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll().join()` pattern within a reusable chart module. Axis labels identify both variables, and the title font is set via the Share Tech Google Font.

Vvarshitreddy02@gmail.com
83% match