BruJu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from aurelient's block: barchart_letters
https://blockbuilder.org/BruJu/e2edc9ac66aacc4db1ae2bd3aa485b44

  
## 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
BruJu/e2edc9ac66aacc4db1ae2bd3aa485b44/edit<!DOCTYPE html>

<head>

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

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

        .bar {
            fill: steelblue;
        }

        .hovered {
            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 English and in French</h1>

<body>
    <select id="d3-dropdown">
        <option value="letter">Alphabetical</option>
        <option value="frequency">Frequency in english</option>
        <option value="french_frequency">Frequency in french</option>>
        <option value="mixed_frenquency">Frequency in english / in french</option>
        <option value="weight">Weight</option>
    </select>


    <script>

        var margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 40
        };
        var width = 960 - margin.left - margin.right
        var offset = 20;
        var height = 500 - 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 + ")");

        var x = {
            'frequency': d3.scaleLinear().range([0, width / 2 - offset]),
            'french_frequency': d3.scaleLinear().range([width / 2, width - offset]),
        };


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

        var xAxis = d3.axisTop(x['frequency']).ticks(10, "%");

        var yAxis = d3.axisLeft(y);

        d3.csv("data.csv").then(function (data) {
            d3.csv("frequencesLettreFrance.csv").then(function (french_data) {
                for (i in french_data) {
                    if (i >= 26) break;

                    let l = french_data[i].frequency;
                    data[i]['frequency'] = parseFloat(data[i]['frequency']);
                    data[i]['weight'] = parseFloat(data[i]['weight']);
                    data[i]["french_frequency"] = parseFloat(l.trim());
                    console.log(data[i]);
                }


                console.log(data);

                data.sort(function (a, b) { return d3.descending(a.letter, b.letter); })

                var maxFrequency = d3.max(data, function (d) { return Math.max(d.frequency, d.french_frequency); });


                let iii = 0;
                for (key in x) {
                    x[key].domain([0, maxFrequency]);


                    svg.append("g")
                        .attr("class", "x axis ")
                        .attr("transform", "translate(" + (iii * width / 2) + "," + -2 + ")")
                        .call(xAxis);

                    iii = iii + 1
                }

                y.domain(data.map(function (d) { return d.letter; }))
                    .paddingInner(0.1);


                for (let iii = 0; iii != Object.keys(x).length; ++iii) {

                    svg.append("g")
                        .attr("class", "y axis " + Object.keys(x)[iii])
                        .attr("transform", "translate(" + (iii * width / 2) + "," + 0 + ")")
                        .call(yAxis);
                }


                iii = 0;
                let z = svg.selectAll(".bar")
                    .data(data)
                    .enter();

                let mouse_action = function (newClassification) {
                    return function (d) {
                        svg.selectAll(".bar")
                            .filter(function (dbar) { return d.letter == dbar.letter; })
                            .classed('hovered', newClassification);
                    };
                };


                for (key in x) {

                    z.append("rect")
                        .attr("class", "bar " + key)
                        .attr("x", iii * width / 2)
                        .attr("height", y.bandwidth())
                        .attr("y", function (d) { return y(d.letter); })
                        .attr("width", function (d) { return x['frequency'](d[key]); })
                        .on('mouseover', mouse_action(true))
                        .on('mouseout', mouse_action(false));

                    iii++;
                }

                d3.select("select")
                    .on("change", function (d) {
                        var selected = d3.select("#d3-dropdown").node().value;
                        console.log(selected);
                        d3.select("#selected-dropdown").text(selected);


                        for (let language in x) {
                            console.log(language);

                            data.sort(function (a, b) {
                                if (selected == "letter") {
                                    return d3.descending(a[selected], b[selected]);
                                } else {
                                    let sel = selected;

                                    if (sel == "mixed_frenquency") {
                                        sel = language;

                                    }

                                    return d3.ascending(parseFloat(a[sel]), parseFloat(b[sel]));
                                }

                            });

                            y.domain(data.map(function (d) { return d.letter; }))
                                .paddingInner(0.1);

                            svg.selectAll(".y.axis." + language)
                                .call(yAxis);

                            svg.selectAll(".bar." + language)
                                .attr("y", function (d) { return y(d.letter); })

                                ;
                        }

                    });

            });
        });

    </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
	BruJu/e2edc9ac66aacc4db1ae2bd3aa485b44/edit<!DOCTYPE html>

	<head>

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

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

	.bar {
	fill: steelblue;
	}

	.hovered {
	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 English and in French</h1>

	<body>
	<select id="d3-dropdown">
	<option value="letter">Alphabetical</option>
	<option value="frequency">Frequency in english</option>
	<option value="french_frequency">Frequency in french</option>>
	<option value="mixed_frenquency">Frequency in english / in french</option>
	<option value="weight">Weight</option>
	</select>


	<script>

	var margin = {
	top: 20,
	right: 20,
	bottom: 30,
	left: 40
	};
	var width = 960 - margin.left - margin.right
	var offset = 20;
	var height = 500 - 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 + ")");

	var x = {
	'frequency': d3.scaleLinear().range([0, width / 2 - offset]),
	'french_frequency': d3.scaleLinear().range([width / 2, width - offset]),
	};


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

	var xAxis = d3.axisTop(x['frequency']).ticks(10, "%");

	var yAxis = d3.axisLeft(y);

	d3.csv("data.csv").then(function (data) {
	d3.csv("frequencesLettreFrance.csv").then(function (french_data) {
	for (i in french_data) {
	if (i >= 26) break;

	let l = french_data[i].frequency;
	data[i]['frequency'] = parseFloat(data[i]['frequency']);
	data[i]['weight'] = parseFloat(data[i]['weight']);
	data[i]["french_frequency"] = parseFloat(l.trim());
	console.log(data[i]);
	}


	console.log(data);

	data.sort(function (a, b) { return d3.descending(a.letter, b.letter); })

	var maxFrequency = d3.max(data, function (d) { return Math.max(d.frequency, d.french_frequency); });


	let iii = 0;
	for (key in x) {
	x[key].domain([0, maxFrequency]);


	svg.append("g")
	.attr("class", "x axis ")
	.attr("transform", "translate(" + (iii * width / 2) + "," + -2 + ")")
	.call(xAxis);

	iii = iii + 1
	}

	y.domain(data.map(function (d) { return d.letter; }))
	.paddingInner(0.1);


	for (let iii = 0; iii != Object.keys(x).length; ++iii) {

	svg.append("g")
	.attr("class", "y axis " + Object.keys(x)[iii])
	.attr("transform", "translate(" + (iii * width / 2) + "," + 0 + ")")
	.call(yAxis);
	}



	iii = 0;
	let z = svg.selectAll(".bar")
	.data(data)
	.enter();

	let mouse_action = function (newClassification) {
	return function (d) {
	svg.selectAll(".bar")
	.filter(function (dbar) { return d.letter == dbar.letter; })
	.classed('hovered', newClassification);
	};
	};



	for (key in x) {

	z.append("rect")
	.attr("class", "bar " + key)
	.attr("x", iii * width / 2)
	.attr("height", y.bandwidth())
	.attr("y", function (d) { return y(d.letter); })
	.attr("width", function (d) { return x['frequency'](d[key]); })
	.on('mouseover', mouse_action(true))
	.on('mouseout', mouse_action(false));

	iii++;
	}

	d3.select("select")
	.on("change", function (d) {
	var selected = d3.select("#d3-dropdown").node().value;
	console.log(selected);
	d3.select("#selected-dropdown").text(selected);


	for (let language in x) {
	console.log(language);

	data.sort(function (a, b) {
	if (selected == "letter") {
	return d3.descending(a[selected], b[selected]);
	} else {
	let sel = selected;

	if (sel == "mixed_frenquency") {
	sel = language;

	}

	return d3.ascending(parseFloat(a[sel]), parseFloat(b[sel]));
	}

	});

	y.domain(data.map(function (d) { return d.letter; }))
	.paddingInner(0.1);

	svg.selectAll(".y.axis." + language)
	.call(yAxis);

	svg.selectAll(".bar." + language)
	.attr("y", function (d) { return y(d.letter); })

	;
	}

	});

	});
	});

	</script>