Skip to main content
SimilarExport ZIP
100%

Fork of dataset

✓ Published0🌍 Public
RRomersims
Last edited Apr 12, 2022
Created on Mar 10, 2022
Forked from dataset

This example displays a time-series line chart of temperature readings from San Francisco, using an SVG rendering with D3.js v5. It demonstrates data loading via `d3.csv`, scales with `scaleTime` and `scaleLinear`, and axes created with `axisBottom` and `axisLeft`. The chart shows a single path generated by `d3.line`, with a grid of tick lines and labeled axes. The code also imports local ES6 modules and uses `d3.select` to manage the SVG, illustrating key D3 workflows in a VizHub environment.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This fork of the D3.js example visualizes one week of temperature data for San Francisco using a line chart. The chart plots temperature on the y-axis against time on the x-axis, with data loaded from a CSV file containing timestamp and temperature values. The code leverages D3 v5 APIs including `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` with `curveBasis`, rendering the result as SVG elements. Axis labels and a title are added using SVG text elements, while CSS styles define the appearance of the maroon line and tick marks.

DDevyn Chew
85% match
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This fork of a D3.js line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas. It plots temperature values over time on SVG-rendered axes, using `scaleTime` and `scaleLinear` for scaling, with `axisBottom` and `axisLeft` for tick marks. The line is drawn with a `line` generator and a basis curve, styled as a maroon path. The chart includes labeled axes and a title, all rendered via the d3.v5 library.

SSeongwoo Choi
85% match
Loading thumbnail…

Fork of line chart

This fork of a line chart displays temperature readings for San Francisco over time, using an area path rendered by `d3.area` with a `curveBasis` to smooth the line. The visualization employs `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with axes generated by `d3.axisBottom` and `d3.axisLeft`. Data loads from a CSV file via `d3.csv`, parsing timestamps and numeric temperatures. The chart includes labeled axes, a title, and grid lines styled with CSS within an SVG canvas.

Ttheaddies
85% match
Loading thumbnail…

Fork of Making a line chart

This example shows a week of hourly temperature readings in San Francisco as a smooth, maroon line chart. The visualization uses D3 v7 to map time and temperature data from a CSV file onto an SVG canvas, with axes, grid lines, and clear labels. The code employs `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for scaling, and `d3.axisBottom` and `d3.axisLeft` for rendering axes. It also applies `d3.line` with a `curveBasis` for the smoothed path, and includes styled tick marks and titles.

Aakshayms0
84% match
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This fork of a Data Canvas project visualizes one week of temperature data in San Francisco as a smooth line chart. The SVG rendering is built with d3.v5, using `scaleTime` and `scaleLinear` for the axes and a `line` generator with `curveBasis` for the smoothed temperature path. Data is loaded from a CSV file via VizHub, with timestamps converted to `Date` objects and temperatures to numbers. Grid lines, axis labels, and a title are drawn using standard D3 axis and text primitives, all styled with the accompanying CSS.

Pprojectcybersyn2
84% match
Loading thumbnail…

Fork of Fork of Linechart

This interactive line chart displays temperature over time for San Francisco, using a time-based x-axis and linear y-axis. The data is loaded from a CSV file using D3’s `csv` utility and parsed into timestamps and numeric temperatures. The chart is rendered in SVG with React components, using D3’s `scaleTime`, `scaleLinear`, and `line` generator to draw the path. Circles with native SVG `<title>` tooltips mark each data point, while axes are built from custom React components that map D3 ticks to SVG groups.

Nnkarinti
84% match
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This fork displays a week of temperature data for San Francisco as a smooth line chart, from a Data Canvas dataset. D3 v5’s `scaleTime` and `scaleLinear` map timestamps and temperatures to SVG coordinates, while `axisBottom` and `axisLeft` render labeled grid axes. The `line` generator with `curveBasis` draws the curved path, and the SVG titling and styling come from appended text elements and CSS classes.

Vvk
84% match
Loading thumbnail…

Fork of A Week in San Francisco Line Chart

This example shows a line chart of San Francisco temperatures over a week, with a smoothed curve and labeled axes for time and temperature. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render an SVG path. Data is loaded from a CSV via `d3.csv`, and margins, tick marks, and an axis label are added through SVG groups and text elements.

Aayodhyanandh
84% match