IPWright83/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Testing a simple bar chart, using a linear scale instead of an ordinal one

  
## data.tsv

          
            letter
            frequency

            
              1
              .08167

            
              2
              .01492

            
              6
              .02288

            
              7
              .02015

            
              8
              .06094

            
              9
              .06966

            
              10
              .00153

            
              11
              .00772

            
              12
              .04025

            
              13
              .02406

            
              14
              .06749

            
              15
              .07507

            
              16
              .01929

            
              17
              .00095

            
              18
              .05987

            
              19
              .06327

            
              20
              .09056

            
              21
              .02758

            
              22
              .00978

            
              23
              .02360

            
              24
              .00150

            
              25
              .01974

            
              26
              .00074

## data2.csv

          
            letter
            frequency

            
              1
              .08167

            
              2
              .01492

            
              3
              .02782

            
              3.2
              .02982

            
              3.4
              .03182

            
              3.6
              .03582

            
              3.8
              .02782

            
              4
              .04253

            
              5
              .02702

            
              6
              .02288

            
              7
              .02015

            
              8
              .06094

            
              9
              .06966

            
              10
              .00153

            
              11
              .00772

            
              12
              .04025

            
              13
              .02406

            
              14
              .06749

            
              15
              .07507

            
              16
              .01929

            
              17
              .00095

            
              18
              .05987

            
              19
              .06327

            
              20
              .09056

            
              21
              .02758

            
              22
              .00978

            
              23
              .02360

            
              24
              .00150

            
              25
              .01974

            
              26
              .00074

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

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis--x path {
  display: none;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
var y = d3.scaleLinear().rangeRound([height, 0]);

x =d3.scaleLinear().rangeRound([0, width]);

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

var formatData = function(d) {
  d.frequency = +d.frequency;
  d.letter = +d.letter;
  return d;
};

d3.tsv("data.tsv", formatData, function(error, data) {
  if (error) throw error;

  x.domain([0, 26]);
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(26));

  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")
      .text("Frequency");

      const barWidth = x(1) * 0.8;// 20;

  g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter) - barWidth/2; })
      .attr("y", function(d) { return y(d.frequency); })
      .attr("width", barWidth)
      .attr("height", function(d) { return height - y(d.frequency); });

d3.csv("data2.csv", formatData, function(error, data) {
    console.log(data);
    var line = d3.line().x(function(d) { return x(d.letter); })
                        .y(function(d){ return y(d.frequency); });

      g.append("path")
       .datum(data)
       .attr("class", "line")
        .attr("fill", "none")
          .attr("stroke", "red")
          .attr("stroke-linejoin", "round")
          .attr("stroke-linecap", "round")
          .attr("stroke-width", 1.5)
       .attr("d", line);
    });

});

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	letter	frequency
	1	.08167
	2	.01492
	6	.02288
	7	.02015
	8	.06094
	9	.06966
	10	.00153
	11	.00772
	12	.04025
	13	.02406
	14	.06749
	15	.07507
	16	.01929
	17	.00095
	18	.05987
	19	.06327
	20	.09056
	21	.02758
	22	.00978
	23	.02360
	24	.00150
	25	.01974
	26	.00074
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: brown;
	}

	.axis--x path {
	display: none;
	}

	</style>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom;

	var x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
	var y = d3.scaleLinear().rangeRound([height, 0]);

	x =d3.scaleLinear().rangeRound([0, width]);

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

	var formatData = function(d) {
	d.frequency = +d.frequency;
	d.letter = +d.letter;
	return d;
	};

	d3.tsv("data.tsv", formatData, function(error, data) {
	if (error) throw error;

	x.domain([0, 26]);
	y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

	g.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x).ticks(26));

	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")
	.text("Frequency");

	const barWidth = x(1) * 0.8;// 20;

	g.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.letter) - barWidth/2; })
	.attr("y", function(d) { return y(d.frequency); })
	.attr("width", barWidth)
	.attr("height", function(d) { return height - y(d.frequency); });

	d3.csv("data2.csv", formatData, function(error, data) {
	console.log(data);
	var line = d3.line().x(function(d) { return x(d.letter); })
	.y(function(d){ return y(d.frequency); });

	g.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("fill", "none")
	.attr("stroke", "red")
	.attr("stroke-linejoin", "round")
	.attr("stroke-linecap", "round")
	.attr("stroke-width", 1.5)
	.attr("d", line);
	});

	});

	</script>