Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

CCeleste6666
93% match
Loading thumbnail…

EP04 | 學會 D3.js 製作圖表 - 製作散佈圖(Scatter Plot)

This scatter plot displays the populations of the top 12 countries in 2020, with each circle representing a country positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses D3 v7 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG axes and circles. Data is loaded from a CSV file via `d3.csv`, with population values converted from strings to numbers and multiplied by 1000. Custom styling through CSS classes formats tick labels, axis lines, and the title.

CCeleste6666
82% match
Loading thumbnail…

Time scatter plot

This time scatter plot visualizes temperature readings over time as red circles on an SVG canvas. The visualization uses D3's `scaleTime` and `scaleLinear` for axes mapping, with `timeFormat` to display weekday labels on the bottom axis. React renders each data point as a circle, with tooltips showing the formatted timestamp. The chart loads data from a CSV file via D3's `csv` utility, and custom React components handle axis and mark rendering.

Yyastika
78% match
Loading thumbnail…

Scatter Plot with Time

This scatter plot visualizes temperature readings over time, with each circle representing a measurement plotted along a time-based x-axis and a linear temperature y-axis. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data from a CSV file into SVG circles. The chart includes labeled axes with formatted weekday tick marks on the x-axis, and hovering over a circle reveals the exact time through SVG `<title>` tooltips.

MMarco Malvicini
78% match
Loading thumbnail…

Temperature in SF Scatter Plot with D3.js!

This scatter plot visualizes a week of temperature data in San Francisco, displaying temperature in degrees Celsius over time. The code imports functions from D3.js, including `select`, `csv`, `extent`, `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom`, to render an SVG chart. Data is loaded from a CSV URL and parsed, with the plot featuring labeled axes, grid lines, and steelblue circles. The chart includes axis labels and a title, with styling applied via external CSS.

Fforcox43
78% match
Loading thumbnail…

Temperature scatterplot chart

A temperature scatterplot shows hourly temperature readings over one week, with time on the x-axis and degrees on the y-axis. Each data point is an SVG circle colored teal, with a native `<title>` tooltip displaying the exact temperature value. The chart uses React components for the axes and marks, while D3 v6 APIs (`scaleTime`, `scaleLinear`, `extent`, `csv`) handle data loading, scaling, and tick generation. The dataset comes from the Sense Your City weather CSV, and labels are formatted with `timeFormat`.

Ssurikmeetr
77% match
Loading thumbnail…

Temperature Plot

This visualization displays temperature readings over time, with each data point represented as a semi-transparent circle plotted along a time-scaled x-axis and a linear temperature y-axis. The chart includes labeled axes, gridlines, and a title, showing how temperatures fluctuate across several days. Using D3 v6 within a React framework, the code loads CSV data via the `csv` method, parses the timestamp and numeric temperature values, and renders the SVG using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the visual.

Bbrett@cloudaccelerator.co
77% match
Loading thumbnail…

Working with time

This example visualizes temperature over time using an SVG scatterplot, where each circle marks a temperature reading at a specific timestamp. The x-axis uses a time scale to map dates, while the y-axis linearly maps temperature values. The chart includes labeled axes, tick marks, and a tooltip that displays the full date on hover. It is built with React and D3 v5, leveraging `scaleTime`, `scaleLinear`, and `extent` to compute scales, with data loaded from a CSV file containing weekly San Francisco temperature records.

LLawrence Liu
77% match