-
-
Save mvtango/9103445 to your computer and use it in GitHub Desktop.
So glaubt Berlin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// d3.tip | |
// Copyright (c) 2013 Justin Palmer | |
// | |
// Tooltips for d3.js SVG visualizations | |
(function (root, factory) { | |
if (typeof define === 'function' && define.amd) { | |
// AMD. Register as an anonymous module with d3 as a dependency. | |
define(['d3'], factory) | |
} else { | |
// Browser global. | |
root.d3.tip = factory(root.d3) | |
} | |
}(this, function (d3) { | |
// Public - contructs a new tooltip | |
// | |
// Returns a tip | |
return function() { | |
var direction = d3_tip_direction, | |
offset = d3_tip_offset, | |
html = d3_tip_html, | |
node = initNode(), | |
svg = null, | |
point = null, | |
target = null | |
function tip(vis) { | |
svg = getSVGNode(vis) | |
point = svg.createSVGPoint() | |
document.body.appendChild(node) | |
} | |
// Public - show the tooltip on the screen | |
// | |
// Returns a tip | |
tip.show = function() { | |
var args = Array.prototype.slice.call(arguments) | |
if(args[args.length - 1] instanceof SVGElement) target = args.pop() | |
var content = html.apply(this, args), | |
poffset = offset.apply(this, args), | |
dir = direction.apply(this, args), | |
nodel = d3.select(node), | |
i = directions.length, | |
coords, | |
scrollTop = document.documentElement.scrollTop || document.body.scrollTop, | |
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft | |
nodel.html(content) | |
.style({ opacity: 1, 'pointer-events': 'all' }) | |
while(i--) nodel.classed(directions[i], false) | |
coords = direction_callbacks.get(dir).apply(this) | |
nodel.classed(dir, true).style({ | |
top: (coords.top + poffset[0]) + scrollTop + 'px', | |
left: (coords.left + poffset[1]) + scrollLeft + 'px' | |
}) | |
return tip | |
} | |
// Public - hide the tooltip | |
// | |
// Returns a tip | |
tip.hide = function() { | |
nodel = d3.select(node) | |
nodel.style({ opacity: 0, 'pointer-events': 'none' }) | |
return tip | |
} | |
// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value. | |
// | |
// n - name of the attribute | |
// v - value of the attribute | |
// | |
// Returns tip or attribute value | |
tip.attr = function(n, v) { | |
if (arguments.length < 2 && typeof n === 'string') { | |
return d3.select(node).attr(n) | |
} else { | |
var args = Array.prototype.slice.call(arguments) | |
d3.selection.prototype.attr.apply(d3.select(node), args) | |
} | |
return tip | |
} | |
// Public: Proxy style calls to the d3 tip container. Sets or gets a style value. | |
// | |
// n - name of the property | |
// v - value of the property | |
// | |
// Returns tip or style property value | |
tip.style = function(n, v) { | |
if (arguments.length < 2 && typeof n === 'string') { | |
return d3.select(node).style(n) | |
} else { | |
var args = Array.prototype.slice.call(arguments) | |
d3.selection.prototype.style.apply(d3.select(node), args) | |
} | |
return tip | |
} | |
// Public: Set or get the direction of the tooltip | |
// | |
// v - One of n(north), s(south), e(east), or w(west), nw(northwest), | |
// sw(southwest), ne(northeast) or se(southeast) | |
// | |
// Returns tip or direction | |
tip.direction = function(v) { | |
if (!arguments.length) return direction | |
direction = v == null ? v : d3.functor(v) | |
return tip | |
} | |
// Public: Sets or gets the offset of the tip | |
// | |
// v - Array of [x, y] offset | |
// | |
// Returns offset or | |
tip.offset = function(v) { | |
if (!arguments.length) return offset | |
offset = v == null ? v : d3.functor(v) | |
return tip | |
} | |
// Public: sets or gets the html value of the tooltip | |
// | |
// v - String value of the tip | |
// | |
// Returns html value or tip | |
tip.html = function(v) { | |
if (!arguments.length) return html | |
html = v == null ? v : d3.functor(v) | |
return tip | |
} | |
function d3_tip_direction() { return 'n' } | |
function d3_tip_offset() { return [0, 0] } | |
function d3_tip_html() { return ' ' } | |
var direction_callbacks = d3.map({ | |
n: direction_n, | |
s: direction_s, | |
e: direction_e, | |
w: direction_w, | |
nw: direction_nw, | |
ne: direction_ne, | |
sw: direction_sw, | |
se: direction_se | |
}), | |
directions = direction_callbacks.keys() | |
function direction_n() { | |
var bbox = getScreenBBox() | |
return { | |
top: bbox.n.y - node.offsetHeight, | |
left: bbox.n.x - node.offsetWidth / 2 | |
} | |
} | |
function direction_s() { | |
var bbox = getScreenBBox() | |
return { | |
top: bbox.s.y, | |
left: bbox.s.x - node.offsetWidth / 2 | |
} | |
} | |
function direction_e() { | |
var bbox = getScreenBBox() | |
return { | |
top: bbox.e.y - node.offsetHeight / 2, | |
left: bbox.e.x | |
} | |
} | |
function direction_w() { | |
var bbox = getScreenBBox() | |
return { | |
top: bbox.w.y - node.offsetHeight / 2, | |
left: bbox.w.x - node.offsetWidth | |
} | |
} | |
function direction_nw() { | |
var bbox = getScreenBBox() | |
return { | |
top: bbox.nw.y - node.offsetHeight, | |
left: bbox.nw.x - node.offsetWidth | |
} | |
} | |
function direction_ne() { | |
var bbox = getScreenBBox() | |
return { | |
top: bbox.ne.y - node.offsetHeight, | |
left: bbox.ne.x | |
} | |
} | |
function direction_sw() { | |
var bbox = getScreenBBox() | |
return { | |
top: bbox.sw.y, | |
left: bbox.sw.x - node.offsetWidth | |
} | |
} | |
function direction_se() { | |
var bbox = getScreenBBox() | |
return { | |
top: bbox.se.y, | |
left: bbox.e.x | |
} | |
} | |
function initNode() { | |
var node = d3.select(document.createElement('div')) | |
node.style({ | |
position: 'absolute', | |
top: 0, | |
opacity: 0, | |
'pointer-events': 'none', | |
'box-sizing': 'border-box' | |
}) | |
return node.node() | |
} | |
function getSVGNode(el) { | |
el = el.node() | |
if(el.tagName.toLowerCase() == 'svg') | |
return el | |
return el.ownerSVGElement | |
} | |
// Private - gets the screen coordinates of a shape | |
// | |
// Given a shape on the screen, will return an SVGPoint for the directions | |
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest), | |
// sw(southwest). | |
// | |
// +-+-+ | |
// | | | |
// + + | |
// | | | |
// +-+-+ | |
// | |
// Returns an Object {n, s, e, w, nw, sw, ne, se} | |
function getScreenBBox() { | |
var targetel = target || d3.event.target, | |
bbox = {}, | |
matrix = targetel.getScreenCTM(), | |
tbbox = targetel.getBBox(), | |
width = tbbox.width, | |
height = tbbox.height, | |
x = tbbox.x, | |
y = tbbox.y | |
point.x = x | |
point.y = y | |
bbox.nw = point.matrixTransform(matrix) | |
point.x += width | |
bbox.ne = point.matrixTransform(matrix) | |
point.y += height | |
bbox.se = point.matrixTransform(matrix) | |
point.x -= width | |
bbox.sw = point.matrixTransform(matrix) | |
point.y -= height / 2 | |
bbox.w = point.matrixTransform(matrix) | |
point.x += width | |
bbox.e = point.matrixTransform(matrix) | |
point.x -= width / 2 | |
point.y -= height / 2 | |
bbox.n = point.matrixTransform(matrix) | |
point.y += height | |
bbox.s = point.matrixTransform(matrix) | |
return bbox | |
} | |
return tip | |
}; | |
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head><title>So glaubt Berin</title> | |
<meta charset="utf-8"> | |
<link rel='stylesheet' id='open-sans-css' href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=3.8.1' type='text/css' media='all' /> | |
<link rel='stylesheet' id='fixed-google-abel-css' href='http://fonts.googleapis.com/css?family=Abel&ver=3.8.1' type='text/css' media='all' /> | |
<link rel="stylesheet" href="tooltip-styles.css"> | |
<style> | |
.node { | |
stroke-width: 1.5px; | |
} | |
* { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; } | |
h2 { | |
font-family: 'Abel', 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; | |
font-weight: 400; | |
font-size: 36px; | |
letter-spacing: -1px; | |
position: absolute; | |
top: -35px; | |
left: 20px; | |
color: #777; | |
} | |
.invisible { display: none; } | |
#background { | |
position: absolute; | |
left: 10px; | |
top: 10px; | |
width: 100%; | |
text-align: left; | |
height: 355px; | |
background: transparent; | |
z-index: | |
} | |
.bu { | |
position: absolute; | |
bottom: 0px; | |
left: 20px; | |
color: rgb(85,85,85); | |
font-size: 18px; | |
max-width: 740px; | |
} | |
.slide { | |
} | |
.text { | |
position: absolute; | |
top: 181px; | |
left: 220px; | |
color: #808080; | |
font-size: 80%; | |
} | |
.text span { display: inline-block; width: 93px; vertical-align: top } | |
#info { position: absolute; | |
left: 770px; | |
bottom: 0px; | |
cursor: pointer; | |
color: #555; | |
font-size: 105%; | |
} | |
#legende { display: none; | |
position: absolute; | |
right: 13px; | |
bottom: 13px; | |
background: #ffffff; | |
border: 1px solid #eee; | |
padding: 4px; | |
font-size: 75%; | |
color: #b0b0b0; | |
text-align: left; | |
width: 300px; | |
} | |
#info:hover #legende { | |
display: block; | |
} | |
a:visited { | |
color: #070FE1; | |
} | |
a:link { | |
color: #070FE1; | |
text-decoration: none; | |
} | |
</style> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
<script src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="d3.tooltip.js"></script> | |
</head> | |
<body style="margin: 0px; padding: 0px; border: 0px;"> | |
<div id="tosmall" style="position: absolute; width: 100%; height: 1000px; background-color: #ffffff; z-Index:2; text-align: center; padding-top: 150px; padding-left: 80px; padding-right: 80px; display: none"> | |
Ihr Bildschirm ist leider zu schmal für diese Grafik. Sie braucht mindestens 1024 Pixel Bildschirmbreite, also zum Beispiel ein iPad im Querformat. | |
<a href="#" onClick="$('#tosmall').fadeOut()">Trotzdem anzeigen.</a> | |
</div> | |
<div id="curtain" style="position: absolute; width: 100%; height: 2000px; background-color: #ffffff; z-Index:1; text-align: center; padding-top: 150px;"> | |
<img src="spinner.gif" style="display: inline-block" /> | |
</div> | |
<div style="margin-left: auto; margin-right: auto; background-color: #fff; width: 100%; max-width: 898px;"> | |
<div style="max-width: 898px; display: inline-block; text-align: left;"> | |
<p style=" margin-left: 29px; font-size: 116%; color: #555; ">So glaubt Berlin: 16 Volontärinnen und Volontäre der Evangelischen Journalistenschule in Berlin zeichnen ein Bild vom religiösen Leben in der Großstadt – mit Datenjournalismus und Storytelling.</p> | |
</div><br/> | |
<div style="position: relative; height: 375px; width: 898px; display: inline-block; background: #ffffff; margin-top: 2px; position: relative"> | |
<div id="background"></div> | |
<div id="info">ⓘ | |
<div id="legende" style="z-Index:9999">Quelle: Zensus 2011 und Statistisches Jahrbuch 2013. Jeder <img src="punkte.jpg"> steht für <span class="pernode-num">4500</span> Berlinerinnen und Berliner, die sich zu ihrer Glaubsensrichtung geäußert haben. Kleinere Punkte symbolisieren kleinere Gruppen. Berlinerinnen und Berliner, die keine Anganben zu ihrem Glauben gemacht haben, sind in der Grafik nicht vertreten. <br /><br /><i>Inspiriert durch die Arbeit von <a href="http://bl.ocks.org/mbostock/1021953">Michael Bostock</a></i></div> | |
</div> | |
</div> | |
<p style="font-size: 116%; color: #555;text-align: center; "><i>Mit dem Mauszeiger können sie entdecken, für wie viele Menschen einer der Punkte in der Grafik steht. <br/> Bitte scrollen Sie weiter, um die Texte auf der Website zu lesen.</i></p> | |
<div id="frame" style="position: relative; top: -498px" ></div> | |
<div class="invisible"> | |
<div class="slide" id="rel"> | |
<h2>Was ist Eure Religion?</h2> | |
<div class="text table" style="text-align: center; left: 247px; top: 76px; "><span>Keine</span><span>Evangelisch</span><span>Katholisch</span><span>Muslime</span><span>Andere Christen</span><span>Juden<br/><br/><br/><br/>Andere</span> | |
</div> | |
<div class="bu">Die meisten Berliner sind Christen - aber die Zahl der Kirchenmitglieder sinkt. Auch deshalb werden Kirchengemeinden zusammengelegt. | |
<a href="http://soglaubtberlin.de/drei-kirchen-eine-gemeinde/" target="_parent"><i>Zum Artikel</i></a> | |
<a style="float: right" href="javascript:nextmode()"><i>Nächste Frage!</i></a> | |
</div> | |
</div> | |
<div class="slide" id="got"> | |
<h2>An wie viele Götter glaubt Ihr?</h2> | |
<div class="text table" style="text-align: center; left: 247px; top: 76px; "><span>Einen Gott</span><span></span><span>Viele Götter</span><span></span><span>Keinen Gott </span></div> | |
<div class="bu">Die Anhänger des Candomblé glauben an viele Götter. Seit 2007 haben sie auch einen Tempel in Kreuzberg. | |
<a href="http://soglaubtberlin.de/der-candomble/" target="_parent"><i>Zum Artikel</i></a> | |
<a style="float: right" href="javascript:nextmode()"><i>Nächste Frage!</i></a> | |
</div> | |
</div> | |
<div class="slide" id="lan"> | |
<h2>Seit wann gibt es Eure Religion in Berlin?</h2> | |
<div class="text table" style="text-align: center; left: 247px; top: 76px; "><span>Seit über 1000 Jahren</span><span></span><span>Seit über 400 Jahren</span><span></span><span>Seit über 50 Jahren</span></div> | |
<div class="bu">Schon seit über 400 Jahren leben Muslime in Berlin. Und doch verstecken sich die meisten der über hundert Berliner Moscheen in Hinterhöfen. | |
<a href="http://soglaubtberlin.de/moscheenbau-in-berlin/" target="_parent"><i>Zum Artikel</i></a> | |
<a style="float: right" href="javascript:nextmode()"><i>Nächste Frage!</i></a> | |
</div> | |
</div> | |
<div class="slide" id="wac"> | |
<h2>Hat Euer Glauben Anhänger gewonnen seit 1989?</h2> | |
<div class="text table" style="text-align: center; left: 247px; top: 76px; "><span>Nein, wir sind geschrumpft.</span><span></span><span></span><span></span><span>Ja, wir sind mehr geworden.</span></div> | |
<div class="bu">Die Zahl der Gläubigen in Berlin sinkt. Ganz vorne mit dabei: Hellersdorf. Hier gibt es so wenig Christen wie sonst kaum in Berlin. | |
<a href="http://soglaubtberlin.de/zwischen-lauter-atheisten/" target="_parent"><i>Zum Artikel</i></a> | |
<a style="float: right" href="javascript:nextmode()"><i>Nächste Frage!</i></a> | |
</div> | |
</div> | |
</div> | |
</div> | |
<br/> | |
<script> | |
var religionen= [ { id: 'a', n : 'Atheistisch', l: 'Menschen, die sich keiner Glaubensgemeinschaft zugehörig fühlen', c : 763530, co: "#aec7e8" }, | |
{ id: 'e', n : 'Evangelisch', l: 'evangelische Christen' , c : 705510, co: "#ff7f0e" }, | |
{ id: 'k', n : 'Katholisch', l: 'Katholiken' , c : 301471, co: "#ffbb78" }, | |
{ id: 'm', n : 'Muslimisch', l: 'Muslime' , c : 249000, co: "#2ca02c" }, | |
{ id: 'c', n : 'Andere Christen', l: 'Christen anderer Konfessionen', c : 204650, co: "#98df8a" }, | |
{ id: 'j', n : 'Juden', l: 'Juden' , c : 10214, co: "#d62728" }, | |
{ id: 'l', n : 'Aleviten', l: 'Aleviten' , c : 2000, co: "#ff9896" }, | |
{ id: 'b', n : 'Buddhisten', l: 'Buddhisten' , c : 774, co: "#9467bd" }, | |
{ id: 's', n : 'Sikh', l: 'Sikhs' , c : 300, co: "#c5b0d5" }, | |
{ id: 'i', n : 'Baha'i', l: 'Baha'i-Anhänger' , c : 281, co: "#8c564b" }, | |
{ id: 'h', n : 'Hindu', l: 'Hindus' , c : 200, co: "#c49c94" }, | |
{ id: 'u', n : 'Sufi', l: 'Sufi' , c : 90, co: "#e377c2" }, | |
{ id: 'n', n : 'Candomblé', l: 'Candomblé-Anhänger' , c : 70, co: "#1f77b4" }, | |
] | |
var berlin=[{ x:136.5, y:134, h:-2, w: -48}, | |
{ x:159.5, y:149, h:-15, w: -23}, | |
{ x:176.5, y:171, h:-22, w: -17}, | |
{ x:191.5, y:220, h:-49, w: -15}, | |
{ x:151.5, y:216, h:4, w: 40}, | |
{ x:108.5, y:215, h:1, w: 43}, | |
{ x:59.5, y:215, h:0, w: 49}, | |
{ x:51.5, y:194, h:21, w: 8}, | |
{ x:77.5, y:165, h:29, w: -26}, | |
{ x:136.5, y:186, h:-21, w: -59}, | |
] | |
var width = 898, | |
height = 310; | |
var fill = d3.scale.category10(); | |
var nodes = []; | |
var nmodes = { 'rel' : { 'foci' : { 'a' : [ | |
{ x:304, y:138, h:126, w: 0} | |
], | |
'e' : [ | |
{ x:397, y:138, h:130, w: 0} | |
], | |
'k' : [ | |
{ x:490, y:138, h:90, w: 0} | |
], | |
'm' : [ | |
{ x:583, y:138, h:94, w: 0} | |
], | |
'c' : [ | |
{ x:676, y:148, h:90, w: 0} | |
], | |
'j' : [ | |
{ x:769, y:138, h:1, w: 0} | |
], | |
'l' : [ | |
{ x:769, y:208, h:1, w: 0} | |
], | |
'b' : [ | |
{ x:769, y:208, h:1, w: 0} | |
], | |
's' : [ | |
{ x:769, y:208, h:1, w: 0} | |
], | |
'i' : [ | |
{ x:769, y:208, h:1, w: 0} | |
], | |
'h' : [ | |
{ x:769, y:208, h:1, w: 0} | |
], | |
'u' : [ | |
{ x:769, y:208, h:1, w: 0} | |
], | |
'n' : [ | |
{ x:769, y:208, h:1, w: 0} | |
], | |
} , | |
translate : function (a) { return a } | |
}, | |
'got' : { 'foci' : { | |
'ei' : [ | |
{ x:304, y:138, h:126, w: 0} | |
], | |
'vi' : [ | |
{ x:490, y:138, h:90, w: 0} | |
], | |
'an' : [ | |
{ x:676, y:148, h:90, w: 0} | |
] | |
} , | |
translate : function (a) { | |
return({ 'a' : 'an', | |
'e' : 'ei', | |
'k' : 'ei', | |
'm' : 'ei', | |
'c' : 'ei', | |
'j' : 'ei', | |
'l' : 'ei', /* Aleviten - monotheistisch? */ | |
'b' : 'an', | |
's' : 'an', /* Sikh? */ | |
'i' : 'an', /* Bahai? */ | |
'h' : 'vi', | |
'u' : 'ei', /* Sufi? */ | |
'n' : 'vi' | |
}[a]); | |
} | |
}, | |
'lan' : { 'foci' : { '1000' : [ | |
{ x:304, y:138, h:126, w: 0} | |
], | |
'400' : [ | |
{ x:490, y:158, h:90, w: 0} | |
], | |
'50' : [ | |
{ x:676, y:148, h:90, w: 0} | |
], | |
} , | |
translate : function (a) { | |
return({ 'a' : '50', | |
'e' : '400', | |
'k' : '1000', | |
'm' : '400', | |
'c' : '50', | |
'j' : '1000', | |
'l' : '400', /* Aleviten - monotheistisch? */ | |
'b' : '400', | |
's' : '400', /* Sikh? */ | |
'i' : '50', /* Bahai? */ | |
'h' : '400', | |
'u' : '400', /* Sufi? */ | |
'n' : '50' | |
}[a]); | |
} | |
}, | |
'wac' : { 'foci' : { 'plus' : [ | |
{ x:586, y:98, h:126, w: 0}, | |
{ x:596, y:98, h:126, w: 0} | |
], | |
'minus' : [ | |
{ x:384, y:98, h:126, w: 0} | |
] | |
} , | |
translate : function (a) { | |
return({ 'a' : 'plus', | |
'e' : 'minus', | |
'k' : 'minus', | |
'm' : 'plus', | |
'c' : 'plus', /* Mehr andere Christen? */ | |
'j' : 'plus', | |
'l' : 'plus', /* Aleviten - monotheistisch? */ | |
'b' : 'plus', /* Mehr Buddhisten? */ | |
's' : 'plus', /* Sikh? */ | |
'i' : 'plus', /* Bahai? */ | |
'h' : 'plus', | |
'u' : 'plus', /* Sufi? */ | |
'n' : 'plus' | |
}[a]); | |
} | |
}, | |
'ber' : { 'foci' : { 'berlin' : berlin }, | |
translate : function (a) { | |
return('berlin') | |
} | |
}, | |
'lin' : { 'foci' : { 'line' : [ { x: 200, y: 150, w : 500, h: 0}] }, | |
translate : function (a) { | |
return('line') | |
} | |
} | |
} | |
preload=[ | |
{ "domid" : "#svg-berlin", "path" : "berlin.svg", "transform" : "translate(-40 -60) scale(.5)" } | |
] | |
global = { mode : "rel" }, | |
/* prepare interpolators for areas */ | |
_.each(nmodes,function(value,key) { | |
interp={}; | |
_.each(value.foci,function(mv,mk) { | |
var ips=[]; | |
_.each(mv,function(e) { | |
ips.push(d3.interpolate([e.x,e.y],[e.x+e.w,e.y+e.h])); | |
}); | |
interp[mk]=ips; | |
}); | |
value['interp']=interp; | |
}); | |
last={ x: 0, y: 0 } | |
var svg = d3.select("div#frame").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.on("mouseup", function() { | |
var a=d3.mouse(this); | |
d={ x: a[0], y: a[1]}; | |
console.log("{ x:"+Math.floor(d.x)+", y: "+Math.floor(d.y)+ | |
", w:"+Math.floor(last.x-d.x)+", h:"+Math.floor(last.y-d.y)+ "}"); | |
last.x=d.x; | |
last.y=d.y; | |
}); | |
var tooltip = d3.tip().attr('class', 'd3-tip').html(function(d) { | |
var f="Dieser Kreis steht für "+d.p+ " "+d.n+ "."; | |
if (d.p<d.c) { | |
f=f+"<br/> "+"Insgesamt gibt es in Berlin laut Statistik ca. "+(d.c+"").replace(/(...)$/,".$1")+" "+d.n+"." | |
} else { | |
f=f+" So viele gibt es laut Statistik ungefähr in Berlin."; | |
} | |
return(f); | |
}); | |
svg.call(tooltip); | |
var force = d3.layout.force() | |
.nodes(nodes) | |
.links([]) | |
.gravity(0) | |
.charge(-10) | |
.chargeDistance(10) | |
.size([width, height]) | |
.on("tick", tick); | |
var node = svg.selectAll("circle"); | |
function tick(e) { | |
var k = .1 * e.alpha; | |
// Push nodes toward their designated focus. | |
nodes.forEach(function(o, i) { | |
/* var tm=nmodes[global.mode]; | |
var ta=tm.translate(r.id); | |
pair=nmodes[global.mode].interpolator[global.mode][o.id[global.mode].i](o.id[global.mode].r); | |
*/ | |
pair=o.ips[global.mode](o.rand); | |
o.y += (pair[1] - o.y) * k; | |
o.x += (pair[0] - o.x) * k; | |
}); | |
node | |
.attr("cx", function(d) { return d.x; }) | |
.attr("cy", function(d) { return d.y; }); | |
} | |
var maxnodes=500; | |
var maxra=4; | |
var pernode=(function() { | |
var s=0; | |
_.each(religionen, function(a) { | |
s+=a.c; | |
}); | |
return (Math.floor(((s+0.0)/maxnodes)+0.5)); | |
})(); | |
_.each(religionen, function(r) { | |
var done=0; | |
while ((r.c-done)>0) { | |
var tv=pernode; | |
if ((r.c-done)<pernode) { | |
tv=r.c-done; | |
} | |
ra=Math.max(1,(tv/pernode)*maxra); | |
var n={ c : r.c, r : r.id, n: r.l, p: tv, ips : {}, ra: ra, rand : Math.random(), col: r.co }; | |
_.each(nmodes,function(mf,key) { | |
var ta=mf.translate(r.id); | |
/* console.log(key+"ta: "+r.id+" -> "+ta); */ | |
var tts=mf.interp[ta]; | |
if (typeof tts != "undefined") { | |
n.ips[key]=tts[Math.floor(tts.length*Math.random())]; | |
} else { | |
console.log( "Not found: mode "+key+" area "+ta); | |
} | |
}); | |
done += pernode; | |
/* console.log("Pushed : "+JSON.stringify(n)); */ | |
nodes.push(n); | |
} | |
}); | |
$(".pernode-num").html(Math.floor(pernode)); | |
node = node.data(nodes); | |
node.enter().append("circle") | |
.attr("class", "node") | |
.attr("cx", function(d) { return d.x; }) | |
.attr("cy", function(d) { return d.y; }) | |
.attr("r", function(d) { return d.ra }) | |
.style("fill", function(d) { return d.col; }) | |
.style("stroke", function(d) { return d3.rgb(d.col).darker(1).toString(); }) | |
/* .call(force.drag) */ | |
.on('mouseover', tooltip.show) | |
.on('mouseout', tooltip.hide); | |
function themode(m,d) { | |
if (_.keys(nmodes).indexOf(m)>-1 ) { | |
if (d) { | |
_.delay(function() { | |
global.mode=m; | |
force.start(); | |
},d); | |
} else { | |
global.mode=m; | |
force.start(); | |
} | |
var $s=$("#"+m); | |
if ($s) { | |
$('#background').html($s.html()); | |
} | |
} | |
} | |
_.each(preload,function(value) { | |
d3.xml(value.path,"image/svg+xml", function(xml) { | |
if (xml != null) { | |
$($("svg")[0]).prepend(xml.documentElement); | |
d3.select(value.domid).attr("transform",value.transform); | |
_.delay(function() { $("#curtain").fadeOut(); }, 100); | |
} | |
}) | |
}); | |
var modes=['rel','got','lan','wac']; | |
function nextmode() { | |
var i=modes.indexOf(global.mode); | |
i=i+1; | |
if (i==modes.length) { | |
i=0; | |
} | |
themode("ber"); | |
themode(modes[i],1000); | |
} | |
$("svg").on("click",function(e) { | |
nextmode(); | |
e.preventDefault(); | |
}); | |
var pos={ x:0, y: 0, lx: 0, ly :0, c: 0 } | |
$("body").on("keydown",function(event) { | |
pos.c=pos.c+1; | |
if ((event.which==16)) { /* && ((pos.c % 2)==1) && (pos.c>1)) { */ | |
$("#display").append("<div>{ x:"+pos.x+", y:"+pos.y+", h:"+(pos.ly-pos.y)+", w: "+(pos.lx-pos.x)+"},</div>"); | |
pos.lx=pos.x; | |
pos.ly=pos.y; | |
} | |
}); | |
$("#frame").on("mousemove", function(e){ | |
var parentOffset = $(this).offset(); | |
var relX = e.pageX - parentOffset.left; | |
var relY = e.pageY - parentOffset.top; | |
pos.x=relX; pos.y=relY; | |
}); | |
themode("ber"); | |
_.delay(function() { themode("rel"); },2000); | |
$(document).ready(function() { | |
if ($(window).width()<840) { | |
$("#tosmall").css({ width: $("window").width()+"px" }).fadeIn(); | |
} | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.d3-tip { | |
line-height: 1; | |
font-weight: bold; | |
padding: 12px; | |
background: rgba(255, 255, 255, 0.7); | |
color: #555; | |
border-radius: 2px; | |
pointer-events: none; | |
max-width: 200px; | |
border: 1px solid #555; | |
} | |
/* Creates a small triangle extender for the tooltip */ | |
.d3-tip:after { | |
box-sizing: border-box; | |
display: inline; | |
font-size: 10px; | |
width: 100%; | |
line-height: 1; | |
color: rgba(0, 0, 0, 0.8); | |
position: absolute; | |
pointer-events: none; | |
} | |
/* Northward tooltips */ | |
.d3-tip.n:after { | |
content: "\25BC"; | |
margin: -1px 0 0 0; | |
top: 100%; | |
left: 0; | |
text-align: center; | |
} | |
/* Eastward tooltips */ | |
.d3-tip.e:after { | |
content: "\25C0"; | |
margin: -4px 0 0 0; | |
top: 50%; | |
left: -8px; | |
} | |
/* Southward tooltips */ | |
.d3-tip.s:after { | |
content: "\25B2"; | |
margin: 0 0 1px 0; | |
top: -8px; | |
left: 0; | |
text-align: center; | |
} | |
/* Westward tooltips */ | |
.d3-tip.w:after { | |
content: "\25B6"; | |
margin: -4px 0 0 -1px; | |
top: 50%; | |
left: 100%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment