Luca Matteis lmatteis

Try clicking on the various charts. All interactions are handled by crossfilter. Multi selection is also possible using crossfilter. This also shows how one can create reusable charts that support generic dimensions and groups.

This shows how separate charts can be enclosed in d3.dispatch events, and based on generic update events, we can trigger each chart to update accordingly. Crossfilter .filter() takes care of updating the dimensions groups so we simply need to re-trigger part of the chart's code that updates the chart with new data.

	The value of the payload ``v`` contains
	a bencoded dict with key ``ih`` (info hash) and value the 20 byte infohash of
	such torrent. Note that there is a 1-to-1 mapping between a mutable DHT item
	and a torrent.

	.. parsed-literal::

	"v": {
	"ih": "<20-byte infohash of target torrent>"
	}

	<h1 class="title">{{ctrl.getFacebookConsumed() \| number:0}}</h1>
	<p class="subtitle">
	Facebook interactions
	<span class="plafond">{{ctrl.getFacebookTotal() \| number:0}}</span>
	</p>
	<div class="slider">
	<div class="consumption-lenght twitter" ng-style="{width: (ctrl.getFacebookConsumed() / ctrl.getFacebookTotal() * 100 )+ '%'}"></div>
	</div>

	function drawBubble (selector, dispatch, dimension, group) {
	var margin = {top: 0, right: 0, bottom: 0, left: 0},
	width = parseInt(d3.select(selector).style("width")) - margin.left - margin.right,
	height = parseInt(d3.select(selector).style("height")) - margin.top - margin.bottom;

	var onClick;

	var color = d3.scale.category20();

	var bubble = d3.layout.pack()

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.bar--positive {
	fill: #9BCCF5;
	}

	.bar--negative {
	fill: pink;

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.bar--positive {
	fill: #9BCCF5;
	}

	.bar--negative {
	fill: pink;

	<!DOCTYPE html>
	<!-- saved from url=(0054)http://dc-js.github.io/dc.js/examples/stacked-bar.html -->
	<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>


	<div id="map"></div>
	<div id="pie-chart"></div>