旧金山热力图

100%

旧金山热力图

✓ Published1🌍 Public

Last edited Dec 19, 2020

Created on Dec 19, 2020

This visualization displays temperature readings in San Francisco over time as a scatterplot, with each circle representing a daily measurement plotted against date and temperature axes. The chart includes axis labels, a title, and a grid-like appearance from extended tick lines. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `csv`, and `axisBottom`/`axisLeft` to load and render the data as SVG circles with semi-transparent steelblue styling, sourced from a CSV file hosted on VizHub.

AI-generated description

A 散点图 of d3js. HTML page demonstrating use of CSS and JavaScript

MIT Licensed

Similar vizzes

Loading thumbnail…

Temp SanFransisco Scatter Plot

This scatter plot visualizes temperature readings over time in San Francisco, with each circle representing a data point plotted on time (x-axis) and temperature (y-axis) scales. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while data is loaded via `csv` from a remote dataset. The chart includes axis labels and a title, with circles styled in steelblue and rendered as SVG elements. Axes are customized with tick lines and padding, and the temperature scale is inverted so higher values appear toward the top of the plot.

Yylzami40

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

86% match

Loading thumbnail…

Temperature Scatter plot

This scatter plot displays temperature readings in San Francisco over time, with each circle representing a data point. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to map timestamps and temperatures, rendering circles as SVG elements. Hovering highlights individual points by changing their fill color, while gridlines and labeled axes clarify the relationship between time and temperature. Data is loaded as CSV from an external dataset.

Vvladvaculin

85% match

Loading thumbnail…

Scatter Plot Template

This scatter plot displays temperature readings over time for San Francisco, with each circle representing a data point. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to positions, while d3.axisLeft and d3.axisBottom generate the labeled axes with grid lines. Data is loaded as CSV via d3.csv and converted to Date and numeric types before rendering as semi-transparent steelblue circles. The chart includes custom axis labels and a title, all drawn as SVG elements within a fixed-width container.

LLex

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 over a week in San Francisco, with time on the x-axis and temperature on the y-axis. Each circle represents an individual measurement, colored green and sized at a fixed radius. Using D3 v5 with SVG rendering, the code loads CSV data from VizHub, parses timestamps and numeric temperatures, then applies `scaleTime` and `scaleLinear` for axes. Grid lines are generated via `axisBottom` and `axisLeft` with tick sizes, while custom labels and a title are added through appended text elements.

NNikki-gea

85% match

Loading thumbnail…

Temp SF scatter plot

This scatter plot displays temperature readings over time in San Francisco, with each circle representing a data point plotted using linear scales for both axes. The SVG visualization uses d3.csv to load the dataset, d3.scaleLinear and extent to compute domains, and d3.axisBottom and axisLeft to render labeled axes with gridlines. Circles are styled with steelblue fill and partial opacity, while axis labels and a title are added as SVG text elements.

Yyouri7

85% match

Loading thumbnail…

Temperature in SF

This scatter plot displays temperature readings in San Francisco over time, with each point representing a measurement and a maroon line connecting the sequence to highlight trends. The visualization uses D3 v5 with SVG rendering, importing specific functions like `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes and scales. The data comes from a CSV file hosted on VizHub, loaded via `d3.csv` and parsed with `new Date()`. Circles are semi-transparent teal, and gridlines extend across the chart, with labeled axes for temperature and time.

MMahaveer Jain

85% match