jbelmont · September 23, 2017 16:27
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 .bar {
  fill: #4f5cd7;
 }

 .bar:hover {
  fill: #872814;
 }

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

 </style>
 <svg width="960" height="500"></svg>
 <script src="//d3js.org/d3.v4.min.js"></script>
 <script>
  const svg = d3.select("svg");
  const margin = {
        top: 20,
        right: 20, 
        bottom: 30, 
        left: 40
  };
  const width = Number(svg.attr("width")) - margin.left - margin.right;
  const height = Number(svg.attr("height")) - margin.top - margin.bottom;

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

  const g = svg.append("g")
      .attr("transform", `translate(${margin.left},${margin.top})`);

  d3.tsv("languages.tsv", typeConversion, function(error, data) {
    if (error) throw error;
    x.domain(data.map(d => d.language));
    y.domain([0, d3.max(data, d => d.frequency)]);

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", `translate(0,${height})`)
        .call(d3.axisBottom(x));

    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");

    g.selectAll(".bar")
      .data(data)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", d => x(d.language))
        .attr("y", d  => y(d.frequency))
        .attr("width", x.bandwidth())
        .attr("height", d => height - y(d.frequency))
    		.attr("class", "")
    		.attr('fill', d => d.language === 'Italian' ? '#1ac81e' : '#4f5cd7');
  });
  
 function typeConversion(d) {
  d.frequency = Number(d.frequency);
  return d;
 }

 </script>
diff --git a/languages.tsv b/languages.tsv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.bar {
	fill: #4f5cd7;
	}

	.bar:hover {
	fill: #872814;
	}

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

	</style>
	<svg width="960" height="500"></svg>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script>
	const svg = d3.select("svg");
	const margin = {
	top: 20,
	right: 20,
	bottom: 30,
	left: 40
	};
	const width = Number(svg.attr("width")) - margin.left - margin.right;
	const height = Number(svg.attr("height")) - margin.top - margin.bottom;

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

	const g = svg.append("g")
	.attr("transform", `translate(${margin.left},${margin.top})`);

	d3.tsv("languages.tsv", typeConversion, function(error, data) {
	if (error) throw error;
	x.domain(data.map(d => d.language));
	y.domain([0, d3.max(data, d => d.frequency)]);

	g.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", `translate(0,${height})`)
	.call(d3.axisBottom(x));

	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");

	g.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", d => x(d.language))
	.attr("y", d => y(d.frequency))
	.attr("width", x.bandwidth())
	.attr("height", d => height - y(d.frequency))
	.attr("class", "")
	.attr('fill', d => d.language === 'Italian' ? '#1ac81e' : '#4f5cd7');
	});

	function typeConversion(d) {
	d.frequency = Number(d.frequency);
	return d;
	}

	</script>
	language	frequency
	Spanish	0.42
	Portuguese	0.15
	French	0.28
	Italian	0.15
	Romanian	0.05