Celeste6666

@Celeste6666·5 public vizzes

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.

Nov 10, 2021

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.

Nov 10, 2021

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.

Nov 9, 2021

Loading thumbnail…

EP03 | 學會 D3.js 製作圖表 - 製作長條圖(Bar)

This bar chart visualizes the populations of the top twelve countries in 2020, using horizontal bars sorted by population size. Built with D3.js v7 and rendered as an SVG, the chart applies `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. It uses `axisLeft` and `axisBottom` to generate axes, with custom tick formatting to display billions. The data is loaded from a CSV file, and CSS classes style the title and axis labels.

Nov 5, 2021

Loading thumbnail…

EP02 | 學會 D3.js 製作圖表 - 製作笑臉

This example draws a smiling face as an SVG graphic using D3.js version 7. The yellow circle face, two eyes, arc path mouth, and rectangular eyebrows are all constructed with D3 shape and selection APIs, including `d3.arc` for the mouth’s curved path. A `transition` animates the eyebrows upward and back downward over two seconds each, demonstrating chained transitions on a transformed group element.

Nov 5, 2021