tomepejo/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Basic Donut Chart</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="chart" class="chart-container" />
	  <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js'></script>
	  <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
    <script src="index.js"></script>
</body>
</html>

## index.js
var dataset = [
  { name: 'Residential', value: 0.391, absolute: 391000 },
  { name: 'Office', value: 0.3251, absolute: 325100 },
  { name: 'Retail', value: 0.1368, absolute: 136800 },
  { name: 'Craft / Industry', value: 0.0871, absolute: 87100 },
  { name: 'Others', value: 0.0601, absolute: 60100 }
];

//var color = d3.scale.category10();
var color = d3.scale.ordinal()
.domain(["Residential", "Office", "Retail", "Craft / Industry", "Others"])
.range(["#EA4424", "#008DD2", "#00A859", "#FDBA02", "#565656"]);

var w=300,h=300;
var outerRadius=w/2;
var innerRadius=100;

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

var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([0, 0])
.html(function(d) {
  return d.name + ": <span style='color:orangered'>" + d.value + "</span>";
});

var arc=d3.svg.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius);

var svg=d3.select("#chart")
.append("svg")
.attr({
  width:w+400+100,
  height:h+50,
})
.append('g')
.attr({
  transform:'translate('+(w/2+50)+','+(h/2+25)+')'
});

svg.call(tip);

var pathAnim = function(path, dir) {
  switch(dir) {
    case 0:
      path.transition()
        .duration(500)
        .ease('bounce')
        .attr('d', d3.svg.arc()
              .innerRadius(innerRadius)
              .outerRadius(outerRadius * 1.08)
             );
      break;

    case 1:
      path.transition()
        .attr('d', d3.svg.arc()
              .innerRadius(innerRadius)
              .outerRadius(outerRadius)
             );
      break;
  }
}

var path=svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr({
  d:arc,
  fill:function(d){
    return color(d.data.name);
  }
})
.on('mouseover', function(d,i,j){
  pathAnim(d3.select(this),0);
  //tip.show(d,i,j);
  d3.select('.usetype').text(dataset[i].name);
  d3.select('.absolute').text(d3.format(",.0f")(dataset[i].absolute));
  d3.select('.relative').text(d3.format(".1%")(dataset[i].value));
})
.on('mouseout', function(d,i,j) {
  pathAnim(d3.select(this),1);
  //tip.hide(d,i,j);
  d3.select('.usetype').text('');
  d3.select('.absolute').text('');
  d3.select('.relative').text('');
});

var chartTitle = svg.append("svg:text")
.attr("class", "chart-title")
.attr("dy", "-0.5em")
.attr("text-anchor", "middle")
.text("Market rent");

var usetype = svg.append("svg:text")
.attr('class', 'usetype')
.attr("text-anchor", "middle")
.attr("dy", "-0.5em")
.attr("x", 0)
.attr("y", 20)
.text('');

var usetypeRelative = svg.append("svg:text")
.attr('class', 'relative')
.attr("text-anchor", "middle")
.attr("dy", "-0.5em")
.attr("x", 0)
.attr("y", 60)
.text('');

var usetypeAbsolute = svg.append("svg:text")
.attr('class', 'absolute')
.attr("text-anchor", "middle")
.attr("dy", "-0.5em")
.attr("x", 0)
.attr("y", 40)
.text('');

path.transition()
  .duration(1000)
  .attrTween('d', function(d) {
  var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d);
  return function(t) {
    return arc(interpolate(t));
  };
});

var restOfTheData=function(){
  var text=svg.selectAll('.label')
  .data(pie(dataset))
  .enter()
  .append("text")
  .attr("class", "label")
  .transition()
  .duration(200)
  .attr("transform", function (d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("dy", ".4em")
  .attr("text-anchor", "middle")
  .text(function(d){
    return d3.format(".1%")(d.data.value);
  })
  .style({
    fill:'#fff',
    'font-size':'14px'
  });

  var legendRectSize=20;
  var legendSpacing=7;
  var legendHeight=legendRectSize+legendSpacing;

  var legend=svg.selectAll('.legend')
  .data(color.domain())
  .enter()
  .append('g')
  .attr({
    class:'legend',
    transform:function(d,i){
      //Just a calculation for x & y position
      return 'translate(200,' + ((i*legendHeight)-65) + ')';
    }
  });
  legend.append('rect')
    .attr({
    width:legendRectSize,
    height:legendRectSize,
    rx:0,
    ry:0
  })
    .style({
    fill:color,
    stroke:color
  });

  legend.append('text')
    .attr({
    x:30,
    y:15
  })
    .text(function(d){
    return d;
  }).style({
    fill:'#929DAF',
    'font-size':'14px'
  });
};

setTimeout(restOfTheData,1000);

## style.css
body {
    background-color: #fff;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}

.chart-container{
    padding:25px;
}

.chart-title {
  line-height: 1;
  font-weight: bold;
  font-size: 150%;
}

.usetype {
  line-height: 1;
  font-weight: bold;
  font-size: 110%;
  fill: #999;
}

.absolute {
  line-height: 1;
  font-weight: bold;
  font-size: 100%;
  fill: #999;
}

.relative {
  line-height: 1;
  font-weight: bold;
  font-size: 100%;
  fill: #999;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
	<!DOCTYPE html>
	<html >
	<head>
	<meta charset="UTF-8">
	<title>Basic Donut Chart</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<div id="chart" class="chart-container" />
	<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js'></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	var dataset = [
	{ name: 'Residential', value: 0.391, absolute: 391000 },
	{ name: 'Office', value: 0.3251, absolute: 325100 },
	{ name: 'Retail', value: 0.1368, absolute: 136800 },
	{ name: 'Craft / Industry', value: 0.0871, absolute: 87100 },
	{ name: 'Others', value: 0.0601, absolute: 60100 }
	];

	//var color = d3.scale.category10();
	var color = d3.scale.ordinal()
	.domain(["Residential", "Office", "Retail", "Craft / Industry", "Others"])
	.range(["#EA4424", "#008DD2", "#00A859", "#FDBA02", "#565656"]);

	var w=300,h=300;
	var outerRadius=w/2;
	var innerRadius=100;

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

	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([0, 0])
	.html(function(d) {
	return d.name + ": <span style='color:orangered'>" + d.value + "</span>";
	});

	var arc=d3.svg.arc()
	.outerRadius(outerRadius)
	.innerRadius(innerRadius);

	var svg=d3.select("#chart")
	.append("svg")
	.attr({
	width:w+400+100,
	height:h+50,
	})
	.append('g')
	.attr({
	transform:'translate('+(w/2+50)+','+(h/2+25)+')'
	});

	svg.call(tip);

	var pathAnim = function(path, dir) {
	switch(dir) {
	case 0:
	path.transition()
	.duration(500)
	.ease('bounce')
	.attr('d', d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius * 1.08)
	);
	break;

	case 1:
	path.transition()
	.attr('d', d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius)
	);
	break;
	}
	}

	var path=svg.selectAll('path')
	.data(pie(dataset))
	.enter()
	.append('path')
	.attr({
	d:arc,
	fill:function(d){
	return color(d.data.name);
	}
	})
	.on('mouseover', function(d,i,j){
	pathAnim(d3.select(this),0);
	//tip.show(d,i,j);
	d3.select('.usetype').text(dataset[i].name);
	d3.select('.absolute').text(d3.format(",.0f")(dataset[i].absolute));
	d3.select('.relative').text(d3.format(".1%")(dataset[i].value));
	})
	.on('mouseout', function(d,i,j) {
	pathAnim(d3.select(this),1);
	//tip.hide(d,i,j);
	d3.select('.usetype').text('');
	d3.select('.absolute').text('');
	d3.select('.relative').text('');
	});

	var chartTitle = svg.append("svg:text")
	.attr("class", "chart-title")
	.attr("dy", "-0.5em")
	.attr("text-anchor", "middle")
	.text("Market rent");

	var usetype = svg.append("svg:text")
	.attr('class', 'usetype')
	.attr("text-anchor", "middle")
	.attr("dy", "-0.5em")
	.attr("x", 0)
	.attr("y", 20)
	.text('');

	var usetypeRelative = svg.append("svg:text")
	.attr('class', 'relative')
	.attr("text-anchor", "middle")
	.attr("dy", "-0.5em")
	.attr("x", 0)
	.attr("y", 60)
	.text('');

	var usetypeAbsolute = svg.append("svg:text")
	.attr('class', 'absolute')
	.attr("text-anchor", "middle")
	.attr("dy", "-0.5em")
	.attr("x", 0)
	.attr("y", 40)
	.text('');

	path.transition()
	.duration(1000)
	.attrTween('d', function(d) {
	var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d);
	return function(t) {
	return arc(interpolate(t));
	};
	});

	var restOfTheData=function(){
	var text=svg.selectAll('.label')
	.data(pie(dataset))
	.enter()
	.append("text")
	.attr("class", "label")
	.transition()
	.duration(200)
	.attr("transform", function (d) {
	return "translate(" + arc.centroid(d) + ")";
	})
	.attr("dy", ".4em")
	.attr("text-anchor", "middle")
	.text(function(d){
	return d3.format(".1%")(d.data.value);
	})
	.style({
	fill:'#fff',
	'font-size':'14px'
	});

	var legendRectSize=20;
	var legendSpacing=7;
	var legendHeight=legendRectSize+legendSpacing;

	var legend=svg.selectAll('.legend')
	.data(color.domain())
	.enter()
	.append('g')
	.attr({
	class:'legend',
	transform:function(d,i){
	//Just a calculation for x & y position
	return 'translate(200,' + ((i*legendHeight)-65) + ')';
	}
	});
	legend.append('rect')
	.attr({
	width:legendRectSize,
	height:legendRectSize,
	rx:0,
	ry:0
	})
	.style({
	fill:color,
	stroke:color
	});

	legend.append('text')
	.attr({
	x:30,
	y:15
	})
	.text(function(d){
	return d;
	}).style({
	fill:'#929DAF',
	'font-size':'14px'
	});
	};

	setTimeout(restOfTheData,1000);
	body {
	background-color: #fff;
	width: 100%;
	font-family: 'Roboto', sans-serif;
	height: 100%;
	}

	.chart-container{
	padding:25px;
	}

	.chart-title {
	line-height: 1;
	font-weight: bold;
	font-size: 150%;
	}

	.usetype {
	line-height: 1;
	font-weight: bold;
	font-size: 110%;
	fill: #999;
	}

	.absolute {
	line-height: 1;
	font-weight: bold;
	font-size: 100%;
	fill: #999;
	}

	.relative {
	line-height: 1;
	font-weight: bold;
	font-size: 100%;
	fill: #999;
	}
	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	}

	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}

	/* Style northward tooltips differently */
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}