Create a Bar Chart

Built with blockbuilder.org

forked from jbelmont's block: Create a Bar Chart

<!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>

https://d3js.org/d3.v4.min.js