jdutta/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Japanese Fan Chart

Built with blockbuilder.org

  
## chart_data.csv

          
            key
            value

            
              a1
              18

            
              a2
              10

            
              a3
              53

            
              a4
              28

            
              a5
              67

            
              a6
              72

            
              a7
              87

            
              a8
              13

            
              a9
              101

            
              a10
              44

            
              a11
              32

            
              a12
              64

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; font-size: 10px; overflow-y: scroll; }
  </style>
</head>

<body>
  <svg></svg>

  <script src="main.js"></script>
</body>

## main.js
// Quick charting tool for helping with infographics
//
// Japanese fan chart
// values are positive numbers [0, 100].


// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
  innerRadius: 23,
  thicknessRange: [10, 147],
  colorRange: ['#0a88ff', '#004e8e']
};

d3.csv('chart_data.csv', function (json) {
  var data = sanitize(json);
  drawChart(data);
});

function sanitize(data) {
  data.forEach(function (d) {
    if (d.value > 100) {
      d.value = 100;
    }
    if (d.value < 0) {
      d.value = 0;
    }
  })

  data.sort(function (a, b) {
    return (a.value === b.value? 0 : (a.value > b.value ? -1 : 1));
  });
  return data;
}

function drawChart(chartData) {
  var svg = d3.select('svg');
  var gRoot = svg.append('svg:g')
  .attr('transform', 'translate(357, 269)');

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

  var dataSize = chartData.length;
  var PI = 3.1416;
  var segmentAngle = (2 * PI / dataSize);
  var valueDomain = [0, 100];

  var segmentThicknessScale = d3.scale.linear()
  .domain(valueDomain)
  .range(config.thicknessRange);

  var colorScale = d3.scale.linear()
  .domain(valueDomain)
  .interpolate(d3.interpolateRgb)
  .range(config.colorRange);
  var colorScale1 = d3.scale.category20();

  var opacityScale = d3.scale.linear()
  .domain(valueDomain)
  .range([0.5, 1]);

  var g = gRoot.selectAll('g.arc')
  .data(chartData)
  .enter()
  .append('g')
  .attr('class', 'arc');

  g.append('svg:path')
    .attr('d', function (d, i) {
    arc
      .outerRadius(config.innerRadius + segmentThicknessScale(d.value))
      .startAngle(i * segmentAngle)
      .endAngle((i + 1) * segmentAngle);
    return arc();
  })
    .style('fill', function (d) {
    return colorScale(d.value);
  })
    .style('fill-opacity', function (d) {
    return opacityScale(d.value);
  })
    .style('stroke-width', 2)
    .style('stroke-opacity', 0.216)
    .style('stroke', 'white');
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	key	value
	a1	18
	a2	10
	a3	53
	a4	28
	a5	67
	a6	72
	a7	87
	a8	13
	a9	101
	a10	44
	a11	32
	a12	64
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width: 100%; height: 100%; font-size: 10px; overflow-y: scroll; }
	</style>
	</head>

	<body>
	<svg></svg>

	<script src="main.js"></script>
	</body>
	// Quick charting tool for helping with infographics
	//
	// Japanese fan chart
	// values are positive numbers [0, 100].


	// Configurable params
	// Click on the number and see a magic slider appears to tweak it.
	var config = {
	innerRadius: 23,
	thicknessRange: [10, 147],
	colorRange: ['#0a88ff', '#004e8e']
	};

	d3.csv('chart_data.csv', function (json) {
	var data = sanitize(json);
	drawChart(data);
	});

	function sanitize(data) {
	data.forEach(function (d) {
	if (d.value > 100) {
	d.value = 100;
	}
	if (d.value < 0) {
	d.value = 0;
	}
	})

	data.sort(function (a, b) {
	return (a.value === b.value? 0 : (a.value > b.value ? -1 : 1));
	});
	return data;
	}

	function drawChart(chartData) {
	var svg = d3.select('svg');
	var gRoot = svg.append('svg:g')
	.attr('transform', 'translate(357, 269)');

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

	var dataSize = chartData.length;
	var PI = 3.1416;
	var segmentAngle = (2 * PI / dataSize);
	var valueDomain = [0, 100];

	var segmentThicknessScale = d3.scale.linear()
	.domain(valueDomain)
	.range(config.thicknessRange);

	var colorScale = d3.scale.linear()
	.domain(valueDomain)
	.interpolate(d3.interpolateRgb)
	.range(config.colorRange);
	var colorScale1 = d3.scale.category20();

	var opacityScale = d3.scale.linear()
	.domain(valueDomain)
	.range([0.5, 1]);

	var g = gRoot.selectAll('g.arc')
	.data(chartData)
	.enter()
	.append('g')
	.attr('class', 'arc');

	g.append('svg:path')
	.attr('d', function (d, i) {
	arc
	.outerRadius(config.innerRadius + segmentThicknessScale(d.value))
	.startAngle(i * segmentAngle)
	.endAngle((i + 1) * segmentAngle);
	return arc();
	})
	.style('fill', function (d) {
	return colorScale(d.value);
	})
	.style('fill-opacity', function (d) {
	return opacityScale(d.value);
	})
	.style('stroke-width', 2)
	.style('stroke-opacity', 0.216)
	.style('stroke', 'white');
	}