forked from lilyc5459's block: d3.js wiki visualization
forked from CBasis's block: d3.js wiki visualization
forked from anonymous's block: d3.js wiki visualization
xxxxxxxxxx
<style>
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
}
.graph {
text-align: center;
}
svg {
background-color: #333947;
}
.title {
font-size: 16px;
font-weight: bold;
fill: #fff;
}
.caption {
fill: #ccc;
}
.axis path,
.axis line {
fill: none;
stroke: #eee;
shape-rendering: crispEdges;
}
.axis text {
fill: #fff;
}
.loading {
font-size: 15px;
}
.plot {
fill-opacity: 0.75;
}
.conflict0 { fill: #4990BF; }
.conflict1 { fill: #FF6363; }
.conflict2 { fill: #738b8c; }
.conflict3 { fill: #BC63FF; }
.conflict4 { fill: #EFFF63; }
.conflict5 { fill: #FF3D3D; }
.conflict6 { fill: #496EBF; }
.conflict7 { fill: #cda2a2; }
.conflict8 { fill: #E563FF; }
.conflict9 { fill: #63D8FF; }
.circle {
cursor: pointer;
opacity: 0.5;
}
.circle:hover {
stroke: #000;
stroke-width: 2px;
}
.title-tip,
.body-tip {
line-height: 1;
padding: 12px;
background: #000;
color: #fff;
line-height: 14px;
border-radius: 2px;
pointer-events: none;
text-align: center;
}
.body-tip {
max-width: 250px;
}
.title-tip div {
font-size: 10px;
color: #ccc;
}
/* Creates a small triangle extender for the tooltip */
.title-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: #000;
position: absolute;
pointer-events: none;
}
.title-tip.n:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
.button {
height: 25px;
width: 125px;
stroke: #ccc;
stroke-width: 2px;
fill: #333947;
}
.button:hover,
.button-text:hover {
cursor: pointer;
}
.button-active {
stroke: #fff;
fill: #fff;
}
.button-text {
fill: #ccc;
}
.button-text-active {
fill: #000;
}
</style>
<div id="graph" class="graph"></div>
<script src="https://d3js.org/d3.v2.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var w = 1500;
var h = 800;
var pad = 40;
var above = 125;
var left = 225;
var titleTip = d3.tip()
.attr('class', 'title-tip')
.offset([-3, 0])
.html(function(d) {
return "<strong>" + d.title + "</strong><div>" + d.pageedits + " page edits</div>";
});
var bodyTip = d3.tip()
.attr('class', 'body-tip')
.html(function(d) { return d.description; });
var svg = d3.select("#graph")
.append("svg")
.attr("width", w)
.attr("height", h)
.call(titleTip)
.call(bodyTip);
var x = d3.scale.linear().domain([2001, 2006]).range([left, w-pad]);
var y = d3.scale.linear().domain([0, 9]).range([above, h-pad-above]);
var xAxis = d3.svg.axis().scale(x).orient("bottom")
.ticks(6)
.tickFormat(d3.format("d"))
var yAxis = d3.svg.axis().scale(y).orient("left")
.ticks(10)
.tickFormat(function (d, i) {
return ['Technicality','Political','Ethical','Ethnic','International Words','Religion','Culture','Animal Rights','Star Wars','Other'][d];
});
svg.append("text")
.attr("class", "title")
.attr("x", w/2)
.attr("y", above/3)
.attr("text-anchor", "middle")
.text("Most Debated Wikipedia Articles (2010)");
svg.append("text")
.attr("class", "caption")
.attr("x", w/2)
.attr("y", above/3+18)
.attr("text-anchor", "middle")
.text("Click each circle to read more!");
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0, "+(h-pad)+")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate("+(left-pad)+", 0)")
.call(yAxis);
svg.append("text")
.attr("class", "loading")
.text("Loading...")
.attr("x", function () { return w/2; })
.attr("y", function () { return h/2-5; });
d3.json("data.json", function (data) {
var max_r = d3.max(data.map(function (d) { return d.pageedits; }));
var r1 = d3.scale.linear()
.domain([0, d3.max(data, function (d) { return d.pageedits; })])
.range([3, 100]);
var r2 = d3.scale.linear()
.domain([0, d3.max(data, function (d) { return d.pagesofdiscussion; })])
.range([3, 100]);
var displayCircles = function(flag) {
data.sort(function(a,b) {
var i,j;
if (flag == 0) {
i = a.pageedits;
j = b.pageedits;
} else {
i = a.pagesofdiscussion;
j = b.pagesofdiscussion;
}
if (i > j)
return -1;
if (i < j)
return 1;
return 0;
});
svg.selectAll("circle").remove();
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class", function (d) { return "circle conflict"+d.conflicttype; })
.attr("cx", function (d) { return x(d.creationdate); })
.attr("cy", function (d) { return y(d.conflicttype); })
.on('mouseover', titleTip.show)
.on('mouseout', function(d) {
titleTip.hide();
bodyTip.hide(d);
})
.on('click', function (d) {
titleTip.hide();
bodyTip.show(d);
})
.transition()
.duration(800)
.attr("r", function (d) {
if (flag == 0) {
return r1(d.pageedits);
} else {
return r2(d.pagesofdiscussion);
}
});
titleTip.html(function(d) {
if (flag == 0) {
return "<strong>" + d.title + "</strong><div>" + d.pageedits + " page edits</div>";
} else {
return "<strong>" + d.title + "</strong><div>" + d.pagesofdiscussion + " pages of discussion</div>";
}
});
}
var toggleButton = function (flag) {
if (flag == 0) {
button1.attr("class", "button button-active");
button2.attr("class", "button");
buttonText1.attr("class", "button-text button-text-active");
buttonText2.attr("class", "button-text");
} else {
button1.attr("class", "button");
button2.attr("class", "button button-active");
buttonText1.attr("class", "button-text");
buttonText2.attr("class", "button-text button-text-active");
}
}
svg.selectAll(".loading").remove();
displayCircles(0);
var button1 = svg.append("rect")
.attr("class", "button button-active")
.attr("height", 25)
.attr("width", 125)
.attr("x", left/2)
.attr("y", above/2)
.attr("rx", 5)
.attr("ry", 5)
.on("click", function() {
toggleButton(0);
return displayCircles(0);
});
var buttonText1 = svg.append("text")
.attr("class", "button-text button-text-active")
.attr("x", left/2 + 63)
.attr("y", above/2 + 16)
.attr("text-anchor", "middle")
.text("Page Edits")
.on("click", function() {
toggleButton(0);
return displayCircles(0);
});
var button2 = svg.append("rect")
.attr("class", "button")
.attr("height", 25)
.attr("width", 125)
.attr("x", left/2+125)
.attr("y", above/2)
.attr("rx", 5)
.attr("ry", 5)
.on("click", function() {
toggleButton(1);
return displayCircles(1);
});
var buttonText2 = svg.append("text")
.attr("class", "button-text")
.attr("x", left/2 + 188)
.attr("y", above/2 + 16)
.attr("text-anchor", "middle")
.text("Pages of Discussion")
.on("click", function() {
toggleButton(1);
return displayCircles(1);
});
});
</script>
Modified http://d3js.org/d3.v2.min.js to a secure url
Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url
https://d3js.org/d3.v2.min.js
https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js