bradybod-usu/cs5890_data_visualization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working better

Browse Source
This commit is contained in:
Brady Bodily
2019-10-01 16:43:13 -06:00
parent 5ac6203cb1
commit b444adb83d
2 changed files with 44 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
hw4/js/barChart.js
View File

@@ -27,8 +27,8 @@ class BarChart {
let svgHeight = d3.select("#barChart").style("height").replace("px", "");
let svgWidth = d3.select("#barChart").style("width").replace("px", "");
let xaxisHeight = 20;
let yaxisWidth = 20;
let xaxisHeight = 60;
let yaxisWidth = 60;
d3.select("#barChart")
.attr("transform", "scale(1,-1)");
console.log(data);
@@ -42,37 +42,65 @@ class BarChart {
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]);
.domain([0 , d3.max(dataNum)])
.range([svgHeight-(xaxisHeight), 0]);
let xScale = d3.scaleBand()
.domain(datadate)
.range([60, svgWidth - 100]);
.range([xaxisHeight, svgWidth-yaxisWidth])
.padding(.25);
let y_axis = d3.axisLeft()
.scale(yScale);
let y_axis = d3.axisLeft(yScale);
let x_axis = d3.axisBottom()
.scale(xScale);
let x_axis = d3.axisBottom(xScale)
.tickFormat((d,i) => datadate[i]);
//.scale(xScale);
d3.select("#xAxis")
.style("height", xaxisHeight)
.attr("transform", "translate(0, 100) scale(1,-1)")
.attr("transform", `translate(0, ${yaxisWidth}) scale(1,-1)`)
.call(x_axis)
.selectAll("text")
.attr('transform', 'translate(15, 30) rotate(90)');
let height = svgHeight;
d3.select("#yAxis")
.style("width", yaxisWidth)
.attr("transform", `translate(60, ${svgHeight}) scale(1,-1)`)
//.style("width", yaxisWidth)
.attr("transform", `translate(${xaxisHeight}, ${svgHeight}) scale(1,-1)`)
.call(y_axis);
// Create colorScale
// Create the axes (hint: use #xAxis and #yAxis)
// Create the bars (hint: use #bars)
//Create the bars (hint: use #bars)
let barChart = d3.select("#bars")
.selectAll('rect')
.data(datadate)
.enter()
.append('rect')
.attr("transform", `translate(0, ${height}) scale(1,-1)`)
.attr('x', (d,i) => xScale(d))
.attr('y', (d,i) => yScale(dataNum[i]))
.attr('width', xScale.bandwidth())
.attr('height', (d,i) => svgHeight - yScale(dataNum[i]))
.attr('class', 'bar');
//
// barChart.exit().remove();
// barChart.enter()
// .append("rect")
// .attr("data", function (d, i) {
// console.log(d);
// console.log(i);
// return i;
// })
// .attr("height", d => yScale(d))
// .attr("y", 0)
// .attr("width", (svgWidth-100)/(dataNum.length +1))
// .attr("transform", "translate(60, 310) scale(1,-1)")
// .style("fill", "steelblue");
// ******* TODO: PART II *******