invisible d3 object

[tomBeach]

We've made and appended a set of d3 axes with two lines. We can see when we "inspect element" but it's invisible on the screen. Here's the html and d3 code...

HTML        <div class="column column-8">
                <div class="visualisation"></div>
                <div class="contents"></div>
            </div>
d3 
           // == select svg object; set xywh/margins
            var vis = d3.select(".visualisation"),
                WIDTH = 500,
                HEIGHT = 300,
                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]),

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

            console.log("vis: " + vis);

            // == 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);
                })
                .y(function(d) {
                    return yScale(d.sale);
                })
                .interpolate("basis");

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

[tomBeach]

It's ok we fixed it. (Trying to attach d3 to a div rather than svg...) Still looking for 20 minutes to figure out putting date data into the graph...

[RobertAKARobin]

I don't know enough about D3 and graphing with JS to be able to tell you. Jesse may be more able to help, but he's assisting the deployment class at the moment.

[englep10]

We ended up getting our graph to appear! Now just working on prepping our data to get parsed and become variables of x,y. Looking into your suggestion of the js unix timestamp method.

[RobertAKARobin]

Wooo!