Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
AAbishek-Dulal
Last edited Jul 17, 2020
Created on Jul 17, 2020
Forked from Untitled

This example shows a line chart of temperature readings over one week in San Francisco, plotted as a smooth basis curve. Time is mapped to the horizontal axis and temperature to the vertical axis, with labels rotated for readability. Built with D3 v5, the code fetches CSV data, then uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path and axes. Grid lines and descriptive text titles are included.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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
94% 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
92% match
Loading thumbnail…

Untitled

This example displays a week of hourly temperature readings in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The visualization includes labeled axes, grid lines, and a title, rendered as an SVG. The code uses D3 v6 APIs such as `scaleTime`, `scaleLinear`, `line` with `curveBasis`, `axisBottom`, and `axisLeft` to map the CSV data and draw the chart, all within a React framework.

Zzhangyan560
92% 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
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
90% 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
90% match
Loading thumbnail…

D3 Temperature Line Chart

This example displays a line chart of temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. It uses D3 v7 with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render smooth paths into SVG. The data comes from a CSV file loaded via `d3.csv`, and the chart includes labeled axes, a title, and circular data points styled with CSS. Grid lines are drawn through negative tick sizes.

YYoung Song
89% match
Loading thumbnail…

Line chart

This line chart visualizes temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. The SVG rendering uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to build axes, while `line()` with `curveBasis` draws the smooth path. Data is loaded from a CSV file via `d3.csv` and parsed into dates and numbers. The chart includes axis labels and a title, with grid lines created by tick marks extending across the plot area.

RRoger Yu-Hsiang Lo
89% match