-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathd3.html
108 lines (87 loc) · 7.75 KB
/
d3.html
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
<!DOCTYPE html>
<html>
<head>
<title>
MPC - Viewer
</title>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--<link rel="stylesheet" type="text/css" href="./src/css/index.css">-->
<style type="text/css">
html{
margin-top:0px !important;
height:490px;
}
body{
margin:0;
font-family:Arial, Arial, Helvetica, sans-serif;
background:#fff;
-webkit-font-smoothing:antialiased;
text-shadow:1px 1px 1px rgba(0,0,0,0.004);
}
</style>
</head>
<body>
<!--<script type="text/javascript" src="./src/js/lib/three.r75.min.js"></script>-->
<!--<script type="text/javascript" src="./src/js/lib/react.15.01.min.js"></script>-->
<!--<script type="text/javascript" src="./src/js/lib/react-dom.15.01.js"></script>-->
<script type="text/javascript" src="./src/js/lib/d3.min.js"></script>
<script type="text/javascript" src="./src/js/lib/utils.js"></script>
<script type="text/javascript">
// data that you want to plot, I"ve used separate arrays for x and y values
var xdata = [0.049449470639228818, 0.076072270870208736, 0.12445869088172912, 0.15387264251708985, 0.1734282124042511, 0.12590950727462769, 0.20145642280578613, 0.21415163516998292, 0.16569070503115654, 0.19939218640327452, 0.29268406033515931, 0.27663531422615051, 0.33598954916000368, 0.27255135536193847, 0.29597889512777331, 0.37623782157897945, 0.32050730761140583, 0.3773149573802948, 0.41630028843879696, 0.47166834950447084, 0.40256674773991108, 0.45005370795726773, 0.47784661889076235, 0.46998963564634327, 0.56352434635162352, 0.54020052850246425, 0.58380342245101935, 0.55454012095928196, 0.575249714255333, 0.64012058258056637, 0.65358301997184753, 0.65667353987693788, 0.67537135124206549, 0.70976554512977608, 0.71326779603958135, 0.71157484129071247, 0.75697119355201714, 0.75433783173561098, 0.80864444136619573, 0.87267929792404175, 0.87956038713455209, 0.8475423765182496, 0.88359729588031766, 0.93646166086196903, 0.97306119680404668, 0.90982413217425351, 0.97675882697105409, 0.9563300573825837, 0.96997293815016739, 1.0584905731678009, 1.0454409390687942, 1.1075640451908111, 1.0471976959705354, 1.0682266837358476, 1.1694348442554474, 1.1175579085946084, 1.1990958285331728, 1.2139691972732545, 1.1643324038386345, 1.221393432021141, 1.2779566526412964, 1.3097227942943572, 1.2905672752857209, 1.3018228715658189, 1.3176738727092743, 1.3025401124730707, 1.3712219488620758, 1.3872760498523713, 1.37065666154027, 1.4163925606012346, 1.4420371294021608, 1.4422985625267029, 1.4861790114641189, 1.4697276337444782, 1.510557131767273, 1.5834174394607543, 1.6155898880958557, 1.6210555160045623, 1.6184465324878694, 1.6471679258346559, 1.6401099562644958, 1.7099562716484071, 1.7385217392444612, 1.726626298427582, 1.7567159700393675, 1.7865273594856261, 1.7398552072048188, 1.782354056239128, 1.8087845897674562, 1.8359570908546448, 1.8365423053503036, 1.8408054751157761, 1.8706501209735871, 1.9094669795036316, 1.9705561983585358, 1.9184295728802683, 2.0179340195655824, 1.9808500760793686, 2.0126107490062712, 2.0281216996908187];
var ydata = [1.0, 0.9999499987499375, 0.999799979995999, 0.9995498987044118, 0.9991996797437437, 0.998749217771909, 0.9981983770774224, 0.9975469913743412, 0.996794863550169, 0.995941765365827, 0.99498743710662, 0.9939315871829408, 0.9927738916792685, 0.9915139938498094, 0.9901515035589251, 0.9886859966642595, 0.9871170143402453, 0.9854440623394105, 0.983666610188635, 0.9817840903172143, 0.9797958971132712, 0.9777013859047148, 0.9754998718605759, 0.9731906288081488, 0.9707728879609278, 0.9682458365518543, 0.9656086163658649, 0.9628603221651623, 0.96, 0.9570266453970862, 0.9539392014169457, 0.9507365565707464, 0.9474175425861608, 0.9439809320108113, 0.9404254356406998, 0.9367496997597597, 0.9329523031752481, 0.9290317540321213, 0.9249864863877743, 0.920814856526544, 0.916515138991168, 0.9120855223058855, 0.9075241043630742, 0.9028288874421332, 0.8979977728257459, 0.8930285549745876, 0.8879189152169246, 0.8826664149042943, 0.8772684879784524, 0.8717224328879004, 0.8660254037844386, 0.8601744009211155, 0.854166260162505, 0.8479976415061542, 0.8416650165000324, 0.8351646544245033, 0.8284926070883191, 0.8216446920658588, 0.8146164741766521, 0.8074032449773781, 0.8, 0.7924014134263012, 0.7846018098373212, 0.7765951326141569, 0.7683749084919419, 0.7599342076785331, 0.751265598839718, 0.7423610981186985, 0.7332121111929343, 0.7238093671679028, 0.714142842854285, 0.7042016756583301, 0.6939740629158989, 0.6834471449936711, 0.6726068688320095, 0.6614378277661477, 0.6499230723708769, 0.6380438856379709, 0.6257795138864806, 0.6131068422387732, 0.5999999999999999, 0.5864298764558299, 0.5723635208501673, 0.5577633906953736, 0.5425863986500216, 0.526782687642637, 0.510294032886923, 0.493051721424842, 0.4749736834815167, 0.4559605246071199, 0.4358898943540673, 0.41460824883255754, 0.39191835884530846, 0.36755951898978195, 0.3411744421846394, 0.3122498999199198, 0.28, 0.24310491562286443, 0.1989974874213242, 0.14106735979665894];
// size and margins for the chart
var margin = {top: 50, right: 50, bottom: 50, left: 50};
var width = window.innerHeight - margin.left - margin.right;
var height = window.innerHeight - margin.top - margin.bottom;
// x and y scales, I"ve used linear here but there are other options
// the scales translate data values to pixel values for you
var x = d3.scale.linear()
//.domain([0, d3.max(xdata)]) // the range of the values to plot
.domain([-1, 3]) // the range of the values to plot
.range([ 0, width ]); // the pixel range of the x-axis
var y = d3.scale.linear()
//.domain([0, d3.max(ydata)])
.domain([-1, 3]) // the range of the values to plot
.range([ height, 0 ]);
// the chart object, includes all margins
var chart = d3.select("body")
.append("svg:svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "chart")
// the main object where the chart and axis will be drawn
var main = chart.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("width", width)
.attr("height", height)
.attr("class", "main")
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
main.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class", "main axis date")
.call(xAxis);
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
main.append("g")
.attr("transform", "translate(0,0)")
.attr("class", "main axis date")
.call(yAxis);
// draw the graph object
var g = main.append("svg:g");
g.selectAll("scatter-dots")
.data(ydata) // using the values in the ydata array
.enter().append("svg:circle") // create a new circle for each value
.attr("cy", function (d) { return y(d); } ) // translate y value to a pixel
.attr("cx", function (d,i) { return x(xdata[i]); } ) // translate x value
.attr("r", 3) // radius of circle
.style("opacity", 0.6); // opacity of circle
</script>
</body>
</html>