d3 line graph "flattens" with more data

[tomBeach]

We are generating line graphs successfully from our stock data as long as we limit the number of data points (we've used 10). When we try to display the whole set (254 points) the line "flattens" and does not show the whole range of values. We tried different interpolation settings (including "none"). The scales are working correctly. Here's the entire d3 code:

        function InitChart() {
            console.log("InitChart");

            // == clear prevous contents
            // $(".contents").html("");
            // $("#visualisation").css("display", "none");

            // == select svg object; set xywh/margins
            var vis = d3.select("#visualisation"),
                WIDTH = 720,
                HEIGHT = 405,
                MARGINS = {
                    top: 20,
                    right: 20,
                    bottom: 20,
                    left: 50
                },

                // == Range: graph_wh inside container, Domain: data max/min values
                // xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2000, 2010]),
                // yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([134, 215]),
                xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([dateMin, dateMax]),
                yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([minClose, maxClose]),

                // == create axes (d3.svg.axis method via api link)
                xAxis = d3.svg.axis()
                    .scale(xScale),
                yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient("left");    // /////// /////// ///////

            // == append axes to container; add styles
            vis.append("svg:g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                .call(xAxis);
            vis.append("svg:g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                .call(yAxis);

            // == adjust yAxis orientation
            yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

            // == add line object; apply scales
            var lineGen = d3.svg.line()
                .x(function(d) {
                    // return xScale(d.year);
                    return xScale(d.x);
                })
                .y(function(d) {
                    // return yScale(d.sale);
                    return yScale(d.y);
                });
                // .interpolate("linear");

            // == append line path to svg; set params
            vis.append('svg:path')
                // .attr('d', lineGen(data))
                .attr('d', lineGen(closeValuesArray))
                .attr('stroke', 'green')
                .attr('stroke-width', 2)
                .attr('fill', 'none');

        }

[RobertAKARobin]

That's bizarre. I have no idea. Maybe we can take a crack at it tomorrow?

[jshawl]

I too, have no idea. There is a lot of code here, and I am unable to understand how it works. Though, maybe you'll have better luck posting on stackoverflow? d3 has a robust community of experts there! http://stackoverflow.com/questions/tagged/d3.js

Closing for now. Feel free to create a new issue linking to this one if there's something we can help with.