Skip to main content
SimilarExport ZIP
100%

Temperature in San Franscisco

✓ Published1🌍 Public
RRonie Uliana
Last edited Jun 5, 2020
Created on Jun 5, 2020
Forked from Scatter plot

This example visualizes the relationship between vehicle weight and horsepower for cars from the 1970s, using a scatter plot with semi-transparent blue circles. The chart includes gridlines and labeled axes for both variables, with a title above the plot. The visualization is built with React and D3.js, using `d3.csv` to load the dataset and `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the scales and axes. The SVG rendering is handled directly through D3 selections.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Temperature in San Francisco

This example shows a scatterplot of cars, comparing horsepower on the x-axis against weight on the y-axis, with each point representing a vehicle. The code uses d3.csv to load the data, d3.scaleLinear to map values to pixel coordinates, and d3.axisLeft and d3.axisBottom to render labeled axes with gridlines. Circles are drawn via D3’s data join, styled with red fill and opacity. The visualization is rendered as an SVG within a React framework, with margins and a title included.

JJeffrey Miiller
94% match
Loading thumbnail…

Temperature in San Francisco

This scatterplot displays the relationship between horsepower and weight for cars, with each red semi-transparent circle representing a vehicle. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and d3.extent to compute the domains. Data is loaded from a CSV file using d3.csv, and the SVG rendering includes styled gridlines, axis labels, and a title. The code parses numeric fields before rendering the 960x500 chart.

Aantoinecarto
93% match
Loading thumbnail…

Temperature san francisco

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, with each vehicle represented by a semi-transparent red circle. The visualization uses D3 v5 to scale and plot the data points, with axis labels and tick marks rendered via SVG. The chart includes a title and labeled axes, and the data is loaded from a remote CSV file fetched using D3's `csv` function. The implementation relies on D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` utilities to construct the plot.

Bbcwein
92% match
Loading thumbnail…

Temperature in San Fransisco Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each red semi-transparent circle representing a single vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to map the data, with margins and axis labels for clarity. Data is loaded asynchronously via D3’s `csv` function from a hosted CSV file, and the SVG rendering is driven by a `select` and data join.

Lloisasy
92% match
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing an individual vehicle. The visualization uses D3 v5 to load CSV data and render SVG graphics. The code employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `extent` to compute domains. Points are drawn with low opacity to reveal overlapping clusters. The chart includes labeled axes and a title, with styling applied via CSS classes for ticks, axis labels, and the title text.

CChrisKort
92% match
Loading thumbnail…

Temperature in San Fransisco Scatter Plot

This scatter plot visualizes the relationship between car horsepower and weight, with each circle representing a vehicle. The chart uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to map data from a CSV file of auto-mpg records onto an SVG canvas. Points are semi-transparent steelblue circles, and the visualization includes labeled axes with formatted tick marks, a title, and grid lines extending from the axis ticks.

SSophia Murage
91% match
Loading thumbnail…

Temperature in Sanfracisco scatter plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of automobiles, with each point representing a vehicle. The x-axis maps horsepower and the y-axis maps weight, using linear scales with padded margins. The visualization uses d3.csv to load the auto-mpg dataset, and employs d3.scaleLinear, d3.axisBottom, and d3.axisLeft to construct the axes with tick lines spanning the chart area. Circles are appended to an SVG group with a semi-transparent steelblue fill, and the chart includes an axis label and title.

Iikimes
91% match
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays the relationship between horsepower and weight for various car models, with each circle representing one vehicle. The encoding uses a linear scale for both axes, with a circular mark radius of 10 pixels. The visualization is rendered as an SVG using D3 v6, utilizing `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` functions. Data is loaded from a CSV file via `csv()` from D3, with axis labels and tick formatting applied. The chart includes a title and uses a semi-transparent steelblue fill for the circles.

Sscarlet shao
91% match