【d3.js】学习笔记2 Data

//引入文件
FileAttachment("temperature.csv")

res:FileAttachment {name: “temperature.csv”}

//显示文件的文本信息
FileAttachment("temperature.csv").text()

res:
`date,temperature
2011-10-01,62.7
2011-10-02,59.9
2011-10-03,59.1
2011-10-04,58.8
2011-10-05,58.7
2011-10-06,57.0
2011-10-07,56.7
2011-10-08,56.8
2011-10-09,56.7
2011-10-10,60.1
2011-10-11,61.1
2011-10-12,61.5
2011-10-13,64.3
2011-10-14,67.1
2011-10-15,64.6
2011-10-16,61.6
2011-10-17,61.1
2011-10-18,59.2
2011-10-19,58.9Show 348 truncated lines

//将文本用.csv()函数做成对象
FileAttachment("temperature.csv").csv()

Array(366) [
0: Object {date: “2011-10-01”, temperature: “62.7”}
1: Object {date: “2011-10-02”, temperature: “59.9”}
2: Object {date: “2011-10-03”, temperature: “59.1”}
3: Object {date: “2011-10-04”, temperature: “58.8”}
4: Object {date: “2011-10-05”, temperature: “58.7”}
5: Object {date: “2011-10-06”, temperature: “57.0”}
6: Object {date: “2011-10-07”, temperature: “56.7”}
7: Object {date: “2011-10-08”, temperature: “56.8”}
8: Object {date: “2011-10-09”, temperature: “56.7”}
9: Object {date: “2011-10-10”, temperature: “60.1”}
10: Object {date: “2011-10-11”, temperature: “61.1”}
11: Object {date: “2011-10-12”, temperature: “61.5”}
12: Object {date: “2011-10-13”, temperature: “64.3”}
13: Object {date: “2011-10-14”, temperature: “67.1”}
14: Object {date: “2011-10-15”, temperature: “64.6”}
15: Object {date: “2011-10-16”, temperature: “61.6”}
16: Object {date: “2011-10-17”, temperature: “61.1”}
17: Object {date: “2011-10-18”, temperature: “59.2”}
18: Object {date: “2011-10-19”, temperature: “58.9”}
19: Object {date: “2011-10-20”, temperature: “57.2”}
… more
]

//在csv对象中所有的项都是字符串，不具有相加减的能力
"62.7" + "59.9" // 122.6? Nope!

res:“62.759.9”

//通过修改typed属性将字符串改成数字类型
FileAttachment("temperature.csv").csv({typed: true})

Array(366) [
0: Object {date: 2011-10-01, temperature: 62.7}
1: Object {date: 2011-10-02, temperature: 59.9}
2: Object {date: 2011-10-03, temperature: 59.1}
3: Object {date: 2011-10-04, temperature: 58.8}
4: Object {date: 2011-10-05, temperature: 58.7}
5: Object {date: 2011-10-06, temperature: 57}
6: Object {date: 2011-10-07, temperature: 56.7}
7: Object {date: 2011-10-08, temperature: 56.8}
8: Object {date: 2011-10-09, temperature: 56.7}
9: Object {date: 2011-10-10, temperature: 60.1}
10: Object {date: 2011-10-11, temperature: 61.1}
11: Object {date: 2011-10-12, temperature: 61.5}
12: Object {date: 2011-10-13, temperature: 64.3}
13: Object {date: 2011-10-14, temperature: 67.1}
14: Object {date: 2011-10-15, temperature: 64.6}
15: Object {date: 2011-10-16, temperature: 61.6}
16: Object {date: 2011-10-17, temperature: 61.1}
17: Object {date: 2011-10-18, temperature: 59.2}
18: Object {date: 2011-10-19, temperature: 58.9}
19: Object {date: 2011-10-20, temperature: 57.2}
… more
]

1 + 1

res: 2

name = "fred"

[...name].reverse().join("")

res:“derf”

//{}中可以写一些表达式，结果用return返回
sum = {
  let s = 0;
  for (let i = 0; i < 10; ++i) {
    s += i;
  }
  return s;
}

res:sum = 45

//结构化的将文件的内容转化为csv对象
data = {
  const text = await FileAttachment("temperature.csv").text();
  const parseDate = d3.utcParse("%Y-%m-%d");
  return d3.csvParse(text, ({date, temperature}) => ({
    date: parseDate(date),
    temperature: +temperature
  }));
}

res:
data = Array(366) [
0: Object {date: 2011-10-01, temperature: 62.7}
1: Object {date: 2011-10-02, temperature: 59.9}
2: Object {date: 2011-10-03, temperature: 59.1}
3: Object {date: 2011-10-04, temperature: 58.8}
4: Object {date: 2011-10-05, temperature: 58.7}
5: Object {date: 2011-10-06, temperature: 57}
6: Object {date: 2011-10-07, temperature: 56.7}
7: Object {date: 2011-10-08, temperature: 56.8}
8: Object {date: 2011-10-09, temperature: 56.7}
9: Object {date: 2011-10-10, temperature: 60.1}
10: Object {date: 2011-10-11, temperature: 61.1}
11: Object {date: 2011-10-12, temperature: 61.5}
12: Object {date: 2011-10-13, temperature: 64.3}
13: Object {date: 2011-10-14, temperature: 67.1}
14: Object {date: 2011-10-15, temperature: 64.6}
15: Object {date: 2011-10-16, temperature: 61.6}
16: Object {date: 2011-10-17, temperature: 61.1}
17: Object {date: 2011-10-18, temperature: 59.2}
18: Object {date: 2011-10-19, temperature: 58.9}
19: Object {date: 2011-10-20, temperature: 57.2}
… more
]

//显示的是最近的日期，和最远的日期
d3.extent(data, d => d.date)

res: Array(2) [2011-10-01, 2012-09-30]

//显示的是最低的气温，和最高的气温
d3.extent(data, d => d.temperature)

res: Array(2) [43.6, 67.1]

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

height = 200

Histogram(data, {value: d => d.temperature, width, height})

res: