adamverdin/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from jbelmont's block: Create a Bar Chart

  
## 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('fill', d => d.language === 'Italian' ? '1ac81e' : '#4f5cd7');

  });

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

</script>

## languages.tsv

          
            language
            frequency

            
              Spanish
              0.42

            
              Portuguese
              0.15

            
              French 
              0.28

            
              Italian
              0.15

            
              Romanian
              0.05
	<!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('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