got the barchart set up
This commit is contained in:
@@ -24,14 +24,49 @@ class BarChart {
|
||||
|
||||
let data = this.chooseData(selectedDimension);
|
||||
|
||||
let svgHeight = d3.select("#barChart").style("height").replace("px", "");
|
||||
let svgWidth = d3.select("#barChart").style("width").replace("px", "");
|
||||
|
||||
let xaxisHeight = 20;
|
||||
let yaxisWidth = 20;
|
||||
|
||||
d3.select("#barChart")
|
||||
.attr("transform", "scale(1,-1)");
|
||||
console.log(data);
|
||||
data.sort(function(a, b) {
|
||||
return a[1] > b[1] ? 1 : -1;
|
||||
});
|
||||
console.log(data);
|
||||
let dataNum = [];
|
||||
data.forEach(x => dataNum.push(x.data));
|
||||
let datadate = [];
|
||||
data.forEach(x => datadate.push(x.date));
|
||||
|
||||
let yScale = d3.scaleLinear()
|
||||
.domain([d3.max(dataNum), 0])
|
||||
.range([0 ,d3.select("#barChart").style("height").replace("px", "")-100]);
|
||||
let xScale = d3.scaleBand()
|
||||
.domain(datadate)
|
||||
.range([60, svgWidth - 100]);
|
||||
|
||||
let y_axis = d3.axisLeft()
|
||||
.scale(yScale);
|
||||
|
||||
let x_axis = d3.axisBottom()
|
||||
.scale(xScale);
|
||||
|
||||
|
||||
d3.select("#xAxis")
|
||||
.style("height", xaxisHeight)
|
||||
.attr("transform", "translate(0, 100) scale(1,-1)")
|
||||
.call(x_axis)
|
||||
.selectAll("text")
|
||||
.attr('transform', 'translate(15, 30) rotate(90)');
|
||||
|
||||
|
||||
d3.select("#yAxis")
|
||||
.style("width", yaxisWidth)
|
||||
.attr("transform", `translate(60, ${svgHeight}) scale(1,-1)`)
|
||||
.call(y_axis);
|
||||
// Create colorScale
|
||||
|
||||
// Create the axes (hint: use #xAxis and #yAxis)
|
||||
|
||||
Reference in New Issue
Block a user