-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbundle.js
210 lines (181 loc) · 7.42 KB
/
bundle.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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
// import { lab } from "../../../Library/Caches/typescript/2.6/node_modules/@types/d3";
const margin = { top: 20, right: 100, bottom: 50, left: 50 };
const width = 900 - margin.left - margin.right;
const height = 600 - margin.top - margin.bottom;
const svg = d3.select("body").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const parseDate = d3.time.format("%d-%b-%y").parse;
const bisectDate = d3.bisector(d => d.date).left;
const formatValue = d3.format(",.2f");
const formatTime = d3.time.format("%b %y");
const formatCurrency = d => "$" + formatValue(d);
// Set the Ranges
const x = d3.time.scale().range([0, width]);
const y = d3.scale.linear().range([height, 0]); // 0,0 is on the upper left corner of screen.
// Define the axis
const xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(30).tickFormat(d3.time.format("%b-%y"));
const yAxis = d3.svg.axis().scale(y).orient("left");
// Define the line
const line = d3.svg.line().x(d => x(d.date)).y(d => y(d.price));
d3.csv("./URLs2.csv", (error, data) => {
if (error) throw error;
var seed = {};
data.forEach(d => {
let a = {
url: d.URLs,
title: d.Title,
image: d.Image
};
if (!(d.Key in seed)) {
seed[d.Key] = [];
seed[d.Key].push(a);
} else {
seed[d.Key].push(a);
}
});
console.log(seed);
window.seed = seed;
});
d3.csv("./BTC_USD_SHORT3.csv", (error, data) => {
if (error) throw error;
data.forEach(d => {
d.date = parseDate(d.Date);
d.price = +d.Price;
d.scatter = +d.Scatter;
d.hkey = d.HKey;
});
data.sort((a, b) => a.date - b.date);
// Scale the ranges of the data
x.domain([data[0].date, data[data.length - 1].date]);
y.domain(d3.extent(data, d => d.price));
// x axis
svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis).selectAll("text").attr("y", 0).attr("x", 10).attr("dy", ".4em").attr("transform", "rotate(45)").style("text-anchor", "start");
// y axis
svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end").text("Price ($)");
// add value of the line
svg.append("path").datum(data).attr("class", "line").attr("d", line);
const focus = svg.append("g").attr("class", "focus").style("display", "none");
focus.append("circle").attr("r", 4.5);
focus.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", -1000).attr("stroke-width", 1).attr("stroke", "gray");
focus.append("text").attr("position", "absolute").attr("y", -200).attr("x", 9).attr("class", "floating-text").attr("dy", ".5em");
svg.append("rect").attr("class", "overlay").attr("width", width).attr("height", height).on("mouseover", () => {
focus.style("display", null);
}).on("mouseout", () => {
focus.style("display", "none");
}).on("mousemove", mousemove);
// const displayText = ${formatCurrency(d.price)} + ${d.date};
function mousemove() {
const x0 = x.invert(d3.mouse(this)[0]);
const i = bisectDate(data, x0, 1);
const d0 = data[i - 1];
const d1 = data[i];
const d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.price) + ")");
focus.select("text").text(formatCurrency(d.price) + " " + formatTime(d.date));
};
const div = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);
// let tooltipTop = d => ( d3.event.pageY + 200);
svg.selectAll("dot").data(data).enter().append("circle").attr("r", d => d.HKey ? 4 : 0).attr("cx", d => x(d.date)).attr("cy", d => y(d.scatter)).on("mouseover", d => {
div.transition().duration(200).style("opacity", 1);
div.html(formatTime(d.date) + "<br/>" + d.scatter).style("left", d3.event.pageX + "px").style("top", d3.event.pageY - 100 + "px");
}).on("mouseout", d => {
div.transition().duration(500).style("opacity", 0);
}).on("click", d => {
var art = document.getElementById("articles");
if (art.getElementsByTagName('li').length >= 1) {
while (art.firstChild) {
art.removeChild(art.firstChild);
}
}
window.seed[d.hkey].forEach(article => {
let ul = document.getElementById("articles");
let li = document.createElement("li");
li.setAttribute("class", "thumb-list");
let a = document.createElement("a");
a.setAttribute('href', article.url);
a.setAttribute('target', '_blank');
let img = document.createElement("img");
img.setAttribute('src', article.image);
a.appendChild(img);
let h = document.createElement("h3");
h.innerHTML = article.title;
let title = document.createElement("a");
title.setAttribute('href', article.url);
title.appendChild(h);
li.appendChild(a);
li.appendChild(title);
ul.appendChild(li);
});
});
});
// export default TimeChart;
/***/ })
/******/ ]);
//# sourceMappingURL=bundle.js.map