pierreelliott/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from aurelient's block: barchart_letters

  
## data.csv

          
            letter
            frequency
            weight

            
              A
              0.08167
              132

            
              B
              0.01492
              232

            
              C
              0.02782
              23

            
              D
              0.04253
              144

            
              E
              0.12702
              88

            
              F
              0.02288
              143

            
              G
              0.02015
              76

            
              H
              0.06094
              34

            
              I
              0.06966
              6

            
              J
              0.00153
              56

            
              K
              0.00772
              93

            
              L
              0.04025
              22

            
              M
              0.02406
              128

            
              N
              0.06749
              13

            
              O
              0.07507
              94

            
              P
              0.01929
              67

            
              Q
              0.00095
              95

            
              R
              0.05987
              46

            
              S
              0.06327
              12

            
              T
              0.09056
              71

            
              U
              0.02758
              29

            
              V
              0.00978
              129

            
              W
              0.0236
              99

            
              X
              0.0015
              14

            
              Y
              0.01974
              19

            
              Z
              0.00074
              201

## frequencesLettreFrance.csv

          
            letter
            frequency

            
              a
               0.0711

            
              b
               0.0114

            
              c
               0.0318

            
              d
               0.0367

            
              e
               0.1210

            
              f
               0.0111

            
              g
               0.0123

            
              h
               0.0111

            
              i
               0.0659

            
              j
               0.0034

            
              k
               0.0029

            
              l
               0.0496

            
              m
               0.0262

            
              n
               0.0639

            
              o
               0.0502

            
              p
               0.0249

            
              q
               0.0065

            
              r
               0.0607

            
              s
               0.0651

            
              t
               0.0592

            
              u
               0.0449

            
              v
               0.0111

            
              w
               0.0017

            
              x
               0.0038

            
              y
               0.0046

            
              z
               0.0015

## index.html
<!DOCTYPE html>
<head>

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

  <style>
    .marges {
      margin: 2vh 2vw;
    }

    h1 {
      margin: 0px 0px 15px 20px;
      font-family: 'Arial';
    }

    .bar {
      fill: steelblue;
    }

    .bar:hover {
      fill: blue;
    }

    .label {
      fill: black;
      font: 10px sans-serif;
    }

    .y path, .y stroke, .y line {
      display: none;
    }

    .x path, .x stroke {
      display: none;
    }

  </style>

</head>
<h1>Frequency of Letters Used in the English Language</h1>
<body>

  <div class="marges">
    <label for="filter-dropdown">Tri :</label>
    <select id="filter-dropdown">
      <option selected value="frequency">Fréquence</option>
      <option value="letter">Alphabétique</option>
      <option value="weight">Poids</option>
    </select>
  </div>

  <script>

    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40,
      	column: 10
      };
    var width = 960 - margin.left - margin.right;
    var height = 400 - margin.top - margin.bottom;

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      	.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Pour simplifier l'utilisation des similarités entre les graphes des langues
    function createLang(lang, pos) {
      function f() { return lang }
      if(pos == 1) {
        f.x = 0;
        f.xrange = [0, width/2 - margin.column];
        f.transform = "translate(0,0)";
      } else {
        f.x = width/2 + margin.column;
        f.xrange = [width/2 + margin.column, width];
        f.transform = `translate(${width/2+margin.column}, 0)`;
      }

      return f;
    }

    d3.csv("data.csv").then(function(data) {
      var en = createLang("en", 1);
      langGraph(data, en)
    });

    d3.csv("frequencesLettreFrance.csv").then(function(data) {
      var fr = createLang("fr", 2);
      langGraph(data, fr)
    })

    function langGraph(data, lang) {
      var xe = d3.scaleLinear()
      	.range(lang.xrange);

      var ye = d3.scaleBand()
        .range([height, 0]);

      var xeAxis = d3.axisTop(xe)
        .ticks(10, "%");

      var yeAxis = d3.axisLeft(ye);

      data.sort((a, b) => a.frequency - b.frequency);

      var maxFrequency = d3.max(data, (d) => d.frequency);
      xe.domain([0, maxFrequency]);

      var index = data.map((d) => d.letter.toUpperCase());
      ye.domain(index)
        .paddingInner(0.1);

      svg.append("g")
        .attr("class", `x axis-${lang()}`)
        .attr("transform", `translate(0, -2)`)
        .call(xeAxis);

      if(false) {
      //if(lang() == "en") {
        svg.append("g")
        .attr("class", `y axis-${lang()}`)
        .call(yeAxis);
      } else {
        svg.append("g")
        .attr("class", `y axis-${lang()}`)
        .attr("transform", lang.transform)
        .call(yeAxis);
      }

      var bar = svg.selectAll(`.bar.${lang()}`)
        .data(data)
        .enter().append("rect")
        .attr("class", `bar ${lang()}`)
        .attr("x", lang.x)
        .attr("height", ye.bandwidth())
        .attr("y", function(d) {
          return ye(d.letter.toUpperCase());
        })
        .attr("width", function(d) {
          return xe(d.frequency) - xe(0);
        })
        .on("mouseover", hover)
        .on("mouseout", mouseOut);

      d3.select("select")
        .on(`change.${lang()}`, function(d) {
        	var selected = d3.select("#filter-dropdown").node().value;
        	data.sort((x, y) => {
                return d3.ascending(x[selected], y[selected]);
              });
        	index = data.map((d) => d.letter.toUpperCase());
        	ye.domain(index);

        	bar.transition()
            .duration(750)
            .delay((d, i) => i * 20)
            .attr("y", (d, i) => ye(d.letter.toUpperCase()));

        	yeAxis = d3.axisLeft(ye);
          svg.select(`g.y.axis-${lang()}`)
            .attr("class", `y axis-${lang()}`)
            .call(yeAxis);
      });
    }

    function hover(hoverD) {
      d3.selectAll(".bar")
        .filter((d) => {
          return d.letter.toUpperCase() == hoverD.letter.toUpperCase();
        })
        .style("fill", "#94B8FF");
    }

    function mouseOut() {
      d3.selectAll(".bar")
        .style("fill", "");
    };

  </script>
letter	frequency	weight
A	0.08167	132
B	0.01492	232
C	0.02782	23
D	0.04253	144
E	0.12702	88
F	0.02288	143
G	0.02015	76
H	0.06094	34
I	0.06966	6
J	0.00153	56
K	0.00772	93
L	0.04025	22
M	0.02406	128
N	0.06749	13
O	0.07507	94
P	0.01929	67
Q	0.00095	95
R	0.05987	46
S	0.06327	12
T	0.09056	71
U	0.02758	29
V	0.00978	129
W	0.0236	99
X	0.0015	14
Y	0.01974	19
Z	0.00074	201
	letter	frequency
	a	0.0711
	b	0.0114
	c	0.0318
	d	0.0367
	e	0.1210
	f	0.0111
	g	0.0123
	h	0.0111
	i	0.0659
	j	0.0034
	k	0.0029
	l	0.0496
	m	0.0262
	n	0.0639
	o	0.0502
	p	0.0249
	q	0.0065
	r	0.0607
	s	0.0651
	t	0.0592
	u	0.0449
	v	0.0111
	w	0.0017
	x	0.0038
	y	0.0046
	z	0.0015
	<!DOCTYPE html>
	<head>

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

	<style>
	.marges {
	margin: 2vh 2vw;
	}

	h1 {
	margin: 0px 0px 15px 20px;
	font-family: 'Arial';
	}

	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: blue;
	}

	.label {
	fill: black;
	font: 10px sans-serif;
	}

	.y path, .y stroke, .y line {
	display: none;
	}

	.x path, .x stroke {
	display: none;
	}

	</style>

	</head>
	<h1>Frequency of Letters Used in the English Language</h1>
	<body>

	<div class="marges">
	<label for="filter-dropdown">Tri :</label>
	<select id="filter-dropdown">
	<option selected value="frequency">Fréquence</option>
	<option value="letter">Alphabétique</option>
	<option value="weight">Poids</option>
	</select>
	</div>

	<script>

	var margin = {
	top: 20,
	right: 20,
	bottom: 30,
	left: 40,
	column: 10
	};
	var width = 960 - margin.left - margin.right;
	var height = 400 - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// Pour simplifier l'utilisation des similarités entre les graphes des langues
	function createLang(lang, pos) {
	function f() { return lang }
	if(pos == 1) {
	f.x = 0;
	f.xrange = [0, width/2 - margin.column];
	f.transform = "translate(0,0)";
	} else {
	f.x = width/2 + margin.column;
	f.xrange = [width/2 + margin.column, width];
	f.transform = `translate(${width/2+margin.column}, 0)`;
	}

	return f;
	}

	d3.csv("data.csv").then(function(data) {
	var en = createLang("en", 1);
	langGraph(data, en)
	});

	d3.csv("frequencesLettreFrance.csv").then(function(data) {
	var fr = createLang("fr", 2);
	langGraph(data, fr)
	})

	function langGraph(data, lang) {
	var xe = d3.scaleLinear()
	.range(lang.xrange);

	var ye = d3.scaleBand()
	.range([height, 0]);

	var xeAxis = d3.axisTop(xe)
	.ticks(10, "%");

	var yeAxis = d3.axisLeft(ye);

	data.sort((a, b) => a.frequency - b.frequency);

	var maxFrequency = d3.max(data, (d) => d.frequency);
	xe.domain([0, maxFrequency]);

	var index = data.map((d) => d.letter.toUpperCase());
	ye.domain(index)
	.paddingInner(0.1);

	svg.append("g")
	.attr("class", `x axis-${lang()}`)
	.attr("transform", `translate(0, -2)`)
	.call(xeAxis);

	if(false) {
	//if(lang() == "en") {
	svg.append("g")
	.attr("class", `y axis-${lang()}`)
	.call(yeAxis);
	} else {
	svg.append("g")
	.attr("class", `y axis-${lang()}`)
	.attr("transform", lang.transform)
	.call(yeAxis);
	}

	var bar = svg.selectAll(`.bar.${lang()}`)
	.data(data)
	.enter().append("rect")
	.attr("class", `bar ${lang()}`)
	.attr("x", lang.x)
	.attr("height", ye.bandwidth())
	.attr("y", function(d) {
	return ye(d.letter.toUpperCase());
	})
	.attr("width", function(d) {
	return xe(d.frequency) - xe(0);
	})
	.on("mouseover", hover)
	.on("mouseout", mouseOut);

	d3.select("select")
	.on(`change.${lang()}`, function(d) {
	var selected = d3.select("#filter-dropdown").node().value;
	data.sort((x, y) => {
	return d3.ascending(x[selected], y[selected]);
	});
	index = data.map((d) => d.letter.toUpperCase());
	ye.domain(index);

	bar.transition()
	.duration(750)
	.delay((d, i) => i * 20)
	.attr("y", (d, i) => ye(d.letter.toUpperCase()));

	yeAxis = d3.axisLeft(ye);
	svg.select(`g.y.axis-${lang()}`)
	.attr("class", `y axis-${lang()}`)
	.call(yeAxis);
	});
	}

	function hover(hoverD) {
	d3.selectAll(".bar")
	.filter((d) => {
	return d.letter.toUpperCase() == hoverD.letter.toUpperCase();
	})
	.style("fill", "#94B8FF");
	}

	function mouseOut() {
	d3.selectAll(".bar")
	.style("fill", "");
	};

	</script>