Aquascraper display live!

$.ajax({
url: "https://aquascraper-data.firebaseio.com/"+monthAndYear+"/"+day+".json?callback=processJson&print=pretty",
dataType: "jsonp",
jsonpCallback: "processJson"
});
A very detailed flow chart
var margin = {top: 20, right: 80, bottom: 110, left: 80},
width = getWidthOfGraph('#firstGraph') - margin.left - margin.right,
height = 720 - margin.top - margin.bottom;
// set the ranges, these are funcs that return a number, scaled to a particular domain and range
var x = d3.scaleBand()
.range([0, width]) // provide a range of numbers
.padding(0.1); // provide padding
var y = d3.scaleLinear() // input is domain, output is range
.range([height, 0]);
// Scale the range of the data in the domains
x.domain(statArr.map(function(d) { return d.item; }));
y.domain([0, d3.max(statArr, function(d) { return d.avg; })]);
var svg = d3.select("#firstGraph").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var bars = svg.selectAll(".bar")
.data(statArr) // data is expecting an array, of objects in this case
.enter().append("rect")//add a rectangle for each item in the array
.attr("class", "bar statGraphBar")
.attr("x", function(d) { return x(d.item); })
.attr("width", x.bandwidth())
// set y and height to 0, they will grow in the transition
.attr("y", y(0))
.attr("height", 0);
// Transition for growing the bars upwards
var rect = d3.selectAll("rect");
// add the y position of the rect, the svg canvas is inverse, so if this number is 0, then the graph looks "upside down"
// the y function maps the passed in average number to the domain/range
rect.transition().duration(1500)//ease(d3.easeElastic)
.attr("y", function(d) { return y(d.avg); })
.attr("height", function(d) {return height - y(d.avg); });
Are loaches going for $40 or $35?
// add the x Axis
var xAxis = d3.axisBottom(x);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.style("font-size", "1.2em")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
// add the y Axis
var yAxis = d3.axisLeft(y);
svg.append("g")
.attr("class", "yAxisStatGraph")
.call(yAxis);
Select element for selecting the fishtype

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Taylor Nodell

Taylor Nodell

31 Followers

Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor