-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.js
158 lines (135 loc) · 4.39 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import * as d3 from "d3";
import faker from "faker";
import Barchart from "./Barchart";
const Svg = styled.svg`
width: 100vw;
height: 100vh;
background: #0b0c10;
`;
const Year = styled.text`
fill: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
font-size: 120px;
font-weight: bold;
text-anchor: end;
`;
const Title = styled.text`
fill: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
font-size: 26px;
font-weight: bold;
text-anchor: middle;
`;
const getYear = row =>
Number(row["Date of introduction"].replace(/\[.*\]/g, ""));
const getName = (row, type) =>
`${row["Processor"].replace(/\(.*\)/g, "")} (${type})`;
const getTransistors = row =>
Number(
row["MOS transistor count"]
.replace(/\[.*\]/g, "")
.replace(/[^0-9]/g, "")
);
const useData = () => {
const [data, setData] = useState(null);
// Replace this with actual data loading
useEffect(function() {
(async () => {
const datas = await Promise.all([
d3.csv("data/microprocessors.csv", row => ({
name: getName(row, "CPU"),
designer: row["Designer"],
year: getYear(row),
transistors: getTransistors(row),
type: "CPU"
})),
d3.csv("data/gpus.csv", row => ({
name: getName(row, "GPU"),
designer: row["Designer"],
year: getYear(row),
transistors: getTransistors(row),
type: "GPU"
}))
]);
// Group by year and accumulate everything form previous
const grouped = datas
.flat()
.sort((a, b) => a.year - b.year)
.reduce((groups, el) => {
if (!groups[el.year]) {
const previous = groups[el.year - 1];
groups[el.year] = previous || [];
}
groups[el.year] = [...groups[el.year], el];
return groups;
}, {});
setData(grouped);
})();
}, []);
return data;
};
function App() {
const data = useData();
const [currentYear, setCurrentYear] = useState(1970);
// Simple Moore's Law: double count every 2 years
// Not mathematically the prettiest, but it works :P
const mooresLaw = d3.range(1971, 2025).reduce(
(law, year) => {
if (year % 2 === 0) {
const count = law[year - 2] * 2;
const delta = count - law[year - 2];
law[year - 1] = law[year - 2] + delta / 2;
law[year] = count;
}
return law;
},
{ 1970: 1000 }
);
// Drives the main animation progressing through the years
// It's actually a simple counter :P
useEffect(() => {
const interval = d3.interval(() => {
setCurrentYear(year => {
if (!data[year + 1]) {
interval.stop();
return year;
}
return year + 1;
});
}, 2000);
return () => interval.stop();
}, [data]);
return (
<Svg>
<Title x={"50%"} y={30}>
Moore's law vs. actual transistor count in React & D3
</Title>
<Barchart
data={[
...((data && data[currentYear]) || []),
{
name: "Moore's law",
designer: "Moore",
year: currentYear,
type: "",
transistors: mooresLaw[currentYear]
}
]}
x={150}
y={50}
barThickness={20}
width={500}
/>
<Year x={"95%"} y={"95%"}>
{currentYear}
</Year>
</Svg>
);
}
export default App;