Skip to content

Instantly share code, notes, and snippets.

@andreaangeli

andreaangeli/README.md

Created May 4, 2016 10:02
Show Gist options
  • Save andreaangeli/8e5bd54fffed0b26d2c0ed244920c8d5 to your computer and use it in GitHub Desktop.
Save andreaangeli/8e5bd54fffed0b26d2c0ed244920c8d5 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Chord
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="../common/delimited-favicon-v4.ico">
<!--Famiglia Font -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<!-- Modernizr -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<!-- respond.js per IE8 -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<style>
#tooltip {
color: white;
opacity: .9;
background: #333;
padding: 5px;
border: 1px solid lightgrey;
border-radius: 5px;
position: absolute;
z-index: 10;
visibility: hidden;
white-space: nowrap;
pointer-events: none;
}
#circle circle {
fill: none;
pointer-events: all;
}
path.group {
fill-opacity: .8;
}
path.chord {
fill-opacity: .8;
stroke: #000;
stroke-width: .25px;
}
#circle:hover path.fade {
display: none;
}
h2, p {
font-family: Montserrat;
}
body {
padding-top: 2.5em;
background-color: #f0f0f0;
}
.container {
background: #ffffff;
}
#titolo {
padding: 1.5em;
text-align: center;
}
.text {
padding: 2.5em;
}
.p {
text-align: center;
padding-top: 120px;
}
.p a {
text-decoration: underline;
color: blue;
}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-45101494-1']);
_gaq.push(['_setDomainName', 'delimited.io']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="loader_container"></div>
<div class="container">
<div class="row" id="titolo">
<h2>Title</h2>
<hr>
</div>
<div class="row">
<div class="col-xs-12">
<div id="chartContainer">
<div id="tooltip"></div>
<!--<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<script src="js/d3.min.js" charset="utf-8"></script>
<script src="js/underscore.js"></script>
<script src="js/mapper.js"></script>
<script>
//*******************************************************************
// CREATE MATRIX AND MAP
//*******************************************************************
d3.csv('trade-a.csv', function (error, data) {
var mpr = chordMpr(data);
mpr
.addValuesToMap('seller')
.addValuesToMap('buyer')
.setFilter(function (row, a, b) {
return (row.seller === a.name && row.buyer === b.name) ||
(row.seller === b.name && row.buyer === a.name)
})
.setAccessor(function (recs, a, b) {
if (!recs[0]) return 0;
return recs[0].seller === a.name ? +recs[0].flow1 : +recs[0].flow2;
});
drawChords(mpr.getMatrix(), mpr.getMap());
});
//*******************************************************************
// DRAW THE CHORD DIAGRAM
//*******************************************************************
var inserisci = d3.select("#chartContainer").append()
function drawChords (matrix, mmap) {
var w = 980, h = 800, r1 = h / 2, r0 = r1 - 110;
//Qui i settaggi della scala dei colori vedere anche https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors
var fill = d3.scale.ordinal()
.range(['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928']);
var chord = d3.layout.chord()
.padding(.02)
.sortSubgroups(d3.descending)
.sortChords(d3.descending);
var arc = d3.svg.arc()
.innerRadius(r0)
.outerRadius(r0 + 20);
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("id", "circle")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
svg.append("circle")
.attr("r", r0 + 20);
var rdr = chordRdr(matrix, mmap);
chord.matrix(matrix);
var g = svg.selectAll("g.group")
.data(chord.groups())
.enter().append("svg:g")
.attr("class", "group")
.on("mouseover", mouseover)
.on("mouseout", function (d) { d3.select("#tooltip").style("visibility", "hidden") });
g.append("svg:path")
.style("stroke", "black")
.style("fill", function(d) { return fill(rdr(d).gname); })
.attr("d", arc);
g.append("svg:text")
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.style("font-family", "helvetica, arial, sans-serif")
.style("font-size", "9px")
.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(" + (r0 + 26) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : "");
})
.text(function(d) { return rdr(d).gname; });
var chordPaths = svg.selectAll("path.chord")
.data(chord.chords())
.enter().append("svg:path")
.attr("class", "chord")
.style("stroke", function(d) { return d3.rgb(fill(rdr(d).sname)).darker(); })
.style("fill", function(d) { return fill(rdr(d).sname); })
.attr("d", d3.svg.chord().radius(r0))
.on("mouseover", function (d) {
d3.select("#tooltip")
.style("visibility", "visible")
.html(chordTip(rdr(d)))
.style("top", function () { return (d3.event.pageY - 170)+"px"})
.style("left", function () { return (d3.event.pageX - 100)+"px";})
})
.on("mouseout", function (d) { d3.select("#tooltip").style("visibility", "hidden") });
//Settaggi della tooltip del gruppo
function chordTip (d) {
var p = d3.format(".1%"), q = d3.format(",.1f") //',.2f' per due valori dopo la virgola
return "Cessioni:<br/>"
+ d.sname + " &rarr; " + d.tname
+ ": " + q(d.svalue) + " Mil €<br/>"
+ p(d.svalue/d.stotal) + " del totale cessioni " + d.sname + " (" + q(d.stotal) + " Mil €)<br/>"
+ p(d.svalue/d.mtotal) + " del valore delle cessioni totali (" + q(d.mtotal) + " Mil €)<br/>"
+ "<br/>"
+ d.tname + " &rarr; " + d.sname
+ ": " + q(d.tvalue) + " Mil €<br/>"
+ p(d.tvalue/d.ttotal) + " del totale cessioni " + d.tname + " (" + q(d.ttotal) + " Mil €)<br/>"
+ p(d.tvalue/d.mtotal) + " del valore delle cessioni totali (" + q(d.mtotal) + " Mil €)";
}
//Settaggi della tooltip del gruppo
function groupTip (d) {
var p = d3.format(".1%"), q = d3.format(",.1f")
return d.gname + "<br/>"
+ "Valore cessioni: " + q(d.gvalue) + " Mil € <br/>"
+ p(d.gvalue/d.mtotal) + " del valore delle cessioni totali (" + q(d.mtotal) + " Mil €)"
}
function mouseover(d, i) {
d3.select("#tooltip")
.style("visibility", "visible")
.html(groupTip(rdr(d)))
.style("top", function () { return (d3.event.pageY - 80)+"px"})
.style("left", function () { return (d3.event.pageX - 130)+"px";})
chordPaths.classed("fade", function(p) {
return p.source.index != i
&& p.target.index != i;
});
}
}
</script>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin odio dui, aliquet ut bibendum eget, condimentum pharetra orci. Vivamus aliquet tortor vitae congue faucibus. Vivamus vitae enim vitae est dictum tincidunt quis eget leo. Cras nibh ipsum, fringilla eu bibendum sit amet, consectetur nec leo. Cras at consequat lacus, vel iaculis massa. Integer sed nisi leo. Vivamus a risus aliquam sem ultricies eleifend. Fusce tempor suscipit nulla ut feugiat. Nullam ac justo finibus, commodo urna vel, placerat metus. Duis vel diam ac libero maximus faucibus eget eu enim. Nam nec aliquet erat. Aenean elit nisl, fringilla et urna sit amet, iaculis tincidunt elit. Aenean mollis tristique nisi sit amet consequat. Maecenas aliquet urna sit amet elit eleifend, vel dictum urna dictum. Fusce non libero ac nisi tincidunt eleifend. Suspendisse non est eu purus rhoncus interdum eget nec sem.</p>
<p>Quisque facilisis eget eros at lobortis. Ut pellentesque blandit condimentum. Sed rutrum nisl massa, in vehicula sem cursus vitae. Morbi quis arcu ut urna cursus consectetur a at turpis. Vivamus volutpat enim nibh. Nunc magna lorem, elementum ut metus bibendum, fermentum varius sapien. Quisque tincidunt lacus eget ligula vestibulum molestie. Vivamus semper, diam nec aliquet maximus, nisi nibh condimentum ante, vitae varius purus mi eget tellus. Vestibulum suscipit tellus sed purus accumsan feugiat. Etiam ac ipsum ullamcorper, laoreet nunc sed, vestibulum turpis. Praesent fermentum mi nibh, vel congue tortor suscipit sed. Maecenas et mi augue. Morbi ac pellentesque turpis. Cras luctus enim quis ante consequat, vitae mattis felis suscipit. Maecenas scelerisque finibus pharetra.</p>
<p>Proin et convallis sem. Sed molestie sapien sit amet porttitor semper. Sed convallis pretium auctor. Praesent non purus ac dolor posuere imperdiet eu a turpis. Maecenas feugiat lacus in imperdiet volutpat. Duis vitae pulvinar purus. Nulla non justo vitae neque pretium pellentesque quis a leo. Maecenas consectetur egestas congue. Etiam et maximus lectus. Phasellus lacinia, diam ac venenatis gravida, eros dui semper felis, vel pulvinar dui turpis vel nibh. Aliquam vehicula ornare magna a sagittis. Etiam vestibulum massa risus, at iaculis enim fermentum egestas.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam vel elit metus. Nullam at mi ut nisi finibus aliquam a at felis. Integer lobortis erat et tortor gravida, eu posuere quam feugiat. Donec vel lacus in nulla auctor hendrerit vel sed erat. Sed auctor mauris sapien, non vehicula ligula iaculis at. Sed non enim non tellus rhoncus tincidunt. Sed pretium, nibh sit amet sagittis vestibulum, enim orci malesuada orci, vel finibus ante dolor sit amet enim. Nulla facilisi. Fusce tincidunt dui at nisi faucibus feugiat. Aenean hendrerit sapien tortor, vitae pulvinar tortor gravida suscipit. Duis imperdiet, augue eget imperdiet hendrerit, ipsum orci luctus nisi, at tempus augue eros ut dolor. Etiam faucibus ligula tellus, consectetur rhoncus leo dapibus nec. Sed et tortor ut ipsum vulputate feugiat et vitae tellus. Curabitur quis metus vitae lorem aliquet tristique. Praesent rutrum nulla ac nisl lacinia, id tristique nulla ultrices.</p>
<p>Aliquam suscipit eros eget magna dapibus mattis. Nunc ac felis massa. Vestibulum sed molestie nisl, vel posuere nisl. Vivamus pellentesque massa nec consequat commodo. Phasellus ac nulla faucibus tellus fringilla vehicula. Nam finibus metus eros, vel vehicula nisi placerat a. Aliquam erat volutpat. Phasellus elit libero, finibus nec enim sit amet, lacinia consectetur tortor. Sed accumsan eleifend ipsum, sit amet aliquam ex vulputate tempor. Duis iaculis metus urna, ut condimentum dui tempor eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum vulputate dolor non porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment