AlessandraSozzi/data.tsv

## data.tsv

          
            first
            second
            third

            
              1
              0.73
              0.47

            
              0
              0.27
              0.53

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>PragmaConf 2015 Participants Composition</title>
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<style>

h1 {
  font-family: 'Poiret One', cursive;
  font-size: 40px;
  color: "black";
  text-align: center;
}
label{
  font-family: 'Poiret One', cursive;
  font-size: 20px;
  color: #bdbdbd;
  display: inline;
  padding: 20px;
  text-align: center;
}

text {
  font-family: 'Poiret One', cursive;
  font-size: 25px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
  display: inline;
}
.row {
  width: 100%;
  margin: 0 auto;
}
#DonutChart {
  margin-left: 80px;
  margin-top: 70px;
  display: inline-block;
  width: 360px;
  height: 500px;
  vertical-align: top;
}
#BarChart {
  margin-left: 80px;
  margin-top: 60px;
  display: inline-block;
  width: 600px;
  height: 500px;
}
.legend {
  font-size: 12px;
}
rect {
  stroke-width: 2;
}

path:hover {  opacity:0.9; }

.axis text {
  font-family: 'Poiret One', cursive;
  font-size: 16pt;
}
.axis .label {
  font-size: 16pt;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.y.axis path, .y.axis line {
  stroke: none;
}
.tooltip {
  background: #eee;
  box-shadow: 0 0 5px #999999;
  color: #333;
  display: none;
  font-family: 'Poiret One';
  font-size: 16px;
  left: 130px;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 95px;
  z-index: 10;
}

.country {
  font-weight: bold;
}

</style>
<div>
      <h1>Where do our attendees come from?</h1>
</div>
<div class="#menu" >
  <ul>
    <li><label><input type = "radio" name= "dataset" value = "first" id = "first" checked = "checked"> 2013</label></li>
    <li><label><input type = "radio" name= "dataset" value = "second" id = "second"> 2014</label></li>
    <li><label><input type = "radio" name= "dataset" value = "third" id = "third"> 2015</label></li>
  </ul>
</div>
<div class= "row">
  <div id="DonutChart"></div>
  <div id="BarChart"></div>
</div>
<br>
<br>


<script>
var width = 360,
    height = 360,
    radius = Math.min(width, height) / 2,
    donutWidth = 75;

var legendRectSize = 30,
    legendSpacing = 8;

var color = d3.scale.ordinal().range(["#045a8d", "#41ae76"]);

var pie = d3.layout.pie()
    .value(function(d) { return d.first; })
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(radius - donutWidth)
    .outerRadius(radius);

var svg = d3.select("#DonutChart").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


var tooltip = d3.select('#DonutChart')
  .append('div')
  .attr('class', 'tooltip');

tooltip.append('div')
  .attr('class', 'country');

tooltip.append('div')
  .attr('class', 'percent');

d3.tsv("data.tsv", type, function(error, data) {
  var path = svg.datum(data).selectAll("path")
      .data(pie)
      .enter().append("path")
      .attr("fill", function(d, i) { return color(i); })
      .attr("d", arc)
      .each(function(d) { this._current = d; }) // store the initial angles

  path.on('mouseover', function(d, i) {
    var percent = 100 * d['value'];
    var country = i === 0 ? 'From Italy' : 'Not From Italy'
    tooltip.select('.country').html(country);
    tooltip.select('.percent').html(percent + '%');
    tooltip.style('display', 'block');
  });

  path.on('mouseout', function(d) {
    tooltip.style('display', 'none');
  });

  path.on('mousemove', function(d) {
    tooltip.style('top', (d3.event.pageY + 10) + 'px')
      .style('left', (d3.event.pageX + 10) + 'px');
  });

  var legend = svg.selectAll('.legend')
      .data(color.domain())
      .enter()
      .append('g')
      .attr('class', 'legend')
      .attr('transform', function(d, i) {
        var height = legendRectSize + legendSpacing;
        var offset =  height * color.domain().length / 2;
        var horz = -2 * legendRectSize;
        var vert = i * height - offset;
        return 'translate(' + horz + ',' + vert + ')';
      });

  legend.append('rect')
      .attr('width', legendRectSize)
      .attr('height', legendRectSize)
      .style('fill', color)
      .style('stroke', color);

  legend.append('text')
    .attr('x', legendRectSize + legendSpacing)
    .attr('y', legendRectSize - legendSpacing)
    .text(function(d, i) { return i === 0 ? "Italy" : "Not Italy" ; });

  d3.selectAll("input")
      .on("change", change);

  function change() {
    var value = this.value;
    pie.value(function(d) { return d[value]; }); // change the value function
    path = path.data(pie); // compute the new angles
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  }
});

function type(d) {
  d.first = +d.first;
  d.second = +d.second;
  d.third = +d.third;
  return d;
}

// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}


var outerWidth = 600;
var outerHeight = 500;
var margin = { left: 230, top: 0, right: 15, bottom: 60 };
var barPadding = 0.2;

var xColumn = "value";
var yColumn = "name";
var xAxisLabelText = "Not Italy Attendees";
var xAxisLabelOffset = 55;

var innerWidth  = outerWidth  - margin.left - margin.right;
var innerHeight = outerHeight - margin.top  - margin.bottom;


var barChart = d3.select("#BarChart").append("svg")
  .attr("width",  outerWidth)
  .attr("height", outerHeight);
var g = barChart.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + innerHeight + ")")
var xAxisLabel = xAxisG.append("text")
  .style("text-anchor", "middle")
  .attr("x", innerWidth / 2)
  .attr("y", xAxisLabelOffset)
  .attr("class", "label");


var yAxisG = g.append("g")
  .attr("class", "y axis");

var xScale = d3.scale.linear().range(      [0, innerWidth]);
var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding);

var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
  .ticks(5)                   // Use approximately 5 ticks marks.
  .tickFormat(d3.format("s")) // Use intelligent abbreviations, e.g. 5M for 5 Million
  .outerTickSize(0);          // Turn off the marks at the end of the axis.
var yAxis = d3.svg.axis().scale(yScale).orient("left")
  .outerTickSize(0);          // Turn off the marks at the end of the axis.

xScale.domain([0, 20]);


function render(data){

  var numberOfRows = data.length

  if (numberOfRows === 1) {
    xAxisLabel.attr('opacity', 0);
    xAxisG.attr('opacity', 0);
  } else {
    xAxisLabel.attr('opacity', 1);
    xAxisG.attr('opacity', 1);
  }

  console.log(numberOfRows);

  yScale.domain(data.map( function (d){ return d[yColumn]; }));

  xAxisG.call(xAxis);

  yAxisG.transition().duration(1500).ease("sin-in-out")
              .call(yAxis);

  xAxisLabel.text(xAxisLabelText);

  var bars = g.selectAll("rect").data(data);
  var newBars = bars.enter().append('rect')
        .attr('class', 'bar')
        .attr('opacity', 0)
        .attr("x", 0)
        .attr("y",     function (d){ return yScale(d[yColumn]);})
        .attr("height", yScale.rangeBand())
        .style('fill', "#41ae76");

  bars.transition().duration(1000)
    .attr("width", function (d){ return xScale(d[xColumn]); })
    .attr("y",     function (d){ return yScale(d[yColumn]); })
    .attr("height", yScale.rangeBand())
    .attr('opacity', 1);

  bars.exit().transition()
    .attr("width", 0)
    .attr('opacity', 0).remove();
}


function typeH(d){
  d.value = +d.value;
  return d;
}


d3.select("#first")
  .on("click", function() {
    d3.csv("year2013.csv", typeH, render);
    });

d3.select("#second")
  .on("click", function() {
    d3.csv("year2014.csv", typeH, render);
    });
d3.select("#third")
  .on("click", function() {
    d3.csv("year2015.csv", typeH, render);
    });


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


## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## year2013.csv

          
            value
            name

            
              0

## year2014.csv

          
            value
            name

            
              10
              UK

            
              9
              Switzerland

            
              4
              Croatia

            
              4
              Germany

            
              3
              Netherlands

            
              3
              CzechRepublic

            
              2
              Spain

            
              1
              USA

            
              1
              Macedonia

            
              1
              Denmark

            
              1
              Romania

            
              1
              Greece

            
              1
              Serbia

            
              1
              Norway

            
              1
              Slovakia

            
              1
              Poland

            
              1
              France

## year2015.csv

          
            name
            value

            
              Germany
              17

            
              UK
              16

            
              Romania
              11

            
              Serbia
              10

            
              Switzerland
              8

            
              Poland
              8

            
              France
              6

            
              Croatia
              6

            
              Bulgaria
              5

            
              Slovenia
              4

            
              Spain
              4

            
              Ukraine
              4

            
              Finland
              3

            
              Ireland
              3

            
              USA
              3

            
              Hungary
              2

            
              Macedonia
              1

            
              Canada
              1

            
              Netherlands
              1

            
              Lebanon
              1

            
              Belarus
              1

            
              Denmark
              1
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>PragmaConf 2015 Participants Composition</title>
	<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
	<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
	<style>

	h1 {
	font-family: 'Poiret One', cursive;
	font-size: 40px;
	color: "black";
	text-align: center;
	}
	label{
	font-family: 'Poiret One', cursive;
	font-size: 20px;
	color: #bdbdbd;
	display: inline;
	padding: 20px;
	text-align: center;
	}

	text {
	font-family: 'Poiret One', cursive;
	font-size: 25px;
	}
	ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
	}
	li {
	display: inline;
	}
	.row {
	width: 100%;
	margin: 0 auto;
	}
	#DonutChart {
	margin-left: 80px;
	margin-top: 70px;
	display: inline-block;
	width: 360px;
	height: 500px;
	vertical-align: top;
	}
	#BarChart {
	margin-left: 80px;
	margin-top: 60px;
	display: inline-block;
	width: 600px;
	height: 500px;
	}
	.legend {
	font-size: 12px;
	}
	rect {
	stroke-width: 2;
	}

	path:hover { opacity:0.9; }

	.axis text {
	font-family: 'Poiret One', cursive;
	font-size: 16pt;
	}
	.axis .label {
	font-size: 16pt;
	}

	.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.y.axis path, .y.axis line {
	stroke: none;
	}
	.tooltip {
	background: #eee;
	box-shadow: 0 0 5px #999999;
	color: #333;
	display: none;
	font-family: 'Poiret One';
	font-size: 16px;
	left: 130px;
	padding: 10px;
	position: absolute;
	text-align: center;
	top: 95px;
	z-index: 10;
	}

	.country {
	font-weight: bold;
	}

	</style>
	<div>
	<h1>Where do our attendees come from?</h1>
	</div>
	<div class="#menu" >
	<ul>
	<li><label><input type = "radio" name= "dataset" value = "first" id = "first" checked = "checked"> 2013</label></li>
	<li><label><input type = "radio" name= "dataset" value = "second" id = "second"> 2014</label></li>
	<li><label><input type = "radio" name= "dataset" value = "third" id = "third"> 2015</label></li>
	</ul>
	</div>
	<div class= "row">
	<div id="DonutChart"></div>
	<div id="BarChart"></div>
	</div>
	<br>
	<br>


	<script>
	var width = 360,
	height = 360,
	radius = Math.min(width, height) / 2,
	donutWidth = 75;

	var legendRectSize = 30,
	legendSpacing = 8;

	var color = d3.scale.ordinal().range(["#045a8d", "#41ae76"]);

	var pie = d3.layout.pie()
	.value(function(d) { return d.first; })
	.sort(null);

	var arc = d3.svg.arc()
	.innerRadius(radius - donutWidth)
	.outerRadius(radius);

	var svg = d3.select("#DonutChart").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


	var tooltip = d3.select('#DonutChart')
	.append('div')
	.attr('class', 'tooltip');

	tooltip.append('div')
	.attr('class', 'country');

	tooltip.append('div')
	.attr('class', 'percent');

	d3.tsv("data.tsv", type, function(error, data) {
	var path = svg.datum(data).selectAll("path")
	.data(pie)
	.enter().append("path")
	.attr("fill", function(d, i) { return color(i); })
	.attr("d", arc)
	.each(function(d) { this._current = d; }) // store the initial angles

	path.on('mouseover', function(d, i) {
	var percent = 100 * d['value'];
	var country = i === 0 ? 'From Italy' : 'Not From Italy'
	tooltip.select('.country').html(country);
	tooltip.select('.percent').html(percent + '%');
	tooltip.style('display', 'block');
	});

	path.on('mouseout', function(d) {
	tooltip.style('display', 'none');
	});

	path.on('mousemove', function(d) {
	tooltip.style('top', (d3.event.pageY + 10) + 'px')
	.style('left', (d3.event.pageX + 10) + 'px');
	});

	var legend = svg.selectAll('.legend')
	.data(color.domain())
	.enter()
	.append('g')
	.attr('class', 'legend')
	.attr('transform', function(d, i) {
	var height = legendRectSize + legendSpacing;
	var offset = height * color.domain().length / 2;
	var horz = -2 * legendRectSize;
	var vert = i * height - offset;
	return 'translate(' + horz + ',' + vert + ')';
	});

	legend.append('rect')
	.attr('width', legendRectSize)
	.attr('height', legendRectSize)
	.style('fill', color)
	.style('stroke', color);

	legend.append('text')
	.attr('x', legendRectSize + legendSpacing)
	.attr('y', legendRectSize - legendSpacing)
	.text(function(d, i) { return i === 0 ? "Italy" : "Not Italy" ; });

	d3.selectAll("input")
	.on("change", change);

	function change() {
	var value = this.value;
	pie.value(function(d) { return d[value]; }); // change the value function
	path = path.data(pie); // compute the new angles
	path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
	}
	});

	function type(d) {
	d.first = +d.first;
	d.second = +d.second;
	d.third = +d.third;
	return d;
	}

	// Store the displayed angles in _current.
	// Then, interpolate from _current to the new angles.
	// During the transition, _current is updated in-place by d3.interpolate.
	function arcTween(a) {
	var i = d3.interpolate(this._current, a);
	this._current = i(0);
	return function(t) {
	return arc(i(t));
	};
	}


	var outerWidth = 600;
	var outerHeight = 500;
	var margin = { left: 230, top: 0, right: 15, bottom: 60 };
	var barPadding = 0.2;

	var xColumn = "value";
	var yColumn = "name";
	var xAxisLabelText = "Not Italy Attendees";
	var xAxisLabelOffset = 55;

	var innerWidth = outerWidth - margin.left - margin.right;
	var innerHeight = outerHeight - margin.top - margin.bottom;


	var barChart = d3.select("#BarChart").append("svg")
	.attr("width", outerWidth)
	.attr("height", outerHeight);
	var g = barChart.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	var xAxisG = g.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + innerHeight + ")")
	var xAxisLabel = xAxisG.append("text")
	.style("text-anchor", "middle")
	.attr("x", innerWidth / 2)
	.attr("y", xAxisLabelOffset)
	.attr("class", "label");


	var yAxisG = g.append("g")
	.attr("class", "y axis");

	var xScale = d3.scale.linear().range( [0, innerWidth]);
	var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding);

	var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
	.ticks(5) // Use approximately 5 ticks marks.
	.tickFormat(d3.format("s")) // Use intelligent abbreviations, e.g. 5M for 5 Million
	.outerTickSize(0); // Turn off the marks at the end of the axis.
	var yAxis = d3.svg.axis().scale(yScale).orient("left")
	.outerTickSize(0); // Turn off the marks at the end of the axis.

	xScale.domain([0, 20]);


	function render(data){

	var numberOfRows = data.length

	if (numberOfRows === 1) {
	xAxisLabel.attr('opacity', 0);
	xAxisG.attr('opacity', 0);
	} else {
	xAxisLabel.attr('opacity', 1);
	xAxisG.attr('opacity', 1);
	}

	console.log(numberOfRows);

	yScale.domain(data.map( function (d){ return d[yColumn]; }));

	xAxisG.call(xAxis);

	yAxisG.transition().duration(1500).ease("sin-in-out")
	.call(yAxis);

	xAxisLabel.text(xAxisLabelText);

	var bars = g.selectAll("rect").data(data);
	var newBars = bars.enter().append('rect')
	.attr('class', 'bar')
	.attr('opacity', 0)
	.attr("x", 0)
	.attr("y", function (d){ return yScale(d[yColumn]);})
	.attr("height", yScale.rangeBand())
	.style('fill', "#41ae76");

	bars.transition().duration(1000)
	.attr("width", function (d){ return xScale(d[xColumn]); })
	.attr("y", function (d){ return yScale(d[yColumn]); })
	.attr("height", yScale.rangeBand())
	.attr('opacity', 1);

	bars.exit().transition()
	.attr("width", 0)
	.attr('opacity', 0).remove();
	}


	function typeH(d){
	d.value = +d.value;
	return d;
	}



	d3.select("#first")
	.on("click", function() {
	d3.csv("year2013.csv", typeH, render);
	});

	d3.select("#second")
	.on("click", function() {
	d3.csv("year2014.csv", typeH, render);
	});
	d3.select("#third")
	.on("click", function() {
	d3.csv("year2015.csv", typeH, render);
	});


	</script>
	</body>
	</html>
	value	name
	10	UK
	9	Switzerland
	4	Croatia
	4	Germany
	3	Netherlands
	3	CzechRepublic
	2	Spain
	1	USA
	1	Macedonia
	1	Denmark
	1	Romania
	1	Greece
	1	Serbia
	1	Norway
	1	Slovakia
	1	Poland
	1	France