|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
body { |
|
font: 10px sans-serif; |
|
} |
|
|
|
svg { |
|
padding: 10px 0 0 10px; |
|
} |
|
|
|
.legend { |
|
vertical-align: top; |
|
} |
|
|
|
.label { |
|
text-anchor: middle; |
|
} |
|
|
|
.label-name { |
|
font-weight: bold; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="http://d3js.org/d3.v4.0.0-alpha.9.min.js"></script> |
|
<script src="http://static.imply.io/plywood/plywood.js"></script> |
|
<script> |
|
|
|
// Query |
|
|
|
var Dataset = plywood.Dataset; |
|
var $ = plywood.$; |
|
|
|
var countryByHourOfDay = $('main') |
|
.filter($('time').in({ start: new Date('2015-11-01T00:00:00Z'), end: null })) |
|
.filter('$country != null') |
|
.split('$country', 'Country') |
|
.apply('TotalEdits', '$main.count()') |
|
.sort('$TotalEdits', 'descending') |
|
.limit(10) |
|
.apply('HoursOfDay', |
|
$('main').split($("time").timePart('HOUR_OF_DAY', 'Etc/UTC'), 'HourOfDay') |
|
.apply('Edits', '$main.count()') |
|
.sort('$HourOfDay', 'ascending') |
|
); |
|
|
|
d3.request('http://plywood-proxy.imply.io/plywood') |
|
.header("Content-Type", "application/json") |
|
.response(function(xhr) { return Dataset.fromJS(JSON.parse(xhr.responseText)); }) |
|
.post( |
|
JSON.stringify({ |
|
dataSource: 'wiki', |
|
expression: countryByHourOfDay |
|
}), |
|
function(err, dataset) { |
|
if (err) { |
|
console.log(err); |
|
return; |
|
} |
|
render(dataset); |
|
} |
|
); |
|
|
|
// Rendering |
|
|
|
function translate(x, y) { |
|
return "translate(" + x + "," + y + ")"; |
|
} |
|
|
|
var formatTotalEdits = d3.format(".1s"); |
|
|
|
var padding = 10; |
|
|
|
var radius = d3.scaleSqrt() |
|
.range([0, 200]); |
|
|
|
var color = d3.scaleOrdinal() |
|
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); |
|
|
|
var arc = d3.arc() |
|
.padRadius(50); |
|
|
|
var pie = d3.pie() |
|
.sort(null) |
|
.padAngle(0.02) |
|
.value(function(d) { return d.Edits; }); |
|
|
|
function render(dataset) { |
|
var data = dataset.toJS(); |
|
|
|
radius.domain([0, d3.max(data, function(d) { return d.TotalEdits; })]); |
|
|
|
var svg = d3.select("body").selectAll(".pie").data(data, function(d) { return d.Country }) |
|
.enter().append("svg") |
|
.attr("class", "pie") |
|
.each(multiple) |
|
.select("g"); |
|
|
|
var label = svg.append("text") |
|
.attr("class", "label"); |
|
|
|
label.append("tspan") |
|
.attr("class", "label-name") |
|
.attr("x", 0) |
|
.attr("dy", "-.2em") |
|
.text(function(d) { return d.Country; }); |
|
|
|
label.append("tspan") |
|
.attr("class", "label-value") |
|
.attr("x", 0) |
|
.attr("dy", "1.1em") |
|
.text(function(d) { return formatTotalEdits(d.TotalEdits); }); |
|
|
|
function multiple(d) { |
|
var r = radius(d.TotalEdits); |
|
|
|
var svg = d3.select(this) |
|
.attr("width", r * 2) |
|
.attr("height", r * 2) |
|
.append("g") |
|
.attr("transform", translate(r, r)); |
|
|
|
svg.selectAll(".arc") |
|
.data(function(d) { return pie(d.HoursOfDay); }) |
|
.enter().append("path") |
|
.attr("class", "arc") |
|
.attr("d", arc.outerRadius(r).innerRadius(r * 0.6)) |
|
.style("fill", function(d, i) { return i % 2 ? '#E2B89F' : '#799888' }); |
|
} |
|
} |
|
|
|
</script> |
