Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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
like image 540
bencampbell_14 Avatar asked Nov 10 '17 11:11

bencampbell_14


1 Answers

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>
like image 194
Gerardo Furtado Avatar answered Nov 12 '22 05:11

Gerardo Furtado