pyk 0.0.2 → 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//= require_tree ./launchpad/
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
function CustomTooltip(tooltipId, width){
|
|
2
|
+
var tooltipId = tooltipId;
|
|
3
|
+
$("body").append("<div class='tooltip' id='"+tooltipId+"'></div>");
|
|
4
|
+
|
|
5
|
+
if(width){
|
|
6
|
+
$("#"+tooltipId).css("width", width);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
hideTooltip();
|
|
10
|
+
|
|
11
|
+
function showTooltip(content, event){
|
|
12
|
+
$("#"+tooltipId).html(content);
|
|
13
|
+
$("#"+tooltipId).show();
|
|
14
|
+
|
|
15
|
+
updatePosition(event);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function hideTooltip(){
|
|
19
|
+
$("#"+tooltipId).hide();
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
function updatePosition(event){
|
|
23
|
+
var ttid = "#"+tooltipId;
|
|
24
|
+
var xOffset = 20;
|
|
25
|
+
var yOffset = 10;
|
|
26
|
+
|
|
27
|
+
var ttw = $(ttid).width();
|
|
28
|
+
var tth = $(ttid).height();
|
|
29
|
+
var wscrY = $(window).scrollTop();
|
|
30
|
+
var wscrX = $(window).scrollLeft();
|
|
31
|
+
var curX = (document.all) ? event.clientX + wscrX : event.pageX;
|
|
32
|
+
var curY = (document.all) ? event.clientY + wscrY : event.pageY;
|
|
33
|
+
var ttleft = ((curX - wscrX + xOffset*2 + ttw) > $(window).width()) ? curX - ttw - xOffset*2 : curX + xOffset;
|
|
34
|
+
if (ttleft < wscrX + xOffset){
|
|
35
|
+
ttleft = wscrX + xOffset;
|
|
36
|
+
}
|
|
37
|
+
var tttop = ((curY - wscrY + yOffset*2 + tth) > $(window).height()) ? curY - tth - yOffset*2 : curY + yOffset;
|
|
38
|
+
if (tttop < wscrY + yOffset){
|
|
39
|
+
tttop = curY + yOffset;
|
|
40
|
+
}
|
|
41
|
+
$(ttid).css('top', tttop + 'px').css('left', ttleft + 'px');
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
return {
|
|
45
|
+
showTooltip: showTooltip,
|
|
46
|
+
hideTooltip: hideTooltip,
|
|
47
|
+
updatePosition: updatePosition
|
|
48
|
+
}
|
|
49
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
var map;
|
|
2
|
+
|
|
3
|
+
function initialize() {
|
|
4
|
+
var mapOptions = {
|
|
5
|
+
zoom: 1,
|
|
6
|
+
center: new google.maps.LatLng(51.4788, 0.0106),
|
|
7
|
+
mapTypeId: google.maps.MapTypeId.SATELLITE
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
map = new google.maps.Map(document.getElementById('map-canvas'),
|
|
11
|
+
mapOptions);
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
// Create a script tag and set the USGS URL as the source.
|
|
15
|
+
// Append this tag to the document's <head>.
|
|
16
|
+
var script = document.createElement('script');
|
|
17
|
+
//script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week';
|
|
18
|
+
script.src = '/data/bubbles_geo.json';
|
|
19
|
+
document.getElementsByTagName('head')[0].appendChild(script);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
window.eqfeed_callback = function(results) {
|
|
23
|
+
for (var i = 0; i < results.features.length; i++) {
|
|
24
|
+
var earthquake = results.features[i];
|
|
25
|
+
var coords = earthquake.geometry.coordinates;
|
|
26
|
+
var latLng = new google.maps.LatLng(coords[1],coords[0]);
|
|
27
|
+
var marker = new google.maps.Marker({
|
|
28
|
+
position: latLng,
|
|
29
|
+
map: map,
|
|
30
|
+
icon: getCircle(earthquake),
|
|
31
|
+
title: earthquake.data.tooltip_contents
|
|
32
|
+
});
|
|
33
|
+
var infowindow = new google.maps.InfoWindow({
|
|
34
|
+
content: earthquake.data.tooltip_contents ,
|
|
35
|
+
maxWidth: 200,
|
|
36
|
+
position: marker.getPosition()
|
|
37
|
+
});
|
|
38
|
+
google.maps.event.addListener(marker, 'click', function() {
|
|
39
|
+
alert("tip" + earthquake.data.tooltip_contents);
|
|
40
|
+
infowindow.open(map,marker);
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function getCircle(mark) {
|
|
47
|
+
return {
|
|
48
|
+
path: google.maps.SymbolPath.CIRCLE,
|
|
49
|
+
fillColor: mark.data.background_color,
|
|
50
|
+
fillOpacity: mark.data.background_opacity,
|
|
51
|
+
radius: mark.data.weight,
|
|
52
|
+
scale: 10,
|
|
53
|
+
strokeColor: mark.data.border_color,
|
|
54
|
+
strokeWeight: mark.data.border_weight
|
|
55
|
+
};
|
|
56
|
+
}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
|
|
2
|
+
var custom_bubble_chart = (function(d3, CustomTooltip
|
|
3
|
+
) {
|
|
4
|
+
"use strict";
|
|
5
|
+
|
|
6
|
+
var width = 800,
|
|
7
|
+
height = 600,
|
|
8
|
+
tooltip = CustomTooltip("gates_tooltip", 240),
|
|
9
|
+
layout_gravity = -0.01,
|
|
10
|
+
damper = 0.1,
|
|
11
|
+
nodes = [],
|
|
12
|
+
year_centers = [],
|
|
13
|
+
years_x = [],
|
|
14
|
+
vis, force, circles, radius_scale;
|
|
15
|
+
|
|
16
|
+
var center = {x: width /2, y: height/3};
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
function find_unique_elements(data, param, deltaWidthParam) {
|
|
20
|
+
var birthDates = {};
|
|
21
|
+
$.each(data, function() {
|
|
22
|
+
if (!birthDates[this[param]])
|
|
23
|
+
birthDates[this[param]] = [];
|
|
24
|
+
birthDates[this[param]].push(this);
|
|
25
|
+
})
|
|
26
|
+
var length = 0;
|
|
27
|
+
for (var d in birthDates) {
|
|
28
|
+
length ++;
|
|
29
|
+
};
|
|
30
|
+
var rows = Math.floor(length / 3) + 1;
|
|
31
|
+
var col =3;
|
|
32
|
+
var deltaWidth = (height /rows);
|
|
33
|
+
var h = deltaWidthParam;
|
|
34
|
+
for(var d in birthDates) {
|
|
35
|
+
var key = d;
|
|
36
|
+
var w;
|
|
37
|
+
if (col > 0) {
|
|
38
|
+
switch(col) {
|
|
39
|
+
case 3 : w = width /5; break;
|
|
40
|
+
case 2 : w = width /2; break;
|
|
41
|
+
case 1 : w = 4 * width /5;break;
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
year_centers[key] = {
|
|
45
|
+
x: w,
|
|
46
|
+
y: h
|
|
47
|
+
}
|
|
48
|
+
years_x[key] = {
|
|
49
|
+
x:w
|
|
50
|
+
}
|
|
51
|
+
console.log("key:"+ key + " x:" + w+ "y:"+h);
|
|
52
|
+
if (col == 3) {
|
|
53
|
+
rows --;
|
|
54
|
+
|
|
55
|
+
}
|
|
56
|
+
col --;
|
|
57
|
+
if (col == 0) {col = 3;h += deltaWidth;}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function custom_chart(data, type, divId) {
|
|
64
|
+
var max_amount = d3.max(data, function(d) { return parseInt(d.weight/10, 10); } );
|
|
65
|
+
radius_scale = d3.scale.pow().exponent(0.5).domain([0, max_amount]).range([10, 100]);
|
|
66
|
+
|
|
67
|
+
//create node objects from original data
|
|
68
|
+
//that will serve as the data behind each
|
|
69
|
+
//bubble in the vis, then add each node
|
|
70
|
+
//to nodes to be used later
|
|
71
|
+
data.forEach(function(d){
|
|
72
|
+
var node = {
|
|
73
|
+
id: d.id,
|
|
74
|
+
radius: radius_scale(parseInt(d.weight/10, 10)),
|
|
75
|
+
value: d.weight,
|
|
76
|
+
name: d.name,
|
|
77
|
+
visits: d.visits,
|
|
78
|
+
calls: d.calls,
|
|
79
|
+
leads: d.leads,
|
|
80
|
+
color: d.color,
|
|
81
|
+
genre: d.genre,
|
|
82
|
+
genre2:d.genre2,
|
|
83
|
+
x: Math.random() * 900,
|
|
84
|
+
y: Math.random() * 800
|
|
85
|
+
}
|
|
86
|
+
nodes.push(node);
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
nodes.sort(function(a, b) {return b.value- a.value; });
|
|
90
|
+
|
|
91
|
+
vis = d3.select("#"+ divID).append("svg")
|
|
92
|
+
.attr("width", width)
|
|
93
|
+
.attr("height", height)
|
|
94
|
+
.attr("id", "svg_vis");
|
|
95
|
+
|
|
96
|
+
circles = vis.selectAll("circle")
|
|
97
|
+
.data(nodes, function(d) { return d.id ;});
|
|
98
|
+
|
|
99
|
+
circles.enter().append("circle")
|
|
100
|
+
.attr("r", 0)
|
|
101
|
+
.attr("fill", function(d) { return d.color ;})
|
|
102
|
+
.attr("stroke-width", 2)
|
|
103
|
+
.attr("stroke", function(d) {return d3.rgb(d.color).darker();})
|
|
104
|
+
.attr("id", function(d) { return "bubble_" + d.id; })
|
|
105
|
+
.on("mouseover", function(d, i) {show_details(d, i, this);} )
|
|
106
|
+
.on("mouseout", function(d, i) {hide_details(d, i, this);} )
|
|
107
|
+
|
|
108
|
+
circles.transition().duration(2000).attr("r", function(d) { return d.radius; });
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
function charge(d) {
|
|
112
|
+
return -Math.pow(d.radius, 2.0) / 8;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
function start() {
|
|
116
|
+
force = d3.layout.force()
|
|
117
|
+
.nodes(nodes)
|
|
118
|
+
.size([width, height]);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
function display_group_all() {
|
|
122
|
+
force.gravity(layout_gravity)
|
|
123
|
+
.charge(charge)
|
|
124
|
+
.friction(0.9)
|
|
125
|
+
.on("tick", function(e) {
|
|
126
|
+
circles.each(move_towards_center(e.alpha))
|
|
127
|
+
.attr("cx", function(d) {return d.x;})
|
|
128
|
+
.attr("cy", function(d) {return d.y;});
|
|
129
|
+
});
|
|
130
|
+
force.start();
|
|
131
|
+
hide_years();
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
function move_towards_center(alpha) {
|
|
135
|
+
return function(d) {
|
|
136
|
+
d.x = d.x + (center.x - d.x) * (damper + 0.02) * alpha;
|
|
137
|
+
d.y = d.y + (center.y - d.y) * (damper + 0.02) * alpha;
|
|
138
|
+
};
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
function display_by_year(type) {
|
|
142
|
+
force.gravity(layout_gravity)
|
|
143
|
+
.charge(charge)
|
|
144
|
+
.friction(0.9)
|
|
145
|
+
.on("tick", function(e) {
|
|
146
|
+
circles.each(move_towards_year(e.alpha, type))
|
|
147
|
+
.attr("cx", function(d) {return d.x;})
|
|
148
|
+
.attr("cy", function(d) {return d.y;});
|
|
149
|
+
});
|
|
150
|
+
force.start();
|
|
151
|
+
display_years();
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
function move_towards_year(alpha, type1) {
|
|
155
|
+
return function(d) {
|
|
156
|
+
var key1 = "";
|
|
157
|
+
for(var k in d) {
|
|
158
|
+
if (type1 == k) {
|
|
159
|
+
key1 = d[k];
|
|
160
|
+
break;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
var target = year_centers[key1];
|
|
164
|
+
d.x = d.x + (target.x - d.x) * (damper + 0.02) * alpha * 1.1;
|
|
165
|
+
d.y = d.y + (target.y - d.y) * (damper + 0.02) * alpha * 1.1;
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
function display_years() {
|
|
171
|
+
var years_data = d3.keys(year_centers);
|
|
172
|
+
var years = vis.selectAll(".years")
|
|
173
|
+
.data(years_data);
|
|
174
|
+
|
|
175
|
+
years.enter().append("text")
|
|
176
|
+
.attr("class", "years")
|
|
177
|
+
.attr("x", function(d) { return year_centers[d].x; } )
|
|
178
|
+
.attr("y", function(d) { return year_centers[d].y;})
|
|
179
|
+
.attr("text-anchor", "middle")
|
|
180
|
+
.attr("fill", "white")
|
|
181
|
+
.text(function(d) { return d;});
|
|
182
|
+
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
function hide_years() {
|
|
186
|
+
var years = vis.selectAll(".years").remove();
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
function show_details(data, i, element) {
|
|
191
|
+
d3.select(element).attr("stroke", "black");
|
|
192
|
+
var content = "<h3>" + data.name + "</h3>";
|
|
193
|
+
content +="<span class=\"name\">Visits:</span><span class=\"value\"> " + data.visits + "</span><br/>";
|
|
194
|
+
content +="<span class=\"name\">Calls:</span><span class=\"value\"> " + data.calls + "</span><br/>";
|
|
195
|
+
content +="<span class=\"name\">Leads:</span><span class=\"value\"> " + data.leads + "</span><br/>";
|
|
196
|
+
|
|
197
|
+
tooltip.showTooltip(content, d3.event);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
function hide_details(data, i, element) {
|
|
201
|
+
d3.select(element).attr("stroke", function(d) { return d3.rgb(d.color).darker();} );
|
|
202
|
+
tooltip.hideTooltip();
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
var my_mod = {};
|
|
206
|
+
my_mod.init = function (_data, type, deltaWidthParam,divId) {
|
|
207
|
+
custom_chart(_data, type, divId);
|
|
208
|
+
find_unique_elements(_data, type, deltaWidthParam);
|
|
209
|
+
start();
|
|
210
|
+
};
|
|
211
|
+
|
|
212
|
+
my_mod.display_all = display_group_all;
|
|
213
|
+
my_mod.display_year = display_by_year;
|
|
214
|
+
my_mod.toggle_view = function(view_type, type) {
|
|
215
|
+
if (view_type == 'year') {
|
|
216
|
+
display_by_year(type);
|
|
217
|
+
} else {
|
|
218
|
+
display_group_all();
|
|
219
|
+
}
|
|
220
|
+
};
|
|
221
|
+
|
|
222
|
+
return my_mod;
|
|
223
|
+
})(d3, CustomTooltip
|
|
224
|
+
);
|
metadata
CHANGED
|
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
|
|
|
5
5
|
segments:
|
|
6
6
|
- 0
|
|
7
7
|
- 0
|
|
8
|
-
-
|
|
9
|
-
version: 0.0.
|
|
8
|
+
- 3
|
|
9
|
+
version: 0.0.3
|
|
10
10
|
platform: ruby
|
|
11
11
|
authors:
|
|
12
12
|
- Pykih Software LLP
|
|
@@ -118,6 +118,10 @@ files:
|
|
|
118
118
|
- app/assets/images/sprites/file-icons-16-px.png
|
|
119
119
|
- app/assets/images/sprites/signup.png
|
|
120
120
|
- app/assets/images/sprites/so.png
|
|
121
|
+
- app/assets/javascripts/pyk/bubbles_geo.js
|
|
122
|
+
- app/assets/javascripts/pyk/CustomTooltip.js
|
|
123
|
+
- app/assets/javascripts/pyk/types_bubbles.js
|
|
124
|
+
- app/assets/javascripts/pyk.js
|
|
121
125
|
- app/assets/stylesheets/pyk/bootstrap.css.scss
|
|
122
126
|
- app/assets/stylesheets/pyk/global.css.scss
|
|
123
127
|
- app/assets/stylesheets/pyk/helpers.css.scss
|