Yifu's Temperature in San Francisco

100%

Yifu's Temperature in San Francisco

✓ Published1🌍 Public

Last edited Dec 26, 2019

Created on Dec 26, 2019

This scatterplot displays time-series data of temperature readings in San Francisco, plotting each observation as a circle against a time axis. The visualization uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with SVG circles rendered via D3’s data join. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with gridlines and labeled margins. The data comes from the Data Canvas - Sense Your City project, loaded as CSV and parsed into Date and numeric values.

AI-generated description

Yifu's simple bar chart

I created the visualization following this tutorial.

Data source: Data Canvas - Sense Your City.

Dec. 24, 2019

MIT Licensed

Similar vizzes

Loading thumbnail…

Temperature in San Francisco

This scatter plot visualizes temperature readings over time in San Francisco, with each red semi-transparent circle representing a data point. The chart displays time on the x-axis and temperature on the y-axis, using a time scale for dates and a linear scale for temperature values. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and circles as SVG elements. Data is loaded from a CSV file hosted on VizHub, with timestamps parsed as JavaScript Date objects and temperatures converted to numbers.

CChenluWang96

86% match

Loading thumbnail…

Temperature in Sanfracisco scatter plot

This scatter plot shows the relationship between time and temperature in San Francisco, with each circle representing a temperature reading. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the time and temperature values onto an SVG canvas. The code loads data from a CSV file, parses the timestamp and temperature fields, and renders circles with semi-transparent steel-blue fills. The chart includes axis labels and a title, with grid lines generated via tick sizes.

Iikimes

85% match

Loading thumbnail…

Temperature in San Francisco Scatter plot

This scatter plot displays temperature readings in San Francisco over time, with each circle representing a data point and steelblue fill. The x-axis is labeled "Time," and the y-axis is labeled "Temperature." The visualization is built with D3 v5, using `scaleTime` for the time-based x-axis, `scaleLinear` for the y-axis, and `axisBottom`/`axisLeft` for grid lines and tick marks. Data is loaded from a CSV file hosted on vizhub.com, parsed into date and numeric temperature values, and rendered as SVG circles.

Ddavidpiber

85% match

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over time, with each circle representing a temperature observation at a specific timestamp. The chart uses D3 v5’s scaleTime and scaleLinear functions to map the data, with axisBottom and axisLeft generating the labeled axes. Data is loaded from a CSV file using d3.csv and rendered as SVG circles with a fixed radius, while the styling applies a semi-transparent steelblue fill. The visualization includes axis labels and a title, with grid lines drawn via tickSize.

XX. N. Chu

85% match

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over time, with time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file and rendered as steelblue circles. The visualization uses D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, with the SVG output generated through D3’s selection and attribute methods. Axis labels and a title are added directly within the SVG.

SShuyu Zheng

85% match

Loading thumbnail…

Temperature in San Francisco Scatterplot

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. Using D3 v5, the code employs `scaleTime` and `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for grid lines, and SVG circles to represent each temperature reading. The data is sourced from Data Canvas - Sense Your City, and the chart includes labeled axes and a title.

Ffbudwill

85% match

Loading thumbnail…

Temperature in San Francisco Scatter plot

This example visualizes the temperature in San Francisco over time using a scatter plot, with each circle representing a temperature measurement at a specific timestamp. The data originates from the Gray Area “Sense Your City” initiative and is loaded via `d3.csv` from an external dataset. The visualization uses `d3.scaleTime` for the x-axis time scale and `d3.scaleLinear` for the y-axis temperature scale, with `d3.axisBottom` and `d3.axisLeft` to render the axes. Circles are drawn as SVG elements with semi-transparent steelblue fill, and the chart includes labeled axes and a title.

PPeter S

85% match

Loading thumbnail…

Temperature in San Francisco: scatter plot

This scatter plot shows the evolution of temperature in San Francisco over time, with each point representing a daily measurement. The visualization uses a time-based x-axis and a linear temperature scale on the y-axis. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, rendering circles as SVG elements with a semi-transparent gold fill. Data comes from a CSV dataset on VizHub, which is parsed and converted to appropriate date and numeric types before rendering.

DDavid Sjoberg

84% match