EmbraceLife/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## data.tsv

          
            name
            value

            
              Locke
              4

            
              Reyes
              8

            
              Ford
              15

            
              Jarrah
              16

            
              Shephard
              23

            
              Kwon
              42

## index.html
<!DOCTYPE html>

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


<!-- step 1: create a html/CSS svg
1. give a class name: "chart"
-->

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


<!-- step 2: style for SVG's rect and text
1. fill, font, text-anchor
2. .chart rect
3. .chart text
4. {fill: steelblue;}
5. {font: 10px sans-serif;}
-->

<style>

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}


</style>


<script>


//---- step 3: select svg and set width ---------------
// 1. set variables "width" and "barHeight"
var width = 420,
    barHeight = 20;

// 2. select SVG by className
var chart = d3.select(".chart")
// 		2.1 set width attr
    .attr("width", width);
// check: Elements view


//---- step 4: map data with px on x-axis ----------
// 1. assign "xScale" a scaleLinear func
var xScale = d3.scaleLinear()
// 2. set px-range (data-range as default)
    .range([0, width]);
// 3. Console view: check data-range, px-range, map(0.5) to px
console.log(" data-range: ", xScale.domain(), "\n px-range: ", xScale.range(), "\n test map data(0.5) to px: ", xScale(0.5));


// ---- step 5.0 create row function ---------------
//   1. for each d object
function type(d) {
//   2. assign numeric value back to d.value
  d.value = +d.value;
  return d;
}


// ---- step 5: load tsv data  --------------
//   1. load tsv file
//   2. row(func) to process each row of data
//   3. get(func) let us do things with data

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

// 	 4. Console view:

console.log(" processed data: ", data);
console.log(" length of data: ", data.length);
console.log(" column names of data: ", data.columns);
console.log(" check data.name: ", data.map(function(d){return d.name;}));
console.log(" check data.value:  ", data.map(function(d){return d.value;}));


// ---- step 6: set data range for xScale func -----------------
//   1. set data-range for xScale func
//   2. calc max among all rows of data.value
  xScale.domain([0, d3.max(data, function(d) { return d.value; })]);

// ---- step 7: set height for SVG -----------------
//   1. select SVG using svg variable
//   2. calc SVG height using barHeight and data.length
  chart.attr("height", barHeight * data.length);

// ---- step 8: upon SVG, bind data with g placeholders ---------
//   0. upon SVG
//   1. select all existing g placeholders
   var bar = chart.selectAll("g")
//    							2. bind with data
 							     .data(data)
//    					 3. select all entering NodeList elements
						     .enter()
//    						4. create a g placeholder upon each NodeList elements
   								.append("g")
//    						 5. transform-translate each g at diff position by data row index
                   .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
//   6. assign all g placeholders to var "bar"

// Elements View: see all g placeholders


// ---- step 9: upon each g, create a rect  ------------
//   1. create a rect upon each g placeholder
var rects = bar.append("rect")
//   2. set rect's width using each row's data.value
      .attr("width", function(d) { return xScale(d.value); })
//   3. set rect's height with 1px space
			.attr("height", barHeight - 1);

  // Elements View: see all rects


// ---- step 10: upon each g, create a text
//   0. upon each and all g, inherit g's x,y coord
//   1. create a text
var texts =  bar.append("text")
// 	 2. set text x coord using each row's value - 3
      .attr("x", function(d) { return xScale(d.value) - 3; })
// 	 3. set text y coord
			.attr("y", barHeight / 2)
// 	 4. trial and error "dy"
      .attr("dy", ".35em")
//   5. set label content
      .text(function(d) { return d.value; });

  // Elements View: see all rects
})


</script>
	<!DOCTYPE html>

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


	<!-- step 1: create a html/CSS svg
	1. give a class name: "chart"
	-->

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


	<!-- step 2: style for SVG's rect and text
	1. fill, font, text-anchor
	2. .chart rect
	3. .chart text
	4. {fill: steelblue;}
	5. {font: 10px sans-serif;}
	-->

	<style>

	.chart rect {
	fill: steelblue;
	}

	.chart text {
	fill: white;
	font: 10px sans-serif;
	text-anchor: end;
	}


	</style>




	<script>


	//---- step 3: select svg and set width ---------------
	// 1. set variables "width" and "barHeight"
	var width = 420,
	barHeight = 20;

	// 2. select SVG by className
	var chart = d3.select(".chart")
	// 2.1 set width attr
	.attr("width", width);
	// check: Elements view


	//---- step 4: map data with px on x-axis ----------
	// 1. assign "xScale" a scaleLinear func
	var xScale = d3.scaleLinear()
	// 2. set px-range (data-range as default)
	.range([0, width]);
	// 3. Console view: check data-range, px-range, map(0.5) to px
	console.log(" data-range: ", xScale.domain(), "\n px-range: ", xScale.range(), "\n test map data(0.5) to px: ", xScale(0.5));


	// ---- step 5.0 create row function ---------------
	// 1. for each d object
	function type(d) {
	// 2. assign numeric value back to d.value
	d.value = +d.value;
	return d;
	}


	// ---- step 5: load tsv data --------------
	// 1. load tsv file
	// 2. row(func) to process each row of data
	// 3. get(func) let us do things with data

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

	// 4. Console view:

	console.log(" processed data: ", data);
	console.log(" length of data: ", data.length);
	console.log(" column names of data: ", data.columns);
	console.log(" check data.name: ", data.map(function(d){return d.name;}));
	console.log(" check data.value: ", data.map(function(d){return d.value;}));


	// ---- step 6: set data range for xScale func -----------------
	// 1. set data-range for xScale func
	// 2. calc max among all rows of data.value
	xScale.domain([0, d3.max(data, function(d) { return d.value; })]);

	// ---- step 7: set height for SVG -----------------
	// 1. select SVG using svg variable
	// 2. calc SVG height using barHeight and data.length
	chart.attr("height", barHeight * data.length);

	// ---- step 8: upon SVG, bind data with g placeholders ---------
	// 0. upon SVG
	// 1. select all existing g placeholders
	var bar = chart.selectAll("g")
	// 2. bind with data
	.data(data)
	// 3. select all entering NodeList elements
	.enter()
	// 4. create a g placeholder upon each NodeList elements
	.append("g")
	// 5. transform-translate each g at diff position by data row index
	.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
	// 6. assign all g placeholders to var "bar"

	// Elements View: see all g placeholders



	// ---- step 9: upon each g, create a rect ------------
	// 1. create a rect upon each g placeholder
	var rects = bar.append("rect")
	// 2. set rect's width using each row's data.value
	.attr("width", function(d) { return xScale(d.value); })
	// 3. set rect's height with 1px space
	.attr("height", barHeight - 1);

	// Elements View: see all rects


	// ---- step 10: upon each g, create a text
	// 0. upon each and all g, inherit g's x,y coord
	// 1. create a text
	var texts = bar.append("text")
	// 2. set text x coord using each row's value - 3
	.attr("x", function(d) { return xScale(d.value) - 3; })
	// 3. set text y coord
	.attr("y", barHeight / 2)
	// 4. trial and error "dy"
	.attr("dy", ".35em")
	// 5. set label content
	.text(function(d) { return d.value; });

	// Elements View: see all rects
	})




	</script>