Skip to content

Instantly share code, notes, and snippets.

@VisDockHub

VisDockHub/README.md

Last active August 29, 2015 13:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save VisDockHub/9302420 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save VisDockHub/9302420 to your computer and use it in GitHub Desktop.
Download ZIP
VisDock in Blue Earth
Raw
README.md

This Blue Earth example was originally created by Marc Neuwirth and is one of his examples to render objects in a realistic manner using CSS. The original work can be found here. The VisDock toolkit has been integrated into the Blue Earth example built with Marc Neuwirth's custom D3.js library. Using selection, users can query countries while using the pointer tool, they can still use the zooming event provided in d3 library. VisDock rotation and Pan & Zoom tools work independently of the built-in zoom functions. For more information about VisDock, cick on the link.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg id="defs">
<defs>
<linearGradient id="gradBlue" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#005C99;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0099FF;stop-opacity:1" />
</linearGradient>
<filter id="glow">
<feColorMatrix type="matrix"
values=
"0 0 0 0 0
0 0 0 0.9 0
0 0 0 0.9 0
0 0 0 1 0"/>
<feGaussianBlur stdDeviation="5.5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
<link href="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
<script src="http://marcneuwirth.com/experiments/globe/d3.custom.js"></script>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js"></script>
<script>
var zoom;
VisDock.init("body", {width: 1000, height: 700});
AnnotatedByData.layerTypes = [".feature"]
var viewport = VisDock.getViewport();
VisDock.eventHandler = {
getHitsPolygon : function(points, inclusive) {
var shapebound = new createPolygon(points);
return shapebound.intersectPath(d3.selectAll(".feature")[0], inclusive)
},
getHitsLine : function(points, inclusive) {
var shapebound = new createLine(points);
return shapebound.intersectPath(d3.selectAll("path")[0], inclusive)
},
getHitsEllipse : function(points, inclusive) {
var shapebound = new createEllipse(points);
return shapebound.intersectPath(d3.selectAll("path")[0], inclusive)
},
setColor : function(hits) {
QueryManager.layers[num - 1] = [];
for (var i = 0; i < hits.length; i++) {
var d = hits[i].getAttributeNS(null, "d")
var opacity = (parseFloat(hits[i].getAttributeNS(null, "opacity")) >= 0) ? hits[i].getAttributeNS(null, "opacity") : 0
QueryManager.layers[num - 1][i] = viewport.append("path")
.attr("d", d)
.attr("style", "fill: " + VisDock.color[num - 1] + "; opacity:" + 1+ "; pointer-events: none")
.attr("id", "_" + hits[i].getAttributeNS(null, "id"))
.attr("class", "VisDockPathLayer")
}
},
changeColor : function(color, query, index) {
for (var i = 0; i < query.length; i++) {
var vis = query[i][0][0].getAttributeNS(null, "style").split("opacity:")[1].split(";")[0]//.split(":")[1]
query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; opacity: " + vis + "; pointer-events: none")
}
},
changeVisibility : function(vis, query, index) {
for (var i = 0; i < query.length; i++) {
var color = query[i][0][0].getAttributeNS(null, "style").split("fill: ")[1].split(";")[0]//.split(":")[1]
query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; opacity: " + vis + "; pointer-events: none")
}
},
removeColor : function(hits, index) {
for (var i = 0; i < hits.length; i++) {
hits[i].remove();
}
}
}
BirdView.init(viewport, 1000, 700)
d3.select(self.frameElement).style("width", "1000px");
d3.select(self.frameElement).style("height", "700px");
</script>
<script src="script.js"></script>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js"></script>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js"></script>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js"></script>
</body>
</html>
Raw
script.js
;(function(w, d3, undefined){
"use strict";
var width, height;
function getSize(){
width = w.innerWidth/2,
height = w.innerHeight/1.5;
if(width === 0 || height === 0){
setTimeout(function(){
getSize();
}, 100);
}
else {
init();
}
}
function init(){
//Setup path for outerspace
var space = d3.geo.azimuthal()
.mode("equidistant")
.translate([width / 2, height / 2]);
space.scale(space.scale() * 3);
var spacePath = d3.geo.path()
.projection(space)
.pointRadius(1);
//Setup path for globe
var projection = d3.geo.azimuthal()
.mode("orthographic")
.translate([width / 2, height / 2]);
var scale0 = projection.scale();
var path = d3.geo.path()
.projection(projection)
.pointRadius(2);
//Setup zoom behavior
zoom = d3.behavior.zoom(true)
.scale(projection.scale())
.scaleExtent([100, 800])
.on("zoom", move);
var circle = d3.geo.circle();
var svg = viewport
.call(zoom)
.on("dblclick.zoom", null);
//Create a list of random stars and add them to outerspace
var starList = createStars(300);
var stars = svg.append("g")
.selectAll("g")
.data(starList)
.enter()
.append("path")
.attr("class", "star")
.attr("d", function(d){
spacePath.pointRadius(d.properties.radius);
return spacePath(d);
});
svg.append("rect")
.attr("class", "frame")
.attr("width", width)
.attr("height", height);
var defs1 = svg.append("defs")
var linear1 = defs1.append("linearGradient")
.attr("id", "gradBlue")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%")
linear1.append("stop").attr("offset", "0%").attr("style", "stop-color:#005C99;stop-opacity:1")
linear1.append("stop").attr("offset", "100%").attr("style", "stop-color:#0099FF;stop-opacity:1")
//Create the base globe
var backgroundCircle = svg.append("circle")
.attr('cx', width / 2)
.attr('cy', height / 2)
.attr('r', projection.scale())
.attr('class', 'globe')
.attr("filter", "url(#glow)")
.attr("fill", "url(#gradBlue)");
var g = svg.append("g"),
features;
//Add all of the countries to the globe
d3.json("world-countries.json", function(collection) {
VisDock.startChrome();
features = g.selectAll(".feature").data(collection.features);
var id = 0;
features.enter().append("path")
.attr("class", "feature")
.attr("id", function(){ return "f" + id++})
.attr("d", function(d){ return path(circle.clip(d)); });
VisDock.finishChrome();
});
//Redraw all items with new projections
function redraw(){
features.attr("d", function(d){
return path(circle.clip(d));
});
stars.attr("d", function(d){
spacePath.pointRadius(d.properties.radius);
return spacePath(d);
});
}
function move() {
if(d3.event){
VisDock.startChrome();
var scale = d3.event.scale;
var origin = [d3.event.translate[0] * -1, d3.event.translate[1]];
projection.scale(scale);
space.scale(scale * 3);
backgroundCircle.attr('r', scale);
path.pointRadius(2 * scale / scale0);
projection.origin(origin);
circle.origin(origin);
//globe and stars spin in the opposite direction because of the projection mode
var spaceOrigin = [origin[0] * -1, origin[1] * -1];
space.origin(spaceOrigin);
redraw();
AnnotatedByData.update();
VisDock.finishChrome();
}
}
function createStars(number){
var data = [];
for(var i = 0; i < number; i++){
data.push({
geometry: {
type: 'Point',
coordinates: randomLonLat()
},
type: 'Feature',
properties: {
radius: Math.random() * 1.5
}
});
}
return data;
}
function randomLonLat(){
return [Math.random() * 360 - 180, Math.random() * 180 - 90];
}
}
getSize();
d3.timer(function(){
VisDock.startChrome();
if (viewport.attr("pointer-events") == "visiblePainted" || viewport.attr("pointer-events") == null){
viewport.call(zoom)
} else {
Panel.panel.selectAll("*").on("mousedown.zoom", null)
Panel.panel.selectAll("*").on("mousewheel.zoom", null)
}
var layers = d3.selectAll(".VisDockPathLayer")[0];
for (var i = 0; i < layers.length; i++){
var id = parseInt(layers[i].getAttributeNS(null, "id").split("_f")[1])
var d = d3.selectAll("#f" + id.toString()).attr("d")
layers[i].setAttributeNS(null, "d", d)
}
VisDock.finishChrome();
})
}(window, d3));
Raw
style.css
#info {
position: absolute;
z-index: 10;
left: 25px;
top: 25px;
}
#defs {
height: 0;
width:0;
}
.frame {
fill: none;
pointer-events: all;
}
.feature {
fill: #6CCC00;
stroke: #fff;
stroke-width: .5px;
}
.globe {
stroke: rgba(255, 255, 255, .5);
stroke-width: .25px;
}
.star {
fill: #fff;
stroke: rgba(255, 255, 255, .5);
stroke-width: .25px;
}
Display the source blob
Display the rendered blob
Raw
world-countries.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment