D3 Stuff:SF Temp

100%

D3 Stuff:SF Temp

✓ Published0🌍 Public

Last edited Oct 3, 2019

Created on Oct 3, 2019

This visualization displays a scatter plot of automobile data, plotting miles per gallon (mpg) against vehicle weight for various car models, with each point representing a single vehicle. The plot uses D3 v5’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to construct the axes, with circles styled via CSS. The data originates from the auto-mpg dataset, loaded via `d3.csv`. Axis ticks are formatted using `format(".3r")`, and the plot includes a text label reading "Countries" despite the automotive data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

SanFranTemperature

This scatterplot visualizes the relationship between vehicle weight and horsepower for a dataset of cars, with each point representing an individual car. The visualization uses d3.csv to load the auto-mpg dataset, then applies d3.scaleLinear to map the data to x and y coordinates. It renders the chart as an SVG using d3.axisBottom and d3.axisLeft for the axes, with gridlines and axis labels. The circles are semi-transparent steelblue points, and the chart includes a title and margin-based layout.

PPetter-Smit

84% match

Loading thumbnail…

Temperature in SF Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes. Red semi-transparent circles represent individual car observations, while formatted tick labels and axis annotations clarify the data ranges. The code loads data via `csv` from a remote URL and applies numeric type coercion before rendering.

Nnkrpyate

84% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between miles per gallon (mpg) and vehicle weight for a dataset of cars, with each point representing an individual car. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes with gridlines, and displays the data as semi-transparent red circles. The visualization loads data from a CSV file via d3.csv, parses numeric fields, and draws the chart using SVG. Axis labels and a title are added as text elements within the SVG.

Iisaachowen

84% match

Loading thumbnail…

Temperature in SF

This example presents a scatter plot of the Auto MPG dataset, showing each car’s horsepower against its weight. The visualization uses D3 v5 to scale the data with `scaleLinear`, draw axes with `axisLeft` and `axisBottom`, and render circles for each data point in an SVG. The plot also includes labeled axes, a title, and a grid created by tick lines. Data is loaded via `csv` from the UCI Machine Learning Repository.

HHojjat Karami

83% match

Loading thumbnail…

Cars ScatterPlot

This scatterplot visualizes the relationship between vehicle weight and miles per gallon (mpg) for a dataset of cars from the auto-mpg CSV file. Using D3.js v5, the chart employs `scaleLinear` functions to map quantitative attributes to SVG coordinates, with `axisBottom` and `axisLeft` to render labeled axes on a blue background. Each car is represented as a semi-transparent red circle, positioned via the `cx` and `cy` attributes. The code loads data with `csv`, converts numeric fields, and applies margins and ticks to structure the plot.

TTebid Quinsy

83% match

Loading thumbnail…

D3 Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. Semi-transparent steelblue circles represent individual car models, with axis labels and a title clarifying the chart’s purpose. Data is loaded as CSV and parsed before rendering, with margins and inner dimensions calculated to position the plot within the SVG canvas.

Ssathishkottravel

83% match

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes the relationship between car acceleration and weight, with each circle representing a vehicle from the auto-mpg dataset. The visualization uses D3 v5’s `scaleLinear` for both axes, `axisLeft` and `axisBottom` for gridlines and tick labels, and SVG circles with a fixed radius for data points. The code loads the CSV data from an external URL, parses numeric fields, and renders the chart within an SVG element, featuring axis labels and a title.

XX. N. Chu

83% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle horsepower and weight, with circle radius encoding miles per gallon (mpg). The chart uses D3 version 5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to map the auto-mpg dataset. Points are rendered as semi-transparent steelblue circles over a grid with labeled axes. The code demonstrates custom axis styling—removing domain lines, adjusting tick sizes, and adding rotated axis labels—through direct SVG manipulation.

MMiish84

82% match