【d3.js】官方教程学习记录1 Introduction

//读取文件
values = FileAttachment("values-1.json").json()

res:
values = Array(3000) [
0: -1.21
1: -1.02
2: 0.61
3: 0.99
4: -1.53
5: -0.2
6: 0.37
7: 0.22
8: -2.77
9: 0.11
10: 1.12
11: -2.66
12: 1.88
13: -0.7
14: 0.13
15: 0.39
16: 0.74
17: -0.75
18: -1.72
19: -1.88
… more
]

//用d3的内置函数来得到最小值、中位数、最大值
[d3.min(values), d3.median(values), d3.max(values)]

res: Array(3) [-3.14, -0.01, 3.76]

//导入直方图的包
import {Histogram} from "@d3/histogram"

//用数组画直方图
//横坐标是数组里的值，纵坐标是该值出现的次数（我的推测）
Histogram(values)

res:

//可以通过设置参数来改变直方图的宽度和颜色
Histogram(values, {width, height: 200, color: "steelblue"})

//导入Scrubber
import {Scrubber} from "@mbostock/scrubber"

//定义滑块mu
viewof mu = Scrubber(d3.ticks(-5, 5, 200), {
  format: x => `mu = ${d3.format("+.2f")(x)}`,
  autoplay: false,
  alternate: true
})

res:

//设置radoms
randoms = Float64Array.from({length: 2000}, d3.randomNormal(mu, 2))

res:randoms = Float64Array(2000) [-2.868589011691047, -4.7936406445198365, -4.343013697612423, -5.547527309136961, -4.78604622459069, -5.359840719072615, -4.168163402748507, -2.0984292195532874, -8.050575488596463, -4.833137648109412, -4.667022617826721, -5.943203256398205, -6.6432190751434765, -6.859719986263025, -6.788903304037964, -4.643506987596722, -6.240674182868877, -6.548588633621703, -7.372203541424608, -1.772317184084061, …]

//画出直方图
Histogram(randoms, {width, height: 200, color: "steelblue", domain: [-10, 10]})