munkyboy/.block

## .block
height: 930
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    blerg

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

body {
  font: 10px sans-serif;
}

.bar rect {
  fill: steelblue;
}

.bar text.value {
  fill: white;
}

.axis {
  shape-rendering: crispEdges;
}

.axis path {
  fill: none;
}

.x.axis line {
  stroke: #fff;
  stroke-opacity: .8;
}

.y.axis path {
  stroke: black;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var m = [30, 10, 10, 30],
    w = 960 - m[1] - m[3],
    h = 930 - m[0] - m[2];

var format = d3.format(",.0f");

var x = d3.scale.linear().range([0, w]),
    y = d3.scale.ordinal().rangeRoundBands([0, h], .1);

var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h),
    yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);

var svg = d3.select("body").append("svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

d3.csv("sample-data.csv", function(error, data) {
  if (error) throw error;

  // Parse numbers, and sort by value.
  data.forEach(function(d) { d.value = +d.value; });
  data.sort(function(a, b) { return b.value - a.value; });

  // Set the scale domain.
  x.domain([0, d3.max(data, function(d) { return d.value; })]);
  y.domain(data.map(function(d) { return d.name; }));

  var bar = svg.selectAll("g.bar")
      .data(data)
    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });

  bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .attr("height", y.rangeBand());

  bar.append("text")
      .attr("class", "value")
      .attr("x", function(d) { return x(d.value); })
      .attr("y", y.rangeBand() / 2)
      .attr("dx", -3)
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .text(function(d) { return format(d.value); });

  svg.append("g")
      .attr("class", "x axis")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
});

</script>

## sample-data.csv

          
            name
            value

            
              1
              4

            
              9
              16

            
              13
              24

            
              17
              33

            
              19
              64

            
              21
              18

            
              53
              17219

            
              68
              12

            
              69
              2

            
              74
              2

            
              80
              2

            
              88
              26

            
              111
              614

            
              121
              8

            
              123
              10553

            
              135
              16

            
              137
              5615

            
              138
              4

            
              161
              5028

            
              162
              69

            
              371
              396

            
              389
              4582

            
              427
              14

            
              443
              166

            
              445
              46

            
              455
              2

            
              456
              2

            
              485
              2

            
              500
              2

            
              514
              4

            
              517
              6

            
              518
              41

            
              520
              170

            
              583
              2

            
              623
              20

            
              635
              14

            
              747
              2

            
              785
              2

            
              902
              4

            
              912
              2

            
              1011
              6

            
              1015
              8

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

	body {
	font: 10px sans-serif;
	}

	.bar rect {
	fill: steelblue;
	}

	.bar text.value {
	fill: white;
	}

	.axis {
	shape-rendering: crispEdges;
	}

	.axis path {
	fill: none;
	}

	.x.axis line {
	stroke: #fff;
	stroke-opacity: .8;
	}

	.y.axis path {
	stroke: black;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var m = [30, 10, 10, 30],
	w = 960 - m[1] - m[3],
	h = 930 - m[0] - m[2];

	var format = d3.format(",.0f");

	var x = d3.scale.linear().range([0, w]),
	y = d3.scale.ordinal().rangeRoundBands([0, h], .1);

	var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h),
	yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);

	var svg = d3.select("body").append("svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	d3.csv("sample-data.csv", function(error, data) {
	if (error) throw error;

	// Parse numbers, and sort by value.
	data.forEach(function(d) { d.value = +d.value; });
	data.sort(function(a, b) { return b.value - a.value; });

	// Set the scale domain.
	x.domain([0, d3.max(data, function(d) { return d.value; })]);
	y.domain(data.map(function(d) { return d.name; }));

	var bar = svg.selectAll("g.bar")
	.data(data)
	.enter().append("g")
	.attr("class", "bar")
	.attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });

	bar.append("rect")
	.attr("width", function(d) { return x(d.value); })
	.attr("height", y.rangeBand());

	bar.append("text")
	.attr("class", "value")
	.attr("x", function(d) { return x(d.value); })
	.attr("y", y.rangeBand() / 2)
	.attr("dx", -3)
	.attr("dy", ".35em")
	.attr("text-anchor", "end")
	.text(function(d) { return format(d.value); });

	svg.append("g")
	.attr("class", "x axis")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);
	});

	</script>
	name	value
	1	4
	9	16
	13	24
	17	33
	19	64
	21	18
	53	17219
	68	12
	69	2
	74	2
	80	2
	88	26
	111	614
	121	8
	123	10553
	135	16
	137	5615
	138	4
	161	5028
	162	69
	371	396
	389	4582
	427	14
	443	166
	445	46
	455	2
	456	2
	485	2
	500	2
	514	4
	517	6
	518	41
	520	170
	583	2
	623	20
	635	14
	747	2
	785	2
	902	4
	912	2
	1011	6
	1015	8
	1023	2