bar_charts_d3code.js

// vertical barchart

var x = d3.scaleBand()
    .domain(mydata.map(d => d.name))
    .range([160, 800])
    .padding(0.3);

var y = d3.scaleLinear()
    .domain([0, 4000])
    .rangeRound([700, 400]);

colChart = REframe.append("g")

colChart
    .selectAll("rect")
    .data(mydata)
    .enter().append("rect")
    .attr("fill", "tomato")
    .attr("width", x.bandwidth())
    .attr("x", function(d) { return x(d.name); })
    .attr("y", function(d) { return y(d.xnumber); })
    .attr("height", function(d) { return y(0) - y(d.xnumber); })

colChart.append("g")
    .attr("transform", "translate(0," + y(0) + ")")
    .call(d3.axisBottom(x));

colChart.append("g")
    .attr("transform", "translate(" + 160 + ",0)")
    .call(d3.axisLeft(y));

// horizontal barchart

var yBar = d3.scaleBand()
    .domain(mydata.map(d => d.name))
    .range([160, 800])
    .padding(0.3);

var xBar = d3.scaleLinear()
    .domain([0, 4000])
    .rangeRound([160, 900]);

barChart = REframe.append("g")
    .attr("transform", "translate(0," + 600 + ")")

barChart
    .selectAll('rect')
    .data(mydata)
  	.enter().append("rect")
	.attr("fill", "green")
 	.attr("x", function(d) { return xBar(0); })
    .attr("y", function(d) { return yBar(d.name); })
    .attr("height", yBar.bandwidth())
	.attr("width", function(d) { return xBar(d.xnumber) - xBar(0); })


barChart.append("g")
    .attr("transform", "translate(160," + 0 + ")")
    .call(d3.axisLeft(yBar));

barChart.append("g")
    .attr("transform", "translate(0," + 800 + ")")
    .call(d3.axisBottom(xBar));