How to animate a d3 js v4 bar chart from bottom(x axis) to up?

Question

Currently, this d3 js bar chart animates from top to bottom. Most likely its because of the way d3js renders its chart which starts from the top. This might be a common issue and might be easy for those who are familiar with the nuisance of d3js, how can I make this animate from bottom to top?

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

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

</style>
<svg width="1260" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

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

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("MRT_MonthlyAve_2014.csv", function(d) {

  d.MonthlyAverage = +d.MonthlyAverage;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.Station; }));
  y.domain([0, d3.max(data, function(d) { return d.MonthlyAverage; })]);

  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(12, "s"))
    .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", function(d) { return x(d.Station); })
    .attr("y", function(d) { return y(d.MonthlyAverage); }) 
    .transition().duration(1000)
    .ease(d3.easeExp)
    .attr("width", x.bandwidth())   
    .attr("height", function(d) { return height - y(d.MonthlyAverage); });
});


</script>

MRT_MonthlyAve_2014.csv

Station,MonthlyAverage
North Avenue,2227081
Quezon Avenue,1018121
GMA,606110
Cubao,1410788
Santolan,260737
Ortigas,561910
Shaw Boulevard,1339020
Boni,631115
Guadalupe,1002740
Buendia,421302
Ayala,1145004
Magallanes,933713
Taft Avenue,2427220

Answer 1

Just set the initial y position to height :

.attr("y", height)

Here is your code with that change only (I'm reducing the height of the SVG, so you can see it working in the small snippet view):

 var csv = `Station,MonthlyAverage North Avenue,2227081 Quezon Avenue,1018121 GMA,606110 Cubao,1410788 Santolan,260737 Ortigas,561910 Shaw Boulevard,1339020 Boni,631115 Guadalupe,1002740 Buendia,421302 Ayala,1145004 Magallanes,933713 Taft Avenue,2427220`; var svg = d3.select("svg"), margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom; var x = d3.scaleBand().rangeRound([0, width]).padding(0.4), y = d3.scaleLinear().rangeRound([height, 0]); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var data = d3.csvParse(csv, function(d) { d.MonthlyAverage = +d.MonthlyAverage; return d; }) x.domain(data.map(function(d) { return d.Station; })); y.domain([0, d3.max(data, function(d) { return d.MonthlyAverage; })]); 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(12, "s")) .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", function(d) { return x(d.Station); }) .attr("y", height) .transition().duration(1000) .ease(d3.easeExp) .attr("y", function(d) { return y(d.MonthlyAverage); }) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.MonthlyAverage); });

 .bar { fill: steelblue; } .bar:hover { fill: brown; } .axis--x path { display: none; }

 <script src="https://d3js.org/d3.v4.min.js"></script> <svg width="1260" height="200"></svg>

How to animate a d3 js v4 bar chart from bottom(x axis) to up?

Question

1 answers

solution1
6 ACCPTED 2017-11-10 11:54:57

How to animate a d3 js v4 bar chart from bottom(x axis) to up?

Question

1 answers

solution1 6 ACCPTED 2017-11-10 11:54:57

solution1
6 ACCPTED 2017-11-10 11:54:57