jobonaf/index.html

## index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href='http://timelyportfolio.github.io/rCharts_d3_sankey/css/sankey.css'>

    <script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
    <script src='http://timelyportfolio.github.io/rCharts_d3_sankey/js/sankey.js' type='text/javascript'></script>

    <style>
    .rChart {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 600px;
      height: 400px;
    }
    </style>

  </head>
  <body >

    <div id = 'sorgentiPM10' class = 'rChart rCharts_d3_sankey-gh-pages'></div>
    <!--Attribution:
Mike Bostock https://github.com/d3/d3-plugins/tree/master/sankey
Mike Bostock http://bost.ocks.org/mike/sankey/
-->

<script>
(function(){
var params = {
 "dom": "sorgentiPM10",
"width":    600,
"height":    400,
"data": {
 "source": [ "agricoltura/allevamenti", "merci su strada", "riscaldamento (a legna)", "veicoli leggeri", "industria", "produzione di energia", "riscaldamento (non legna)", "altro", "agricoltura/allevamenti", "merci su strada", "riscaldamento (a legna)", "veicoli leggeri", "industria", "produzione di energia", "riscaldamento (non legna)", "altro", "aerosol primario", "aerosol secondario", "aerosol naturale" ],
"target": [ "aerosol primario", "aerosol primario", "aerosol primario", "aerosol primario", "aerosol primario", "aerosol primario", "aerosol primario", "aerosol primario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "PM10", "PM10", "PM10" ],
"value": [    418,   2636,   5316,   1842,   1614,     86,     80,   1646, 9814.1,  12216, 638.94, 4264.6, 7026.4, 2630.4,   2109,   3579,  13638,  42278,  12274 ]
},
"nodeWidth":     15,
"nodePadding":     30,
"layout":     32,
"units": "Mg[PM10eq]/y",
"title": "Sankey Diagram",
"id": "sorgentiPM10"
};

params.units ? units = " " + params.units : units = "";

//hard code these now but eventually make available
var formatNumber = d3.format("0,.0f"),    // zero decimal places
    format = function(d) { return formatNumber(d) + units; },
    color = d3.scale.category20();

if(params.labelFormat){
  formatNumber = d3.format(".2%");
}

var svg = d3.select('#' + params.id).append("svg")
    .attr("width", params.width)
    .attr("height", params.height);

var sankey = d3.sankey()
    .nodeWidth(params.nodeWidth)
    .nodePadding(params.nodePadding)
    .layout(params.layout)
    .size([params.width,params.height]);

var path = sankey.link();

var data = params.data,
    links = [],
    nodes = [];

//get all source and target into nodes
//will reduce to unique in the next step
//also get links in object form
data.source.forEach(function (d, i) {
    nodes.push({ "name": data.source[i] });
    nodes.push({ "name": data.target[i] });
    links.push({ "source": data.source[i], "target": data.target[i], "value": +data.value[i] });
});

//now get nodes based on links data
//thanks Mike Bostock https://groups.google.com/d/msg/d3-js/pl297cFtIQk/Eso4q_eBu1IJ
//this handy little function returns only the distinct / unique nodes
nodes = d3.keys(d3.nest()
                .key(function (d) { return d.name; })
                .map(nodes));

//it appears d3 with force layout wants a numeric source and target
//so loop through each link replacing the text with its index from node
links.forEach(function (d, i) {
    links[i].source = nodes.indexOf(links[i].source);
    links[i].target = nodes.indexOf(links[i].target);
});

//now loop through each nodes to make nodes an array of objects rather than an array of strings
nodes.forEach(function (d, i) {
    nodes[i] = { "name": d };
});

sankey
  .nodes(nodes)
  .links(links)
  .layout(params.layout);

var link = svg.append("g").selectAll(".link")
  .data(links)
.enter().append("path")
  .attr("class", "link")
  .attr("d", path)
  .style("stroke-width", function (d) { return Math.max(1, d.dy); })
  .sort(function (a, b) { return b.dy - a.dy; });

link.append("title")
  .text(function (d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });

var node = svg.append("g").selectAll(".node")
  .data(nodes)
.enter().append("g")
  .attr("class", "node")
  .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag()
  .origin(function (d) { return d; })
  .on("dragstart", function () { this.parentNode.appendChild(this); })
  .on("drag", dragmove));

node.append("rect")
  .attr("height", function (d) { return d.dy; })
  .attr("width", sankey.nodeWidth())
  .style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); })
  .style("stroke", function (d) { return d3.rgb(d.color).darker(2); })
.append("title")
  .text(function (d) { return d.name + "\n" + format(d.value); });

node.append("text")
  .attr("x", -6)
  .attr("y", function (d) { return d.dy / 2; })
  .attr("dy", ".35em")
  .attr("text-anchor", "end")
  .attr("transform", null)
  .text(function (d) { return d.name; })
.filter(function (d) { return d.x < params.width / 2; })
  .attr("x", 6 + sankey.nodeWidth())
  .attr("text-anchor", "start");

// the function for moving the nodes
  function dragmove(d) {
    d3.select(this).attr("transform",
        "translate(" + (
                   d.x = Math.max(0, Math.min(params.width - d.dx, d3.event.x))
                ) + "," + (
                   d.y = Math.max(0, Math.min(params.height - d.dy, d3.event.y))
                ) + ")");
        sankey.relayout();
        link.attr("d", path);
  }
})();
</script>

    <script></script>
  </body>
</html>
	<!doctype HTML>
	<meta charset = 'utf-8'>
	<html>
	<head>
	<link rel='stylesheet' href='http://timelyportfolio.github.io/rCharts_d3_sankey/css/sankey.css'>

	<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
	<script src='http://timelyportfolio.github.io/rCharts_d3_sankey/js/sankey.js' type='text/javascript'></script>

	<style>
	.rChart {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 600px;
	height: 400px;
	}
	</style>

	</head>
	<body >

	<div id = 'sorgentiPM10' class = 'rChart rCharts_d3_sankey-gh-pages'></div>
	<!--Attribution:
	Mike Bostock https://github.com/d3/d3-plugins/tree/master/sankey
	Mike Bostock http://bost.ocks.org/mike/sankey/
	-->

	<script>
	(function(){
	var params = {
	"dom": "sorgentiPM10",
	"width": 600,
	"height": 400,
	"data": {
	"source": [ "agricoltura/allevamenti", "merci su strada", "riscaldamento (a legna)", "veicoli leggeri", "industria", "produzione di energia", "riscaldamento (non legna)", "altro", "agricoltura/allevamenti", "merci su strada", "riscaldamento (a legna)", "veicoli leggeri", "industria", "produzione di energia", "riscaldamento (non legna)", "altro", "aerosol primario", "aerosol secondario", "aerosol naturale" ],
	"target": [ "aerosol primario", "aerosol primario", "aerosol primario", "aerosol primario", "aerosol primario", "aerosol primario", "aerosol primario", "aerosol primario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "aerosol secondario", "PM10", "PM10", "PM10" ],
	"value": [ 418, 2636, 5316, 1842, 1614, 86, 80, 1646, 9814.1, 12216, 638.94, 4264.6, 7026.4, 2630.4, 2109, 3579, 13638, 42278, 12274 ]
	},
	"nodeWidth": 15,
	"nodePadding": 30,
	"layout": 32,
	"units": "Mg[PM10eq]/y",
	"title": "Sankey Diagram",
	"id": "sorgentiPM10"
	};

	params.units ? units = " " + params.units : units = "";

	//hard code these now but eventually make available
	var formatNumber = d3.format("0,.0f"), // zero decimal places
	format = function(d) { return formatNumber(d) + units; },
	color = d3.scale.category20();

	if(params.labelFormat){
	formatNumber = d3.format(".2%");
	}

	var svg = d3.select('#' + params.id).append("svg")
	.attr("width", params.width)
	.attr("height", params.height);

	var sankey = d3.sankey()
	.nodeWidth(params.nodeWidth)
	.nodePadding(params.nodePadding)
	.layout(params.layout)
	.size([params.width,params.height]);

	var path = sankey.link();

	var data = params.data,
	links = [],
	nodes = [];

	//get all source and target into nodes
	//will reduce to unique in the next step
	//also get links in object form
	data.source.forEach(function (d, i) {
	nodes.push({ "name": data.source[i] });
	nodes.push({ "name": data.target[i] });
	links.push({ "source": data.source[i], "target": data.target[i], "value": +data.value[i] });
	});

	//now get nodes based on links data
	//thanks Mike Bostock https://groups.google.com/d/msg/d3-js/pl297cFtIQk/Eso4q_eBu1IJ
	//this handy little function returns only the distinct / unique nodes
	nodes = d3.keys(d3.nest()
	.key(function (d) { return d.name; })
	.map(nodes));

	//it appears d3 with force layout wants a numeric source and target
	//so loop through each link replacing the text with its index from node
	links.forEach(function (d, i) {
	links[i].source = nodes.indexOf(links[i].source);
	links[i].target = nodes.indexOf(links[i].target);
	});

	//now loop through each nodes to make nodes an array of objects rather than an array of strings
	nodes.forEach(function (d, i) {
	nodes[i] = { "name": d };
	});

	sankey
	.nodes(nodes)
	.links(links)
	.layout(params.layout);

	var link = svg.append("g").selectAll(".link")
	.data(links)
	.enter().append("path")
	.attr("class", "link")
	.attr("d", path)
	.style("stroke-width", function (d) { return Math.max(1, d.dy); })
	.sort(function (a, b) { return b.dy - a.dy; });

	link.append("title")
	.text(function (d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });

	var node = svg.append("g").selectAll(".node")
	.data(nodes)
	.enter().append("g")
	.attr("class", "node")
	.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
	.call(d3.behavior.drag()
	.origin(function (d) { return d; })
	.on("dragstart", function () { this.parentNode.appendChild(this); })
	.on("drag", dragmove));

	node.append("rect")
	.attr("height", function (d) { return d.dy; })
	.attr("width", sankey.nodeWidth())
	.style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); })
	.style("stroke", function (d) { return d3.rgb(d.color).darker(2); })
	.append("title")
	.text(function (d) { return d.name + "\n" + format(d.value); });

	node.append("text")
	.attr("x", -6)
	.attr("y", function (d) { return d.dy / 2; })
	.attr("dy", ".35em")
	.attr("text-anchor", "end")
	.attr("transform", null)
	.text(function (d) { return d.name; })
	.filter(function (d) { return d.x < params.width / 2; })
	.attr("x", 6 + sankey.nodeWidth())
	.attr("text-anchor", "start");

	// the function for moving the nodes
	function dragmove(d) {
	d3.select(this).attr("transform",
	"translate(" + (
	d.x = Math.max(0, Math.min(params.width - d.dx, d3.event.x))
	) + "," + (
	d.y = Math.max(0, Math.min(params.height - d.dy, d3.event.y))
	) + ")");
	sankey.relayout();
	link.attr("d", path);
	}
	})();
	</script>

	<script></script>
	</body>
	</html>