Skip to main content
SimilarExport ZIP
100%

EP06 | 學會 D3.js 製作圖表 - 製作折線圖(Line Chart)溫度與日期

✓ Published0🌍 Public
CCeleste6666
Last edited Nov 10, 2021
Created on Nov 10, 2021

This example visualizes daily temperature readings for September 2021 using a line chart. It plots dates on the x-axis and temperatures in degrees Celsius on the y-axis, with green circular marks at each data point. The visualization is rendered as an SVG using D3.js v7, employing `scaleTime` and `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for axis generation, and `timeFormat` for date tick labels. Data is loaded from a CSV file containing date and temperature columns, with the chart rendered within a React framework.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

EP05 | 學會 D3.js 製作圖表 - 製作散佈圖(Scatter Plot)溫度與日期

This example charts daily temperatures for September 2021 as a scatter plot, using a time-scaled x-axis for dates and a linear y-axis for degrees Celsius. Built with D3 v7, it loads data from a CSV file, parses date strings, and renders green circles onto an SVG canvas. The code explicitly uses `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `timeFormat`, and `extent` to position points and generate gridlines. A title and axis labels are added in CSS-styled text, while margins and tick customization create a clean, readable layout.

CCeleste6666
93% match
Loading thumbnail…

linechart d3 and React

This example shows a line chart of daily temperature readings over a week, plotting temperature on the y-axis against time on the x-axis. The visualization is built with React components that render SVG elements, using d3.scaleTime and d3.scaleLinear for axes and data mapping. The code loads CSV data via d3.csv, applies time parsing and numeric conversion, and creates circles as marks with tooltips showing the day. Axes are custom components using d3.ticks and timeFormat for labels.

SShane Carey
80% match
Loading thumbnail…

Line Chart

This example visualizes temperature over time with a line chart. The SVG rendering plots a line and points connecting daily temperature readings, with axes and tick labels generated from the data. Built with React and D3 v5, it uses `scaleLinear` for scaling, `line` from D3 for the path, and `timeFormat` for tick labels. The data is loaded as CSV from a remote URL using D3's `csv` utility, and React state manages the asynchronous data fetching.

Uuplusv
79% match
Loading thumbnail…

Line Chart

This line chart displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization uses React components to render SVG axes and marks, employing D3 scales such as `scaleTime` and `scaleLinear` to map data, and the `line()` generator with `curveNatural` to create the smooth path. Data is loaded from a CSV file using `d3.csv`, and each data point includes a circle with a tooltip showing the day.

TThe4star
78% match
Loading thumbnail…

Line chart Temperature

A line chart displays temperature readings over time, with individual data points highlighted by circles that reveal the exact date on hover. The visualization loads CSV data from a GitHub gist and renders it as an SVG using React components. Axes are generated with d3.scaleTime and d3.scaleLinear, while the curve is drawn with d3.line and the curveNatural interpolation. Styling comes from external CSS, and the chart follows a simple top-down layout with labeled axes for time and temperature.

JJosh Zalcman
77% match
Loading thumbnail…

Line Chart - React, D3

A line chart displays daily temperature readings from the Data Canvas Sense Your City dataset, with a time-based x-axis and a linear y-axis for values. The visualization uses React components to render SVG elements, with D3 scale functions (`scaleTime`, `scaleLinear`) mapping data to coordinates. The `Line` component draws a natural curve path through the data points and adds circular markers with tooltips showing the exact timestamp on hover. Axis components generate tick marks and labels, while styling is applied through CSS classes on the SVG elements.

NNelson M
77% match
Loading thumbnail…

react time line chart styled

This interactive visualization displays temperature readings over time as a smooth line chart with circular markers, rendered as SVG within a React application. The chart uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with d3.line and curveNatural generating the smoothed path. Built with React 17 and D3 v7, the code loads temperature data from a CSV file via d3.csv, and includes tooltips on hover for each data point using SVG title elements.

MMalcolm Mead
77% match
Loading thumbnail…

Rendering Data with React & D3 - Stylied Line chart

This example shows a stylized line chart of San Francisco’s weekly temperature readings over time, plotting temperature against timestamps using an SVG canvas. It is built with React and D3 v7, where React manages the component structure and D3 APIs such as `scaleLinear`, `extent`, and `timeFormat` handle scaling and axis ticks. The code loads CSV data from a GitHub gist, extracts temperature and timestamp fields, and renders custom SVG axis components (`AxisBottom`, `AxisLeft`) and circle marks (`Marks`) with tooltips. Styling is applied via CSS classes for tick lines, labels, and mark colors.

Kkeitheade
77% match