EmbraceLife/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from EmbraceLife's block: 4. barChart3.b.v3

  
## data.tsv

          
            name
            value

            
              A
              .08167

            
              B
              .01492

            
              C
              .02782

            
              D
              .04253

            
              E
              .12702

            
              F
              .02288

            
              G
              .02015

            
              H
              .06094

            
              I
              .06966

            
              J
              .00153

            
              K
              .00772

            
              L
              .04025

            
              M
              .02406

            
              N
              .06749

            
              O
              .07507

            
              P
              .01929

            
              Q
              .00095

            
              R
              .05987

            
              S
              .06327

            
              T
              .09056

            
              U
              .02758

            
              V
              .00978

            
              W
              .02360

            
              X
              .00150

            
              Y
              .01974

            
              Z
              .00074

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


<svg class="chart"></svg>

<style>
.chart rect {
  fill: steelblue;
}

/* text-anchor: start/middle/end; */

.chart text {
  fill: cyan;
  font: 10px sans-serif;
  text-anchor: middle;
}
</style>


<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>


<script>


var width = 960,
    height = 500;

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", height);


var yScale = d3.scaleLinear()
    .range([height, 0]);


// ---- map ordinal data with px on x-axis -------------------
//   1. assign xScale a scaleBand func
//   2. set px-range
//   3. set inner and outer padding input value
//   4. step = bandwidth+paddingInner width
//   5. round all the output values
var xScale = d3.scaleBand().range([0, width]).padding(0.2).round(true);

console.log("default domain-range: ", xScale.domain());
console.log("custom range-range: ", xScale.range());
console.log("custom innerPadding: ", xScale.paddingInner());
console.log("custom outerPadding: ", xScale.paddingOuter());
console.log("Check step = bandwidth+paddingInner: ", xScale.step());
console.log("Check bandWidth: ", xScale.bandwidth());


function type(d) {
  d.value = Math.round(+d.value*1000)/1000; // coerce to number
  return d;
}

/* ---- step 5. load data file into script ---------------------------------------
1. method 1: d3.tsv("data.tsv", type, function(error, data){
									...
									...
									...
					});

2. method 2: d3.tsv("data.tsv")
                  .row(type)
                  .get(function(error, data){});

--------------------------------------------------------------------  */

d3.tsv("data.tsv", type, function(error, data) {


// set ordinal data's range: array of all data elements
  xScale.domain(data.map(function(d) { return d.name; }));


  yScale.domain([0, d3.max(data, function(d) { return d.value; })]);


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


  bar.append("rect")
      .attr("y", function(d) { return yScale(d.value); })
      .attr("height", function(d) { return height - yScale(d.value); })

      .attr("width", xScale.bandwidth());


  bar.append("text")
//   each text's x coord inherit from each g's transform-translate, after translate, each rect's topLeft corner its origin as (0, 0)
      .attr("x", xScale.bandwidth() / 2)
      .attr("y", function(d) { return yScale(d.value) - 10; })
      .attr("dy", "0.5em")// it seems change y position
      .text(function(d) { return d.value; });
});


</script>
	name	value
	A	.08167
	B	.01492
	C	.02782
	D	.04253
	E	.12702
	F	.02288
	G	.02015
	H	.06094
	I	.06966
	J	.00153
	K	.00772
	L	.04025
	M	.02406
	N	.06749
	O	.07507
	P	.01929
	Q	.00095
	R	.05987
	S	.06327
	T	.09056
	U	.02758
	V	.00978
	W	.02360
	X	.00150
	Y	.01974
	Z	.00074
	<!DOCTYPE html>
	<meta charset="utf-8">


	<svg class="chart"></svg>

	<style>
	.chart rect {
	fill: steelblue;
	}

	/* text-anchor: start/middle/end; */

	.chart text {
	fill: cyan;
	font: 10px sans-serif;
	text-anchor: middle;
	}
	</style>


	<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>







	<script>


	var width = 960,
	height = 500;

	var chart = d3.select(".chart")
	.attr("width", width)
	.attr("height", height);


	var yScale = d3.scaleLinear()
	.range([height, 0]);


	// ---- map ordinal data with px on x-axis -------------------
	// 1. assign xScale a scaleBand func
	// 2. set px-range
	// 3. set inner and outer padding input value
	// 4. step = bandwidth+paddingInner width
	// 5. round all the output values
	var xScale = d3.scaleBand().range([0, width]).padding(0.2).round(true);

	console.log("default domain-range: ", xScale.domain());
	console.log("custom range-range: ", xScale.range());
	console.log("custom innerPadding: ", xScale.paddingInner());
	console.log("custom outerPadding: ", xScale.paddingOuter());
	console.log("Check step = bandwidth+paddingInner: ", xScale.step());
	console.log("Check bandWidth: ", xScale.bandwidth());



	function type(d) {
	d.value = Math.round(+d.value*1000)/1000; // coerce to number
	return d;
	}

	/* ---- step 5. load data file into script ---------------------------------------
	1. method 1: d3.tsv("data.tsv", type, function(error, data){
	...
	...
	...
	});

	2. method 2: d3.tsv("data.tsv")
	.row(type)
	.get(function(error, data){});

	-------------------------------------------------------------------- */

	d3.tsv("data.tsv", type, function(error, data) {




	// set ordinal data's range: array of all data elements
	xScale.domain(data.map(function(d) { return d.name; }));


	yScale.domain([0, d3.max(data, function(d) { return d.value; })]);


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



	bar.append("rect")
	.attr("y", function(d) { return yScale(d.value); })
	.attr("height", function(d) { return height - yScale(d.value); })

	.attr("width", xScale.bandwidth());



	bar.append("text")
	// each text's x coord inherit from each g's transform-translate, after translate, each rect's topLeft corner its origin as (0, 0)
	.attr("x", xScale.bandwidth() / 2)
	.attr("y", function(d) { return yScale(d.value) - 10; })
	.attr("dy", "0.5em")// it seems change y position
	.text(function(d) { return d.value; });
	});



	</script>