-
Notifications
You must be signed in to change notification settings - Fork 9
/
main.js
86 lines (69 loc) · 1.98 KB
/
main.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
var d3 = require('d3')
var React = require('react')
var ReactFauxDOM = require('react-faux-dom')
var Chart = React.createClass({
propTypes: {
data: React.PropTypes.array
},
render: function () {
var data = this.props.data
var margin = {top: 20, right: 20, bottom: 30, left: 50}
var width = 960 - margin.left - margin.right
var height = 500 - margin.top - margin.bottom
var parseDate = d3.time.format('%d-%b-%y').parse
var x = d3.time.scale()
.range([0, width])
var y = d3.scale.linear()
.range([height, 0])
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
var line = d3.svg.line()
.x(function (d) { return x(d.date) })
.y(function (d) { return y(d.close) })
var node = ReactFauxDOM.createElement('svg')
var svg = d3.select(node)
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
data.forEach(function (d) {
d.date = parseDate(d.date)
d.close = +d.close
})
x.domain(d3.extent(data, function (d) { return d.date }))
y.domain(d3.extent(data, function (d) { return d.close }))
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
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 ($)')
svg.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', line)
return node.toReact()
}
})
function render (data) {
React.render(React.createElement(Chart, {
data: data
}), document.getElementById('mount'))
}
d3.tsv('/js/d3-to-react-again/data.tsv', function (error, data) {
if (error) {
throw error
}
render(data)
})