I am still quite new to JavaScript and development in general, so I may be overlooking something obvious. Although I have successfully created a chart using d3, I am struggling with positioning. No matter how much I manipulate it with CSS, the chart just doesn't behave as expected. Setting display to block and margins to auto didn't have any effect. The only way I can adjust the positioning is by tweaking the margins in the d3 code, which isn't ideal for responsiveness. I also tried using text-align without success. My goal is to centrally align the chart and have it scale larger as the screen size increases. This should be simple to achieve using CSS, but for some reason, it's not working at all. Any help would be greatly appreciated.
Here is the JavaScript code:
// Set the dimensions of the canvas / graph
var margin = {top: 20, right: 0, bottom: 70, left: 70},
width = 300 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%-m/%-d/%Y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(10);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// chart area fill
var area = d3.svg.area()
.x(function(d) { return x(d.Date); })
.y0(height)
.y1(function(d) { return y(d.Forecast); });
// Define the line
var valueline = d3.svg.line()
.interpolate("cardinal")
.x(function(d) { return x(d.Date); })
.y(function(d) { return y(d.Orders); });
var valueline2 = d3.svg.line()
.interpolate("cardinal")
.x(function(d) { return x(d.Date); })
.y(function(d) { return y(d.Forecast); });
// Adds the svg canvas
var svg = d3.select("body")
.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 + ")");
// Get the data
d3.csv("csv/Forecast.csv", function(error, data) {
data.forEach(function(d) {
d.Date = parseDate(d.Date);
d.Orders = +d.Orders;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.Date; }));
y.domain([0, d3.max(data, function(d) { return d.Orders; })]);
// Area
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline2(data))
.style("stroke", "#A7A9A6");
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});