I am new to D3.js and I am trying to build a very wide line chart that rotates horizontally to show more data from a CSV file. I could not find many good resources for the latest version of D3.
What I'm trying to achieve:
- Diagram
- fills the screen with hidden overflow
- drag / mousewheel shows more data on the right.
- axis labels remain in place (but changes to the x axis reflect new data)
- lack of scaling
The code that I have now displays the graph, and you can click and drag it, but it all just moves away from the screen ... Here is the code:
var margin = {top: 50, right: 50, bottom: 50, left: 50}, width = window.innerWidth - margin.left - margin.right, height = window.innerHeight - margin.top - margin.bottom; var x = d3.scaleLinear().range([0, width]); var y = d3.scaleLinear().range([height, 0]); var line = d3.line() .x(function(d) { return x(d.mile); }) .y(function(d) { return y(d.elevation); }) var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .call(d3.zoom().on("zoom", function () { svg.attr("transform", d3.event.transform) })) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); function draw(data) { data.forEach(function(d) { d.mile = +d.mile; d.elevation = +d.elevation; }); x.domain(d3.extent(data, function(d) { return d.mile }) ) y.domain([0, d3.max(data, function(d) { return Math.max(d.elevation) }) ]); svg.append("path") .data([data]) .attr("class", "line") .attr("d", line) svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); svg.append("g") .call(d3.axisLeft(y)); } d3.json("data.json", function(error, data) { if (error) throw error; draw(data) });
And here is an example of how the data looks:
mile,elevation 1505.9,1800 1506.4,1360 1507.0,1340 1507.9,1750 1509.7,2365
Thanks in advance for any resources anyone can offer me to help solve this problem.