localpcguy/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Test SVG chart with scrubber
Built with blockbuilder.org

  
## data.tsv

          
            letter
            frequency

            
              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>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #nav .data {
      fill: lightgrey;
      stroke-width: 0px;
		}

		#nav .line {
      fill: none;
      stroke: black;
      stroke-width: 1px;
		}

    #nav .bar,
    #nav .circle {
      fill: grey;
    }

    #nav .viewport {
    	stroke: grey;
    	fill: black;
    	fill-opacity: 0.2;
		}
  </style>
</head>

<body>
  <svg id="bar" width="600" height="400"></svg>
  <svg id="nav" width="600" height="80"></svg>

  <script>
		var svg = d3.select("#bar");
    var margin = {top: 60, right: 10, bottom: 30, left: 50};
    var width = +svg.attr("width") - margin.left - margin.right;
    var height = +svg.attr("height") - margin.top - margin.bottom;

    var data = [
      {"date":"2017-05-25","value":0.78},
      {"date":"2017-05-26","value":0.37},
      {"date":"2017-05-29","value":0.01},
      {"date":"2017-05-30","value":0.53},
      {"date":"2017-05-31","value":1.00},
      {"date":"2017-04-25","value":0.78},
      {"date":"2017-04-26","value":0.37},
      {"date":"2017-04-29","value":0.01},
      {"date":"2017-04-30","value":0.53},
      {"date":"2017-05-01","value":1.00},
      {"date":"2017-03-25","value":0.78},
      {"date":"2017-03-26","value":0.37},
      {"date":"2017-03-29","value":0.01},
      {"date":"2017-03-30","value":0.53},
      {"date":"2017-03-31","value":1.00},
      {"date":"2017-02-25","value":0.78},
      {"date":"2017-02-26","value":0.37},
      {"date":"2017-01-29","value":0.01},
      {"date":"2017-01-30","value":0.53},
      {"date":"2017-01-31","value":1.00}
    ];

    data = data.map(d => {
      d.realDate = new Date(d.date);
      return d;
    }).sort((a, b) => a.realDate - b.realDate);

    var x = redrawChart();

    var y = d3.scaleLinear()
      .rangeRound([height, 0])
      .domain([0, 1]);

		var g = svg.append("g")
    	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    drawXAxis(g);

    g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, "%"))
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end");

    g.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", d => x(d.date.substring(6)))
      .attr("y", d => y(d.value))
      .attr("width", x.bandwidth())
      .attr("height", d => height - y(d.value));

    var navSvg = d3.select("#nav");
    var navMargin = {top: 10, right: 10, bottom: 30, left: 50};
    var navWidth = +navSvg.attr("width") - navMargin.left - navMargin.right;
    var navHeight = +navSvg.attr("height") - navMargin.top - navMargin.bottom;

    var navG = navSvg.append('g')
      .attr('transform', 'translate(' + navMargin.left + ',' + navMargin.top + ')');

    var navXScale = d3.scaleBand()
      .rangeRound([0, navWidth])
      .domain(data.map(d => d.date.substring(6)))
      .padding(0.1);

    // data.map(d => d.date.substring(6))

    var navYScale = d3.scaleLinear()
      .rangeRound([navHeight, 0])
      .domain([0, 1]);

    navG.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + navHeight + ")")
      .call(d3.axisBottom(navXScale))
      .append("text");

    var navData = d3.area()
      .x(d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2)
      .y(d => navYScale(d.value))
      .y1(navHeight);

		var navLine = d3.line()
      .x(d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2)
      .y(d => navYScale(d.value));


    navG.append('path')
        .attr('class', 'data')
        .attr('d', navData(data));

    navG.append('path')
        .attr('class', 'line')
        .attr('d', navLine(data));

    navG.selectAll(".circle")
      .data(data)
      .enter().append("circle")
      .attr("class", "circle")
      .attr("cx", d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2)
      .attr("cy", d => navYScale(d.value))
      .attr("r", 3)
      .attr("width", navXScale.bandwidth())
      .attr("height", d => navHeight - navYScale(d.value));

    navG.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", d => navXScale(d.date.substring(6)))
      .attr("y", d => navYScale(d.value))
      .attr("width", navXScale.bandwidth())
      .attr("height", d => navHeight - navYScale(d.value));


//     var viewport = d3.brush()
//     	.on("brush", brushHandler);

//     function brushHandler() {
//       var selection = d3.event.selection;
//       navXScale.domain(selection ? navXScale.domain() : viewport.extent());
// //       debugger;
//       x = redrawChart(null, g);
//     }

//     navG.append('g')
//     	.attr('class', 'brush')
//     	.call(viewport);

    function redrawChart(domain, g) {
      var _domain = domain || data.map(d => d.date.substring(6));

      x = d3.scaleBand()
      .rangeRound([0, width])
      .domain(_domain).padding(0.1);

//       debugger;
//       drawXAxis(g);

      return x;
		}

    function drawXAxis(g) {
      g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .append("text");
    }

  </script>
</body>
	letter	frequency
	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>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	#nav .data {
	fill: lightgrey;
	stroke-width: 0px;
	}

	#nav .line {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	}

	#nav .bar,
	#nav .circle {
	fill: grey;
	}

	#nav .viewport {
	stroke: grey;
	fill: black;
	fill-opacity: 0.2;
	}
	</style>
	</head>

	<body>
	<svg id="bar" width="600" height="400"></svg>
	<svg id="nav" width="600" height="80"></svg>

	<script>
	var svg = d3.select("#bar");
	var margin = {top: 60, right: 10, bottom: 30, left: 50};
	var width = +svg.attr("width") - margin.left - margin.right;
	var height = +svg.attr("height") - margin.top - margin.bottom;

	var data = [
	{"date":"2017-05-25","value":0.78},
	{"date":"2017-05-26","value":0.37},
	{"date":"2017-05-29","value":0.01},
	{"date":"2017-05-30","value":0.53},
	{"date":"2017-05-31","value":1.00},
	{"date":"2017-04-25","value":0.78},
	{"date":"2017-04-26","value":0.37},
	{"date":"2017-04-29","value":0.01},
	{"date":"2017-04-30","value":0.53},
	{"date":"2017-05-01","value":1.00},
	{"date":"2017-03-25","value":0.78},
	{"date":"2017-03-26","value":0.37},
	{"date":"2017-03-29","value":0.01},
	{"date":"2017-03-30","value":0.53},
	{"date":"2017-03-31","value":1.00},
	{"date":"2017-02-25","value":0.78},
	{"date":"2017-02-26","value":0.37},
	{"date":"2017-01-29","value":0.01},
	{"date":"2017-01-30","value":0.53},
	{"date":"2017-01-31","value":1.00}
	];

	data = data.map(d => {
	d.realDate = new Date(d.date);
	return d;
	}).sort((a, b) => a.realDate - b.realDate);

	var x = redrawChart();

	var y = d3.scaleLinear()
	.rangeRound([height, 0])
	.domain([0, 1]);

	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	drawXAxis(g);

	g.append("g")
	.attr("class", "axis axis--y")
	.call(d3.axisLeft(y).ticks(10, "%"))
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end");

	g.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", d => x(d.date.substring(6)))
	.attr("y", d => y(d.value))
	.attr("width", x.bandwidth())
	.attr("height", d => height - y(d.value));

	var navSvg = d3.select("#nav");
	var navMargin = {top: 10, right: 10, bottom: 30, left: 50};
	var navWidth = +navSvg.attr("width") - navMargin.left - navMargin.right;
	var navHeight = +navSvg.attr("height") - navMargin.top - navMargin.bottom;

	var navG = navSvg.append('g')
	.attr('transform', 'translate(' + navMargin.left + ',' + navMargin.top + ')');

	var navXScale = d3.scaleBand()
	.rangeRound([0, navWidth])
	.domain(data.map(d => d.date.substring(6)))
	.padding(0.1);

	// data.map(d => d.date.substring(6))

	var navYScale = d3.scaleLinear()
	.rangeRound([navHeight, 0])
	.domain([0, 1]);

	navG.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + navHeight + ")")
	.call(d3.axisBottom(navXScale))
	.append("text");

	var navData = d3.area()
	.x(d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2)
	.y(d => navYScale(d.value))
	.y1(navHeight);

	var navLine = d3.line()
	.x(d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2)
	.y(d => navYScale(d.value));


	navG.append('path')
	.attr('class', 'data')
	.attr('d', navData(data));

	navG.append('path')
	.attr('class', 'line')
	.attr('d', navLine(data));

	navG.selectAll(".circle")
	.data(data)
	.enter().append("circle")
	.attr("class", "circle")
	.attr("cx", d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2)
	.attr("cy", d => navYScale(d.value))
	.attr("r", 3)
	.attr("width", navXScale.bandwidth())
	.attr("height", d => navHeight - navYScale(d.value));

	navG.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", d => navXScale(d.date.substring(6)))
	.attr("y", d => navYScale(d.value))
	.attr("width", navXScale.bandwidth())
	.attr("height", d => navHeight - navYScale(d.value));


	// var viewport = d3.brush()
	// .on("brush", brushHandler);

	// function brushHandler() {
	// var selection = d3.event.selection;
	// navXScale.domain(selection ? navXScale.domain() : viewport.extent());
	// // debugger;
	// x = redrawChart(null, g);
	// }

	// navG.append('g')
	// .attr('class', 'brush')
	// .call(viewport);

	function redrawChart(domain, g) {
	var _domain = domain \|\| data.map(d => d.date.substring(6));

	x = d3.scaleBand()
	.rangeRound([0, width])
	.domain(_domain).padding(0.1);

	// debugger;
	// drawXAxis(g);

	return x;
	}

	function drawXAxis(g) {
	g.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x))
	.append("text");
	}

	</script>
	</body>