Untitled

100%

✓ Published0🌍 Public

Last edited Mar 14, 2023

Created on Mar 14, 2023

Forked from Untitled

This interactive area chart displays two metrics from a week of temperature data in San Francisco: average duration in milliseconds (Durchschn) and count (Anz) across time. The visualization uses two linked line charts with a brushable mini-map for zooming, rendered as SVG via D3 v4 APIs including `d3.time.scale`, `d3.svg.brush`, and `d3.svg.line`. The data is loaded from a local CSV file and parsed with `d3.csv`, with time formatted using `d3.time.format`.

AI-generated description

This Area chart shows one week of temperature (in degree Celcius) in San Francisco. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization displays one week of temperature data for San Francisco as an area chart. The main chart shows temperature trends over time, with a smaller context chart below it that includes a brushable selection tool for zooming. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scales, d3.line for path generation, and d3.brushX for the brushing interaction on the overlapping line chart. Multi-line data is rendered with color encoding via d3.scaleOrdinal. The visualization is built with D3 v4 and rendered as SVG, and includes data from the Data Canvas - Sense Your City project.

Aash301

90% match

Loading thumbnail…

Untitled

This line chart displays one week of temperature in degrees Celsius in San Francisco, using data from Data Canvas - Sense Your City. It plots temperature against time, with timestamps parsed as JavaScript Date objects and temperature values converted to numbers. The visualization renders as an SVG using d3.v4’s selection, scaleTime, scaleLinear, axisLeft, axisBottom, line, and curveBasis functions, with axis labels and a title. The line path is styled with a maroon stroke, and the data is loaded asynchronously via d3.csv.

Jjl-tan

86% match

Loading thumbnail…

Untitled

This visualization shows a week of temperature readings in San Francisco as a smooth red area chart over time. The data comes from a CSV file hosted on VizHub, parsed with `d3.csv` and rendered as SVG using D3 v6. It uses `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.area` with `curveBasis` to generate the curved filled path, and `d3.axisBottom` and `d3.axisLeft` with gridlines. The chart includes labeled axes and a title.

Bbicyclecode

85% match

Loading thumbnail…

Untitled

A line chart displays daily temperature readings in San Francisco over one week, with time on the x-axis and temperature on the y-axis. The red curved line, generated using `d3.line` with `curveBasis`, connects the data points, while labeled axes and grid lines provide context. The visualization uses D3 v6 to load CSV data from VizHub, scales via `scaleTime` and `scaleLinear`, and renders axes with `axisBottom` and `axisLeft`. The SVG chart includes a title, axis labels, and a clean, grid-backed design.

Bbicyclecode

85% match

Loading thumbnail…

Untitled

This visualization shows temperature readings in San Francisco over one week, plotting each measurement as a circular point along a time-based x-axis and a linear temperature y-axis. The chart includes labeled axes for time and temperature, with a title displayed above the plot. The code uses D3 v6 methods such as `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes, and renders the data as SVG circles. The data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Bbicyclecode

84% match

Loading thumbnail…

Untitled

This line chart displays one week of temperature in degrees Celsius for San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization renders a maroon line path over a steelblue scatter of circular data points, with axis ticks and labels styled via CSS. The code uses D3’s `select` and `csv` to load a separate data file, though it currently only logs the parsed data to the console, leaving the visual elements static placeholders without bound values.

HHeschmat

84% match

Loading thumbnail…

Untitled

This example displays a week of temperature data for San Francisco as a smooth filled area chart. The SVG visualization uses time-series data from a CSV file loaded via `d3.csv`, with temperature mapped to the vertical axis and timestamp to the horizontal axis using `scaleTime` and `scaleLinear`. The chart is rendered with D3 v5, including axis components (`axisLeft`, `axisBottom`) and a filled path generated by the `area` generator with a `curveBasis` interpolation. Grid lines from tick marks and custom axis labels enhance readability.

AAbishek-Dulal

84% match

Loading thumbnail…

Untitled

This visualization shows a week of hourly temperature readings in San Francisco as a smooth line chart. The D3.js code uses `scaleTime` and `scaleLinear` to map timestamp and temperature data from a CSV file, with `d3.line` and `curveBasis` generating the curved path. The SVG rendering includes labeled axes with gridlines and a title, set against a green background with a maroon data line.

RReekMajumder

84% match