-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscaledChartExample.html
166 lines (135 loc) · 9.97 KB
/
scaledChartExample.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
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
<html>
<head>
<title>Line Graph with Dual-scaled Axes using SVG and d3.js</title>
<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<style>
/* tell the SVG path to be a thin blue line without any area fill */
path {
stroke-width: 1;
fill: none;
}
.data1 {
stroke: steelblue;
}
.data2 {
stroke: orange;
}
.axis {
shape-rendering: crispEdges;
}
.x.axis line {
stroke: lightgrey;
}
.x.axis .minor {
stroke-opacity: .5;
}
.x.axis path {
display: none;
}
.x.axis text {
font-size: 14;
}
.y.axis line, .y.axis path {
fill: none;
stroke: #000;
}
.y.axis text {
font-size: 14;
}
.y.axisRight text {
fill: orange;
}
.y.axisLeft text {
fill: steelblue;
}
</style>
</head>
<body>
<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>
<script>
/* implementation heavily influenced by http://bl.ocks.org/1166403 */
/* some arguments AGAINST the use of dual-scaled axes line graphs can be found at http://www.perceptualedge.com/articles/visual_business_intelligence/dual-scaled_axes.pdf */
// define dimensions of graph
var m = [80, 80, 80, 80]; // margins
var w = 900 - m[1] - m[3]; // width
var h = 400 - m[0] - m[2]; // height
// create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)
var data1 = [272400,311800,339600,335800,335800,328800,317600,299600,337200,366400,350200,349800,354400,348400,324200,329000,356200,356200,329000,352400,343800,308400,261400,364400,333600,380000,353600,345400,320200,355000,354400,365000,349200,353000,339200,320200,335800,381400,357000,355200,354800,332800,320600,329400,365800,363400,365000,361600,345200,300800,344200,370800,360200,362600,349400,357800,294800,349000,372200,368200,365600,365600,357000,320200,329800,383600,383600,382200,363000,361200,329200,351000,381400,364200,394600,372200,363000,335400,361800,379600,389000,382000,389000,370400,326000,363200,406400,392200,368400,398200,367200,326200,335600,386800,386000,378600,378800,387400,341600,349000,404600,379800,388600,393600,385200,345400,371600,419600,399800,422000,410800,410200,381200,380400,442600,457800,453000,459200,457200,411000,428600,465800,451000,459800,484600,461200,427000,421800,481800,466600,402400,477800,466600,467200,457200,517000,493000,482600,504400,505600,478800,491400,518800,520800,508800,522800,531400,492400,508400,557800,564200,528000,555200,537600,480400,520600,551000,566000,531000,531200,519400,499000,495000,553800,578000,553200,554800,532400,501800,540600,567600,567600,563000,542400,566600,486800,538400,621200,580800,574200,597200,584000,522200,589600,622800,623800,627800,595200,576000,366000,592200,655600,660000,640000,639600,638400,590800,675600,746600,708400,710400,722400,708600,632200,764400,840200,810200,667000,766800,766000,740400,850800,858400,857400,851800,851800,821000,757600,851400,883000,883600,879800,852800,804800,730600,805800,864000,844800,834800,838800,809200,722800,843800,894000,820400,819000,810000,793400,737600,818000,866800,830600,845000,819200,760000,728400,793200,830000,837600,811400,823400,752800,696400,770600,844800,823000,793400,812000,769400,723200,755600,764600,811200,826200,866800,833000,755000,770600,649800,740400,836800,833600,859000,796000,834800,858400,809000,853000,801400,763600,713600,799200,819200,818000,781800,809200,736600,689800,802400,828600,794200,813000,788400,755200,689200,777800,811200,766000,809400,776800,759000,684800,807400,830800,802800,786000,751800,745000,666400,773200,795200,743600,739200,714000,727600,654000,717000,751600,739600,757600,730600,705200,674400,730800,767000,751600,776600,712000,688000,637800,686000,748600,750200,765400,742400,701000,636800,720400,779000,765200,851200,793000,731400,651200,734800,825400,790800,763400,724200,723600,625800,714600,803600,742600,738000,745800,706600,613600,712000,767400,750800,821200,813400,757800,683800];
var data2 = [12360,16240,14210,14040,15190,13570,14020,15600,16080,15800,16740,15680,16790,15520,17410,17660,17000,15080,17190,17020,16620,15200,13210,16970,16030,16090,16800,15280,15450,15990,17130,14970,16020,15780,15770,15720,16210,15820,16080,14860,14210,14980,16200,15430,15510,16750,16460,15130,15120,15580,18040,16380,15940,16590,15950,15480,14940,16520,16570,15910,15950,16280,17120,15720,16600,17580,16260,17270,15660,16500,16410,17140,16240,17330,16320,17490,17220,17030,19130,17440,17350,17010,19050,16150,16350,18280,17670,19690,17470,16320,16180,16290,15440,16600,17430,17800,18110,16870,17200,16700,18010,18110,17850,17600,17870,18100,17300,19960,18340,19650,19710,21300,18930,20090,20240,21150,21020,21940,22350,22160,20800,22390,21450,22970,20690,23410,21490,21690,20650,22440,21630,23420,22860,23490,24460,23610,23810,22840,23540,24800,23460,24140,25050,23910,23790,23190,23390,23160,23830,23680,25940,23420,23330,23630,23400,26230,22690,24700,22010,23050,22460,24620,24960,26180,24540,24240,24690,24140,25140,29410,25900,25880,24600,25380,25090,24930,28930,26570,25270,26560,25520,27150,25130,25600,28580,25800,25500,27870,26320,18930,30390,27640,27790,28380,29230,28160,28490,31290,31710,32150,29840,29860,30240,30750,33300,34750,33250,31920,36940,36930,33360,38500,33700,34630,36580,36130,34960,35210,37600,37100,34640,36840,36150,33850,32800,35440,37510,36770,35560,35460,36650,35370,36990,39810,39340,36350,35350,33160,34440,36720,35200,37240,36030,36330,34940,34840,39350,37370,34040,33510,35270,32940,33310,34730,35760,37300,35190,33420,32550,33450,34360,41660,42960,38970,37080,37150,36460,41330,34220,34980,34840,39150,38110,35380,38760,36080,33790,36150,35960,32570,33180,36000,36390,33950,35390,36680,36540,31270,34720,35030,37090,38120,32870,34800,35000,34370,35070,35430,36830,37380,35390,33170,37300,34710,36450,37500,37820,31590,34370,37430,36650,35300,35520,35830,35650,32070,38700,34460,34450,32720,34900,35680,33340,37500,35730,35270,37150,35010,35260,33690,40330,36410,35540,35600,35480,37740,35600,44060,34610,37160,37880,36800,37940,35140,36900,40490,37740,36330,37730,35330,35800,39580,37590,35770,36430,36720,36860,33580,36830,35830,36600,37840,39450,35390,35310];
// X scale will fit all values from data[] within pixels 0-w
var x = d3.scale.linear().domain([0, data1.length]).range([0, w]);
// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
//var y1 = d3.scale.linear().domain([0, 10]).range([0, h]); // in real world the domain would be dynamically calculated from the data
//var y2 = d3.scale.linear().domain([0, 700]).range([0, h]); // in real world the domain would be dynamically calculated from the data
// automatically determining max range can work something like this
var y1 = d3.scale.linear().domain([0, d3.max(data1)]).range([h, 0]);
var y2 = d3.scale.linear().domain([0, d3.max(data2)]).range([h, 0]);
var min1 = d3.min(data1), max1 = d3.max(data1)
var min2 = d3.min(data2), max2 = d3.max(data2)
console.log({min1, max1, min2, max2});
console.log(272400 * (max2-min2)/(max1-min1));
console.log(y1(272400), y1(311800), y1(339600), y1(335800), y1(328800))
// create a line function that can convert data[] into x and y points
var line1 = d3.svg.line()
// assign the X function to plot our line as we wish
.x(function(d,i) {
// verbose logging to show what's actually being done
// console.log('Plotting X1 value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
// return the X coordinate where we want to plot this datapoint
return x(i);
})
.y(function(d) {
// verbose logging to show what's actually being done
// console.log('Plotting Y1 value for data point: ' + d + ' to be at: ' + y1(d) + " using our y1Scale.");
// return the Y coordinate where we want to plot this datapoint
return y1(d);
})
// create a line function that can convert data[] into x and y points
var line2 = d3.svg.line()
// assign the X function to plot our line as we wish
.x(function(d,i) {
// verbose logging to show what's actually being done
// console.log('Plotting X2 value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
// return the X coordinate where we want to plot this datapoint
return x(i);
})
.y(function(d) {
// verbose logging to show what's actually being done
// console.log('Plotting Y2 value for data point: ' + d + ' to be at: ' + y2(d) + " using our y2Scale.");
// return the Y coordinate where we want to plot this datapoint
return y2(d);
})
// Add an SVG element with the desired dimensions and margin.
var graph = d3.select("#graph").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// create yAxis
var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
// Add the x-axis.
graph.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
// create left yAxis
var yAxisLeft = d3.svg.axis().scale(y1).ticks(4).orient("left");
// Add the y-axis to the left
graph.append("svg:g")
.attr("class", "y axis axisLeft")
.attr("transform", "translate(-15,0)")
.call(yAxisLeft);
// create right yAxis
var yAxisRight = d3.svg.axis().scale(y2).ticks(6).orient("right");
// Add the y-axis to the right
graph.append("svg:g")
.attr("class", "y axis axisRight")
.attr("transform", "translate(" + (w+15) + ",0)")
.call(yAxisRight);
// add lines
// do this AFTER the axes above so that the line is above the tick-lines
graph.append("svg:path").attr("d", line1(data1)).attr("class", "data1");
graph.append("svg:path").attr("d", line2(data2)).attr("class", "data2");
</script>
</body>
</html>