Skip to main content
SimilarExport ZIP
100%

Linechart

✓ Published6🌍 Public
SSchmittYannic
Last edited Aug 18, 2020
Created on Aug 18, 2020

This interactive line chart displays daily temperature measurements for San Francisco across December 2015, with dropdown menus allowing selection of the x-axis, y-axis, and chart type (line or area). Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft` to render SVG paths with a smooth curve. A hovering tooltip, implemented with `d3.mouse` and `d3.timeFormat`, reports precise values for any point. Data comes from the provided CSV file.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Linechart Version 3

This interactive visualization displays San Francisco weather data from December 2015, plotting temperature metrics over time with the ability to switch between line and area chart views. Users can select which weather variables to display on the x and y axes, group data by season or other categories, and adjust point transparency via a slider. Built with React and D3 v5, the chart uses scaleTime, scaleLinear, and area or line generators to render SVG paths with animated transitions. A tooltip appears on mouseover, showing the precise time and value at the cursor position using d3.mouse and d3.timeFormat. The visualization supports dynamic updates through dropdown menus and demonstrates reusable chart components that re-render when data or display options change.

SSchmittYannic
92% match
Loading thumbnail…

Line Chart

This line chart displays temperature measurements in San Francisco over time, with the timestamp on the x-axis and temperature on the y-axis. The visualization uses D3 v5 scales, axes, and a line generator with curveBasis smoothing to create a curved path. SVG rendering handles the display, while data is loaded as CSV from an external source. The chart includes labeled axes, grid lines, and a title, with styling applied via external CSS.

Jjeelong
91% match
Loading thumbnail…

Line Chart

This line chart tracks daily temperature fluctuations over a week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization renders as an SVG using React components for the axes and marks. The line path is drawn with `d3.line` using natural curve interpolation, while individual data points appear as circles with tooltips. Data comes from a CSV file loaded via `d3.csv`, and the scales use `d3.scaleTime` and `d3.scaleLinear`.

Mmbooch22
90% match
Loading thumbnail…

Line Chart

This line chart visualizes weekly temperature data for San Francisco, mapping timestamps to the x-axis and temperature values to the y-axis. Built with React and D3 v5, it uses d3.scaleTime and d3.scaleLinear for scales, d3.line with curveNatural for the path, and d3.extent to set domains. SVG rendering includes custom axis components with timeFormat for weekday tick labels, while circle marks provide tooltips via the title element. The dataset is loaded from a CSV URL using d3.csv.

Llefat92
90% match
Loading thumbnail…

LineChart

This interactive line chart visualizes weekly temperature trends in San Francisco, plotting temperature readings across time with carefully styled curves and circular data points. Built with React 16 and D3 v5, it uses d3.scaleTime and d3.scaleLinear for axes, while d3.line with a curveNatural interpolation generates smooth paths from CSV data loaded via d3.csv. The SVG rendering includes custom axis components with tick marks and labels, plus styled marks using a muted purple palette for the path and circles.

EEd Hutchinson
90% match
Loading thumbnail…

Temperature Line Chart

This line chart displays San Francisco temperature readings over time, with a smooth curved line plotted against labeled axes for time and temperature. The visualization is rendered as an SVG using React and D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes. Data is loaded via `csv` from an external dataset, and the line is generated with `line` and `curveBasis`. Grid lines are styled using tick marks, with the chart title and axis labels added as SVG text elements.

Ssamwatersw15
90% match
Loading thumbnail…

Linechart Version 2

This interactive visualization displays San Francisco weather data, letting users explore relationships between date, temperature, and other climate variables. The chart allows switching between line and area chart types, with dropdown menus for selecting x and y attributes. Built with React and D3 v5, it renders SVG paths using d3.line and d3.area, with smooth transitions via .attrTween and d3.interpolateArray. A tooltip appears on mouseover, showing precise inverted coordinate values via d3.mouse and scale.invert.

SSchmittYannic
90% match
Loading thumbnail…

Line Chart

A line chart displays San Francisco temperatures over the course of a week, plotted with a smooth curved line and circular markers for each data point. Built with React and D3 v5, it uses `d3.csv` to load the data, `d3.scaleTime` and `d3.scaleLinear` for the axes, and the `d3.line` generator with `curveNatural` to create the path. SVG rendering includes reusable axis and mark components, with hover tooltips via nested `<title>` elements.

Rrstrauss127
90% match