Skip to main content
SimilarExport ZIP
100%

Temperature in SF Scatter Plot with D3.js!

✓ Published1🌍 Public
Fforcox43
Last edited Jul 12, 2020
Created on Jul 12, 2020

This scatter plot visualizes a week of temperature data in San Francisco, displaying temperature in degrees Celsius over time. The code imports functions from D3.js, including `select`, `csv`, `extent`, `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom`, to render an SVG chart. Data is loaded from a CSV URL and parsed, with the plot featuring labeled axes, grid lines, and steelblue circles. The chart includes axis labels and a title, with styling applied via external CSS.

AI-generated description

This scatter plot shows data on one week of temperatures in degress Celcius in San Francisco. The data comes from Data Canvsas - Sense Your City.

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Temperature in SF Scatter Plot with D3.js!

This scatter plot visualizes temperature in San Francisco over time, with each circle representing a temperature reading. The data is loaded from a CSV file, parsed, and rendered as an SVG using D3 v6. The code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map time and temperature values to coordinates, with axes showing tick marks, labels, and a titled chart. Circles are semi-transparent steel blue, and the margin-based layout positions the plot within a 960x500 SVG canvas.

LLidiamir
94% match
Loading thumbnail…

Temperature in SF Scatter Plot

This scatter plot displays temperature readings over one week in San Francisco, with time on the x-axis and temperature on the y-axis. Using D3 v5, the code loads CSV data via `d3.csv`, parses timestamps and numeric values, and renders circles scaled with `d3.scaleTime` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, featuring grid lines and custom labels. The SVG output is styled with a clean, minimalist aesthetic, with steel-blue points highlighting the temperature trend across the week.

Ssakhabutdinov
93% match
Loading thumbnail…

Temperature in SF scatterplot

This scatterplot visualizes temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. The D3.js code uses `scaleTime` and `scaleLinear` to map the data, `axisBottom` and `axisLeft` for the axes, and SVG circles to render each measurement. The data comes from a CSV file loaded with `csv`, parsed into `Date` and numeric values, and plotted with gridlines and labeled axes.

RRiccardo Pressiani
93% match
Loading thumbnail…

Temperature

This scatter plot visualizes one week of temperature data in San Francisco, using D3 v6 to position circles on SVG canvas based on timestamp and temperature measurements. The chart includes labeled axes for time and temperature, with a title "A week in San Francisco" and uses grid lines and tick marks for readability. The data is loaded from an external CSV via D3's `csv` function, then mapped through `scaleTime` and `scaleLinear` scales, with axes generated using `axisBottom` and `axisLeft`.

PPiotr Paszek
92% match
Loading thumbnail…

Scatter Chart Temperature in San Francisco

This scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Using D3.js with `d3-scale` and `d3-axis`, it renders SVG circles positioned via `scaleTime` and `scaleLinear`. The chart includes labeled axes, gridlines, and a title, pulling data from a CSV file via `d3.csv`. Styling is applied through CSS for circle color, tick labels, and axis text.

AAvisa Poshtkouhi
92% match
Loading thumbnail…

Temperature Scatter Plot

This scatter plot visualizes temperature readings over time in San Francisco, with time on the x-axis and temperature on the y-axis. The code uses D3 v5 functions including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to construct the chart, rendering purple semi-transparent circles as SVG elements. Data is loaded from a CSV file via `d3.csv` and converted to Date and numeric types. Grid lines are drawn via tick sizing, and axis labels are added as SVG text elements.

DdeafMother
92% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The D3.js code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to map the data, rendering red semi-transparent circles in an SVG. The data is loaded via `d3.csv` from a remote dataset, and axes include labeled titles with gridlines, while a main title appears above the plot.

MMuiruriscode
92% match
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG circles, with hover effects changing their fill color. Data is loaded as CSV from a remote dataset, with each temperature parsed as a number and timestamp as a `Date`. Axis labels and a title are added as SVG text elements.

SSam Lite
91% match