A Week in San Francisco

A week in San Francisco

This visualization shows a week of temperature readings in San Francisco, plotted as a smooth line chart with time on the x-axis and temperature in Celsius on the y-axis. The data comes from the Data Canvas - Sense your city dataset. Using D3 v5, the code employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while a line generator with `curveBasis` creates the curved path. Grid lines and axis labels are styled via SVG elements, with the chart rendered entirely in SVG.

LLinn

A Week in San Francisco Scatter Plot

A week of hourly San Francisco temperature readings appears as red dots on a scatter plot, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render an SVG chart with grid lines and axis labels. Data is loaded from a CSV via `d3.csv`, with timestamps parsed as `Date` objects and temperatures converted to numbers. Circle elements are positioned using the scales to show temperature fluctuations across the week.

Bbprokopowicz

Temperature in San Francisco Scatter Plot

This scatter plot shows one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Each circle represents a single timestamped measurement, labeled across a titled "A Week in San Francisco" chart. Using D3 v5, the code loads CSV data, applies `scaleTime` and `scaleLinear` for axes, and renders SVG circles with a steelblue fill. Axis grids are drawn via `axisBottom` and `axisLeft` with removed domains, and the data originates from the Data Canvas - Sense Your City project.

Aarun-subba

A Week in San Francisco Area Chart

This visualization shows a week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. A smooth, maroon line charts the hourly fluctuations, revealing daily warming and cooling cycles. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG grid and labels. The data, from the Data Canvas - Sense Your City project, is loaded from a CSV file.

Ddtdenver

A week in San Francisco - Scatter plot

This scatter plot visualizes temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. Each circle represents a data point, rendered in SVG with a steelblue fill and opacity. The code uses D3 v5 functions like `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and grid lines. Data is loaded as CSV from a remote dataset, parsed into JavaScript Date objects and numeric values, then bound to circles via `selectAll` and `enter`. A rotated y-axis label and title are included for clarity.

YYedrup

A week in San Francisco

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City, with time on the x-axis and temperature in Celsius on the y-axis. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for the smooth path, and d3.axisLeft and d3.axisBottom to render ticks and gridlines. The SVG rendering includes axis labels and a title, with data parsed from CSV before being passed to the render function.

Jjessetgreer

A Week in San Francisco Line Chart

This line chart displays hourly temperature readings in degrees Celsius for one week in San Francisco, with time on the x-axis and temperature on the y-axis. The data originates from the Data Canvas - Sense Your City initiative. The visualization uses D3 v5, employing `scaleTime` and `scaleLinear` for axes, `scaleTime` for the time-based domain, and the `line` generator with `curveBasis` to create the smoothed path. SVG renders the chart, with axis labels and tick marks generated via `axisBottom` and `axisLeft`.

Ddtdenver

Temperature in San Francisco

This scatter plot visualizes one week of temperature data in San Francisco, using circles positioned by timestamp on the x-axis and temperature on the y-axis. The chart includes labeled axes, a title, and a grid-like background created through tick lines. The visualization is built with D3 v5, using `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.axisBottom` and `d3.axisLeft` to render the axes as SVG elements. Data originates from the Data Canvas - Sense Your City project.

Ppkcesar