Skip to content

Instantly share code, notes, and snippets.

@stormy

stormy/index.html

Created October 27, 2011 22:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stormy/1321150 to your computer and use it in GitHub Desktop.
Save stormy/1321150 to your computer and use it in GitHub Desktop.
Download ZIP
Quora Circle
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Introduction to D3</title>
<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.time.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
<!-- body {-->
<!--padding: 50px;-->
<!--}-->
<!-- svg {-->
<!--border: 1px solid black;-->
<!--}-->
text {
font: 9px sans-serif;
fill: black;
}
</style>
</head>
<body>
<div id="viz"></div>
<div id="summary">
</div>
<div id="list"><ul id="voter_list"></ul></div>
</body>
<script type="text/javascript">
/* Usefull function */
var randomColor = function() {
return '#' + (Math.random().toString(16) + '000000').substr(2, 6);
}
var findUserIndex = function (name1, list) {
for( var i = 0; i < list.length; i++) {
if (list[i]["name"] === name1) { return i;}
}
return -1;
};
users = [{name: "Stormy-Shippy", photo:"http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-3851-200-8O8gZ10cM9SMbcadLsyBcRMlQ9Nz6leo.jpeg", data: [["Venkatesh-Rao","1"], ["Yishan-Wong","1"], ["Marc-Bodnick","1"]]},
{name: "Venkatesh-Rao", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-35755-200-2wUWoGb0gceyQJcoX8E2EtkhEt1Bl4Ao.jpeg", data: [["Yishan-Wong","1"]]},
{name: "Fahd-Butt", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-2987-200-rPMvYelXnvw4qT5NniKMCBoqzmhhdO4S.jpeg", data: [["John-Clover","1"],["Jae-Won-Joh","1"]]},
{name: "Adam-DAngelo", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-335-200-DCMEEMMEQkzRnMSlyLSwkWLK8XTPqTsq.jpeg" , data: [["Marc-Bodnick","1"]]},
{name: "Annie-Lausier", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-4678-200-5nMTcBM6WF96Me4vGT4c1SRAuSd0oWj5.jpeg", data: [["Marc-Bodnick","1"]]},
{name: "Bradley-Voytek", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-5343-200-yczpNTbfnoqiJqhLH0C9BYabB4Levs6E.jpeg", data: [["Marc-Bodnick","1"]]},
{name: "Charlie-Cheever", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-337-200-8uOsqbUCKZD88BcpUtZYIgOsv8Ip97j5.jpeg", data: [["Marc-Bodnick","1"]]},
{name: "Shannon-Larson", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-9945-200-1HHSOT4ptcMuLG3IUSodTK78lQ6tMy9S.jpeg", data: [["Mark-Hughes-1","1"]]},
{name: "Brian-Roemmele", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-1234064-200-Pu6NGHqk6GNdsSRydqyZBcnQIcXbOqYv.jpeg", data: [["Peter-Clark","1"]]},
{name: "David-S-Rose", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-304227-200-Kjce6oOPQLt6noHMYv7qoMcktuxtwDUW.jpeg", data: [["Kat-Li","1"]]},
{name: "Danielle-Maurer", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-1088-200-rSSpEQjNrTztqOT8bykeTNvLodX0K53h.jpeg", data: [["Annie-Lausier","1"]]},
{name: "Eunji-Choi", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-553-200-MZORPry8AgxxaaF1JWVMOL621qeJYJD9.jpeg", data: [["Sean-Hood","1"]]},
{name: "Jae-Won-Joh", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-9898-200-cbkAasbQupWOvfdbebaik5THcpdpBWI0.jpeg", data: [["Fahd-Butt","1"]]},
{name: "Mark-Hughes-1", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-714845-200-meFNhUGzopbUHJQyw90BM7u4KYyaZ7nh.jpeg", data: [["Adam-DAngelo","1"]]},
{name: "James-Hritz", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-14025-200-lGxSd1NYRsTaHJLbL2jqTxHTgwcxZrjt.jpeg", data: [["Venkatesh-Rao","1"]]},
{name: "Jay-Wacker", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-1224714-200-p3MI6aspgGkKRbGhOPgbzhIIyTMYCdIz.jpeg", data: [["David-S-Rose","1"]]},
{name: "Jeff-Hammerbacher", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-354-200-5T0rx2JiEkHlHVlUIrYqC93MJUWPVkuN.jpeg", data: [["Brian-Roemmele","1"]]},
{name: "Joel-Lewenstein", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-7441-200-n1HtqOPF5FLIwG1srxlE1hvL91FUdOXb.jpeg", data: [["Bradley-Voytek","1"]]},
{name: "Kat-Li", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-9516-200-kjHeBJ4rm9kR1OO78eHfmX3L5njQ6qvQ.jpeg", data: [["Marc-Bodnick","20"],["Rebekah-Cox","3"],["Charlie-Cheever","10"]]},
{name: "John-Clover", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-15931-200-kby3zTIFVslNcDq5E8I9gKkyYW0eVZi8.jpeg", data: [["Yishan-Wong","1"]]},
{name: "Sean-Hood", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-2042949-200-vdOl9RYUXlCbdbPyIEeZA6EEhWybFuD5.jpeg", data: [["Danielle-Maurer","1"]]},
{name: "Peter-Clark", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-835-200-ikdm1qfiFcTwyEocVKuclQ4hmlvnL4N6.jpeg", data: [["James-Hritz","1"]]},
{name: "Rebekah-Cox", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-336-200-DsfEaQkz3Vfp3xPfUwEJBtwJH4UuHryA.jpeg", data: [["Jeff-Hammerbacher","1"]]},
{name: "Yishan-Wong", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-386-200-7hxhOQ44saVQzHRD27MVRLr1iDsAYwO7.jpeg", data: [["Venkatesh-Rao","1"], ["Marc-Bodnick","1"]]},
{name: "Marc-Bodnick", photo: "http://d2o7bfz2il9cb7.cloudfront.net/main-thumb-472-200-DNulLjwv9dfjCcxM8pUW285fEJMRMVNd.jpeg", data: [["Stormy-Shippy","1"], ["Yishan-Wong","1"]]}];
/* Vis */
var width = 400
var height = 400
xOrigin = width/2;
yOrigin = height/2;
radius = (width/2);
angle = 360/users.length
var cx = function (n) {return Math.round(xOrigin + radius * Math.cos((n * angle) * Math.PI / 180));}
var cy = function (n) {return Math.round(yOrigin + radius * Math.sin((n * angle) * Math.PI / 180));}
var stroke = d3.scale.linear()
.domain([1,50])
.range([.25,6]);
var svg = d3.select('#viz')
.append('svg:svg')
.attr('width', width)
.attr('height', height);
for (var j = 0; j < users.length; j++) {
for (var k = 0; k < users[j]["data"].length; k++) {
console.log(j);
svg.append("svg:line")
.data([users[j]["data"][k]])
.attr("x1", function (d,i) { return cx(j) - 12 } )
.attr("y1", function (d,i) { return cy(j) - 12 } )
.attr("x2", function (d,i) { return cx(findUserIndex(d[0],users)) } )
.attr("y2", function (d,i) { return cy(findUserIndex(d[0],users)) } )
.attr("id", function (d) { return d[0]; })
.attr("class", function (d,i) { return users[j]["name"]; } )
.attr("stroke", "black")
.attr("display", "none")
.attr("stroke-width", function (d,i) {return stroke(d[1]); } );
}
}
svg.selectAll("image")
.data(users)
.enter().append("svg:image")
.attr("x", function(d,i) { return cx(i) - 25; } )
.attr("y", function(d,i) { return cy(i) - 25; } )
.attr("xlink:href", function(d) { return d.photo;})
.attr("width", 25)
.attr("height", 25)
.attr("class", function(d) { return d["name"]; } )
.text(function(d) { return d["name"]; })
.on("mouseover", onmouseover)
.on("mouseout", onmouseout)
.on("click", onmouseclick);
svg.selectAll("text")
.data(users)
.enter().append("svg:text")
.attr("x", function(d,i) { return cx(i) + 35; } )
.attr("y", function(d,i) { return cy(i) + 35; } )
.attr("dx", -3) // padding-right
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "end") // text-align: right
.text(function(d) { return d["name"]; });
function onmouseover(d, i) {
var currClass = d3.select(this).attr("class");
d3.selectAll("line." + currClass)
.attr("stroke", "black")
.attr("style", "display:block;");
}
function onmouseout(d, i) {
var currClass = d3.select(this).attr("class");
d3.selectAll("line." + currClass)
.attr("style", "display:none;");
}
function onmouseclick(d, i) {
console.log("hey");
var blurb = '<h2>' + d.name + '</h2>';
$("#summary").html(blurb);
var voter_list = "";
for (var i = 0; i < d["data"].length; i++) {
voter_list += "<li>" + d["data"][i][0] + " - " + d["data"][i][1] + "</li>";
}
$("#voter_list").html(voter_list);
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment