Skip to content

Instantly share code, notes, and snippets.

@SebastianWeide

SebastianWeide/index.html

Created December 15, 2017 09:49
Show Gist options
  • Save SebastianWeide/6cb8e26a7589f7966fa69639478e5eee to your computer and use it in GitHub Desktop.
Save SebastianWeide/6cb8e26a7589f7966fa69639478e5eee to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE HTML PUBLIC>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<style type="text/css">
path {
fill: none;
stroke: white;
stroke-width: 0.5px;
}
</style>
<title></title>
<svg width="200" height="200">
</svg>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var margin = {left:90, top:90, right:90, bottom:90},
width = 1000 - margin.left - margin.right, // more flexibility: Math.min(window.innerWidth, 1000)
height = 1000 - margin.top - margin.bottom, // same: Math.min(window.innerWidth, 1000)
innerRadius = Math.min(width, height) * .39,
outerRadius = innerRadius * 1.1;
var schriftGroesse = "16px";
var schriftTyp = "sans-serif";
opacityDefault = 0.8;
var names = ["Austria", "Belgium", "Canada", "Czech Republic", "Denmark", "Finland", "France", "Germany", "Israel", "Italy", "Netherlands", "Norway", "Poland", "Slovenia", "Spain", "Sweden", "Switzerland", "Turkey", "United Kingdom"];
var colors = ["#d32f2f", "#c2185b", "#7b1fa2", "#512da8", "#303f9f", "#1976d2","#0288d1","#0097a7","#00796b","#388e3c","#689f38","#afb42b","#fbc02d","#ffa000","#f57c00","#e64a19","#5d4037","#616161","#455a64"];
var matrix = [
[0,0,3.0,1.0,0,0,1.0,9.0,0,1.0,2.0,2.0,3.0,0,1.0,2.0,1.0,0,1.0],
[0,0,5.0,0,1.0,1.0,3.0,6.0,0,2.0,9.0,1.0,0,0,4.0,4.0,3.0,1.0,1.0],
[3.0,5.0,0,0,1.0,4.0,4.0,5.0,3.0,1.0,1.0,2.0,1.0,0,5.0,3.0,2.0,0,3.0],
[1.0,0,0,0,1.0,0,0,3.0,0,1.0,0,0,1.0,0,0,0,1.0,1.0,1.0],
[0,1.0,1.0,1.0,0,1.0,1.0,8.0,1.0,1.0,3.0,1.0,0,0,1.0,7.0,3.0,0,5.0],
[0,1.0,4.0,0,1.0,0,2.0,1.0,1.0,0,1.0,3.0,1.0,0,5.0,8.0,1.0,0,1.0],
[1.0,3.0,4.0,0,1.0,2.0,0,4.0,0,2.0,5.0,2.0,0,0,2.0,2.0,3.0,0,19.0],
[9.0,6.0,5.0,3.0,8.0,1.0,4.0,0,4.0,14.0,19.0,0,3.0,0,6.0,10.0,10.0,5.0,1.0],
[0,0,3.0,0,1.0,1.0,0,4.0,0,1.0,1.0,0,0,0,0,0,0,0,1.0],
[1.0,2.0,1.0,1.0,1.0,0,2.0,14.0,1.0,0,7.0,0,2.0,0,3.0,0,5.0,0,1.0],
[2.0,9.0,1.0,0,3.0,1.0,5.0,19.0,1.0,7.0,0,1.0,0,0,4.0,5.0,4.0,2.0,4.0],
[2.0,1.0,2.0,0,1.0,3.0,2.0,0,0,0,1.0,0,1.0,0,0,3.0,1.0,0,5.0],
[3.0,0,1.0,1.0,0,1.0,0,3.0,0,2.0,0,1.0,0,0,0,2.0,0,0,1.0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1.0,4.0,5.0,0,1.0,5.0,2.0,6.0,0,3.0,4.0,0,0,0,0,4.0,3.0,0,2.0],
[2.0,4.0,3.0,0,7.0,8.0,2.0,10.0,0,0,5.0,3.0,2.0,0,4.0,0,0,0,1.0],
[1.0,3.0,2.0,1.0,3.0,1.0,3.0,10.0,0,5.0,4.0,1.0,0,0,3.0,0,0,0,3.0],
[0,1.0,0,1.0,0,0,0,5.0,0,0,2.0,0,0,0,0,0,0,0,3.0],
[1.0,1.0,3.0,1.0,5.0,1.0,19.0,1.0,1.0,1.0,4.0,5.0,1.0,0,2.0,1.0,3.0,3.0,0]
];
////////////////////////////////////////////////////////////
/////////// Create scale and layout functions //////////////
////////////////////////////////////////////////////////////
var colors = d3.scaleOrdinal()
.domain(d3.range(names.length))
.range(colors);
var chord = d3.chord()
.padAngle(.2)
.sortChords(d3.descending)
var arc = d3.arc()
.innerRadius(innerRadius*1.01)
.outerRadius(outerRadius);
var path = d3.ribbon()
.radius(innerRadius);
////////////////////////////////////////////////////////////
////////////////////// Create SVG //////////////////////////
////////////////////////////////////////////////////////////
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")")
.datum(chord(matrix));
////////////////////////////////////////////////////////////
////////////////// Draw outer Arcs /////////////////////////
////////////////////////////////////////////////////////////
var outerArcs = svg.selectAll("g.group")
.data(function(chords) { return chords.groups; })
.enter().append("g")
.attr("class", "group")
.on("mouseover", fade(.1))
.on("mouseout", fade(opacityDefault))
// text popups
.on("click", mouseoverChord)
.on("mouseout", mouseoutChord);
outerArcs.append("path")
.style("fill", function(d) { return colors(d.index); })
.attr("id", function(d, i) { return "group" + d.index; })
.attr("d", arc);
////////////////////////////////////////////////////////////
////////////////////// Append names ////////////////////////
////////////////////////////////////////////////////////////
//Append the label names on the outside
outerArcs.append("text")
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.attr("class", "titles")
.attr("font-family", schriftTyp)
.attr("font-size", schriftGroesse)
.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + (outerRadius + 5) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : "");
})
.text(function(d,i) { return names[i]; });
////////////////////////////////////////////////////////////
////////////////// Draw inner chords ///////////////////////
////////////////////////////////////////////////////////////
svg.selectAll("path.chord")
.data(function(chords) { return chords; })
.enter().append("path")
.attr("class", "chord")
.style("fill", function(d) { return colors(d.source.index); })
.style("opacity", opacityDefault)
.attr("d", path);
////////////////////////////////////////////////////////////
////////////////// Extra Functions /////////////////////////
////////////////////////////////////////////////////////////
function popup() {
return function(d,i) {
console.log("love");
};
}//popup
//Returns an event handler for fading a given chord group.
function fade(opacity) {
return function(d,i) {
svg.selectAll("path.chord")
.filter(function(d) { return d.source.index != i && d.target.index != i; })
.transition()
.style("opacity", opacity);
};
}//fade
//Highlight hovered over chord
function mouseoverChord(d,i) {
//Decrease opacity to all
svg.selectAll("path.chord")
.transition()
.style("opacity", 0.1);
//Show hovered over chord with full opacity
d3.select(this)
.transition()
.style("opacity", 1);
//Define and show the tooltip over the mouse location
$(this).popover({
//placement: 'auto top',
title: 'test',
placement: 'right',
container: 'body',
animation: false,
offset: "20px -100px",
followMouse: true,
trigger: 'click',
html : true,
content: function() {
return "<p style='font-size: 11px; text-align: center;'><span style='font-weight:900'>" +
"</span> text <span style='font-weight:900'>" +
"</span> folgt hier <span style='font-weight:900'>" + "</span> movies </p>"; }
});
$(this).popover('show');
}
//Bring all chords back to default opacity
function mouseoutChord(d) {
//Hide the tooltip
$('.popover').each(function() {
$(this).remove();
})
//Set opacity back to default for all
svg.selectAll("path.chord")
.transition()
.style("opacity", opacityDefault);
} //function mouseoutChord
}//]]>
</script>
</head>
<body>
<div id = "chart"></div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "None"
}], "*")
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment