index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PSP 2010-2012</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style>
#chart {
margin-left: -40px;
height: 506px;
}
text {
font: 10px sans-serif;
}
.dot {
stroke: #000;
opacity: .5;
stroke-opacity: .75;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.label {
fill: #777;
}
.year.label {
font: 500 100px "Helvetica Neue";
fill: #ddd;
}
.year.label.active {
fill: #aaa;
}
.overlay {
fill: none;
pointer-events: all;
cursor: ew-resize;
}
</style>
</head>
<body>
<div data-role="page" class="type-home">
<div data-role="content">
<header>
<aside>Nov 13, 2012</aside>
<a href="../" rel="author">Michal Škop</a>
</header>
<h1>PSP 2010-2012</h1>
<form>
<label for="slider">Slider:</label>
<input name="slider" id="slider" min="2010.375" max="2012.125" value="2010.375" step=".01" type="range" />
</form>
<p>
<a href="#" id="play" data-role="button" data-inline="true" data-icon="refresh"><span id="playText">Play ></span></a>
</p>
<p id="chart"><svg><defs id="gradients"></defs></svg></p>
<p>TEST TEST TEST</p>
<script src="//d3js.org/d3.v2.js?2.8.1"></script>
<script>
function x(d) { return d.d1; }
function y(d) { return d.d2; }
function z(d) { return d.d3; }
function radius(d) { return 1; }
function color(d) { return d.color; }
function key(d) { return d.name; }
var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 39.5},
width = 960 - margin.right,
height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.linear().domain([-1, 1]).range([0, width]),
yScale = d3.scale.linear().domain([-1, 1]).range([height, 0]),
radiusScale = d3.scale.sqrt().domain([0, 1]).range([0, 10]);
var colorScale = d3.scale.category20c();
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")),
yAxis = d3.svg.axis().scale(yScale).orient("left");
var svg = d3.select("#chart svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width)
.attr("y", height - 6)
.text("Dimension 1");
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 6)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Dimension 2");
var label = svg.append("text")
.attr("class", "year label")
.attr("text-anchor", "end")
.attr("y", height - 24)
.attr("x", width)
.text("2010/4");
d3.json("psp2010.json", function(nations) {
var bisect = d3.bisector(function(d) { return d[0]; });
var dot = svg.append("g")
.attr("class", "dots")
.selectAll(".dot")
.data(interpolateData(2010.375))
.enter().append("circle")
.attr("class", "dot")
.call(position)
.sort(order)
.on("mouseover", animateFirstStep)
.on("mouseout", animateSecondStep)
.on("mousedown", animateFirstStep);
dot.append("title")
.text(function(d) { return d.name});
var i=0;
var playing = false;
$("#play").click(function() {
if(playing === false) {
startPlaying();
} else {
stopPlaying();
}
});
function startPlaying() {
playing = true;
$("#playText").html("Stop ||");
$('#slider').slider('disable');
svg.transition()
.duration(30000)
.ease("linear")
.tween("year", function() {return tweenYear($('#slider').val()) })
.each("end", stopPlaying);
}
function stopPlaying() {
playing = false;
$("#playText").html("Play >");
svg.transition().duration(0);
$('#slider').slider('enable');
}
function position(dot) {
dot .attr("cx", function(d) { return xScale(x(d)); })
.attr("cy", function(d) { return yScale(y(d)); })
.attr("r", function(d) { return radiusScale(radius(d)) })
.style("fill", function (d) { return gradient(color(d)) });
}
function order(a, b) {
return radius(b) - radius(a);
}
function tweenYear(start) {
var year = d3.interpolateNumber(2010.375, 2012.125);
return function(t) { displayYear(year(t)); };
}
function displayYear(year) {
dot.data(interpolateData(year), key).call(position).sort(order);
month = Math.ceil((year - Math.floor(year))*12);
label.text(Math.floor(year) + '/' + month);
i++;
if ((i%25) == 0) {
$("#slider").val(year);
$('#slider').slider('refresh');
}
}
function interpolateData(year) {
return nations.map(function(d) {
return {
name: d.name,
group: d.group,
d1: interpolateValues(d.d1, year),
d2: interpolateValues(d.d2, year),
d3: interpolateValues(d.d3, year),
color: findColor(d.color, year),
category: d.group
};
});
}
function interpolateValues(values, year) {
var i = bisect.left(values, year, 0, values.length - 1),
a = values[i];
if (i > 0) {
var b = values[i - 1],
t = (year - a[0]) / (b[0] - a[0]);
return a[1] * (1 - t) + b[1] * t;
}
return a[1];
}
function findColor(values, year) {
var i = bisect.left(values, year, 0, values.length - 1);
return values[i][1];
}
function animateFirstStep(d){
d3.select(this)
.transition()
.delay(0)
.duration(1000)
.attr("r", 10*2)
;
}
function animateSecondStep(d){
d3.select(this)
.transition()
.duration(1000)
.attr("r", 10);
}
$('#slider').ready(function() {
$('#slider').change(function(){
displayYear($(this).val());
});
});
function shadeColor(color, percent) {
var R = parseInt(color.substring(1,3),16)
var G = parseInt(color.substring(3,5),16)
var B = parseInt(color.substring(5,7),16);
R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);
R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
return "#"+RR+GG+BB;
}
function gradient(baseColor)
{
var gradientId = "gradient" + baseColor.substring(1)
console.log("COLOR: " + gradientId);
var darkColor = shadeColor(baseColor, -20)
var grad = d3.select("#gradients").selectAll("#" + gradientId)
.data([ gradientId ])
.enter()
.append("radialGradient")
.attr("id", gradientId)
.attr("gradientUnits", "objectBoundingBox")
.attr("fx", "30%")
.attr("fy", "30%")
grad.append("stop")
.attr("offset", "0%")
.attr("style", "stop-color:#FFFFFF")
grad.append("stop")
.attr("offset", "40%")
.attr("style", "stop-color:" + baseColor)
grad.append("stop")
.attr("offset", "100%")
.attr("style", "stop-color:" + darkColor)
console.log("url(#" + gradientId + ")")
return "url(#" + gradientId + ")";
}
});
</script>
<script>
</script>
</div>
</div>
</body>
</html>