Fork of Temperature in San Francisco

100%

Fork of Temperature in San Francisco

✓ Published0🌍 Public

Ggharakhani1986

Last edited Jul 12, 2022

Created on Jul 12, 2022

A line chart visualizes a week of temperature changes in San Francisco, using a smooth basis curve to connect data points over time. The D3.js code loads CSV data from a remote source, parses timestamps and numeric temperature values, and renders an SVG graphic with labeled time and temperature axes. It employs `select`, `csv`, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to build the visualization, adding gridlines via tick marks and removing axis domains for a clean look.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperatures in San Francisco, with a smooth curve showing how temperatures fluctuate over time. The visualization uses D3.js v7 to load CSV data and render an SVG, employing `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the curved path, and `axisBottom`/`axisLeft` for labeled ticks. The chart displays the title and axis labels (Time and Temperature) within a 960x500 SVG canvas, showing the daily temperature trend in degrees Celsius.

KKaleb LaBarrie

96% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, with d3.line and the curveBasis curve smoothing the path. It renders as an SVG with gridlines from axis ticks, axis labels, and a centered title. The code parses CSV data, converts temperature to numbers and timestamps to Date objects, then draws the chart using d3.axisBottom and d3.axisLeft.

Aaidatabaeva

96% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, using smooth curves to connect hourly readings. The visualization uses d3.csv to load data and d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line with curveBasis to render the SVG chart. Axis labels and a title are added via SVG text elements, while d3.extent sets the domain for both scales. The dataset originates from Data Canvas - Sense Your City, sourced from the vizhub.com repository.

GGriffin Wimminger

96% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, plotting temperature in Celsius over time. The chart uses a smooth basis curve to connect data points, with a title, axis labels, and a maroon line against a light grid. Built with D3 v7, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. The data is loaded from a CSV file containing timestamps and temperatures, with circles styled in the CSS but not rendered in the JavaScript.

JJaga-droid

96% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

A line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization plots temperature in degrees Celsius over time, using a smoothed basis curve to connect data points. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path. The chart includes labeled axes, a titled plot area, and styled grid lines from the tick marks. The data is loaded from a CSV file via `csv` and processed through the `extent` function.

Nnyebbers

96% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays a week of temperature data in San Francisco, using a smooth curved line to connect daily measurements. The visualization, titled “A Week in San Francisco,” plots temperature in degrees Celsius over time. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. Data is loaded from a CSV file provided by Data Canvas - Sense Your City, with a styled maroon line, grid lines, and labeled axes.

CCheng Tang

96% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes a week of temperature data in San Francisco, plotting temperature values against time. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to render a smooth SVG path. The data is sourced from Data Canvas - Sense Your City, though the code substitutes hash rate values from a local dataset instead of the temperature CSV. The chart includes labeled axes, grid lines, and a title, with styling applied via CSS classes.

DDaniel Cruz

96% match

Loading thumbnail…

Fork of Temperature in San Fransisco Line Chart

A fork of the Temperature in San Francisco Line Chart displays a single week of temperature readings in San Francisco, plotted over time. The visualization uses a smooth curve to connect data points, with axis labels and gridlines rendered via SVG. The code leverages d3.scaleTime and d3.scaleLinear for the scales, d3.axisBottom and d3.axisLeft for the axes, and a d3.line generator with a curveBasis interpolator for the path. Data is loaded from a CSV file using d3.csv, with timestamps parsed and temperatures converted to numbers.

VVinceVerspeek

96% match