D3.js: Accessing Object Property inside Array for Creating Line Graph

Question

I'm trying to create a line graph using d3.js with this data structure:

    var dataset1 = [ 
            {"video_name": "Apples", "video_views": 100},
            {"video_name": "Oranges", "video_views": 35},
            {"video_name": "Grapes", "video_views": 20},
            {"video_name": "Avocados", "video_views": 85},
            {"video_name": "Tomatoes", "video_views": 60}
        ]

The index number of the object is the x-value and the "video_views" is the y-value.

The problem: It is appending the svg canvas, and the "g" element just fine, but the x and y values for each point in the graph are not being detected, so nothing is showing up.

        // Scale values
    var Line_xScale = d3.scale.linear()
        .domain([0, 100])
        .range([0, Line_Graph_Width]);

    var Line_yScale = d3.scale.linear()
        .domain([0, 100])
        .range([0, Line_Graph_Height]);


    // This is where I suspect the problem is. //

    // SVG path equal to line
    var Path_Var = d3.svg.line()
        .x(function(d, i) {
            return i * 10;
        })
        .y(function(d) {
            return Line_yScale(d.video_views);
        });

    // Connect Element with Data
    group.selectAll('path')
        .data(dataset1)
        .enter()
        .append('path')
            .attr('d', Path_Var) 
            .attr('fill', 'none')
            .attr('stroke', '#fff')
            .attr('stroke-width', 2);

Any help is appreciated. Thanks for reading.

just changed to .x(function... return i*10; and still no luck — dmr07
– dmr07, Commented Jun 9, 2014 at 20:46

Anto Jurković · Accepted Answer · 2014-06-09 21:40:31Z

0

One possible solution:

The index number of the object is the x-value...: domain of x scale is changed to array of input indexes using d3.range():

// Scale values
var Line_xScale = d3.scale.linear()
    .domain(d3.range(dataset1.length))
    .range([0, Line_Graph_Width]);

... and the "video_views" is the y-value.: range is changed so greater values are at the top:

var Line_yScale = d3.scale.linear()
    .domain([0, 100])
    .range([Line_Graph_Height, 0]);

x value of line is changed to calculate width of one point:

var Path_Var = d3.svg.line()
    .x(function(d, i) {
        return i * Line_Graph_Width / dataset1.length;
    })
    .y(function(d) {
        return Line_yScale(d.video_views);
    });

and line is appended using:

group.append('path')
        .attr('d', Path_Var(dataset1)) 
        .attr('fill', 'none')
        .attr('stroke', '#000')
        .attr('stroke-width', 2);

stroke of #fff is white so you'd see nothing even if everything is right.

See example at jsbin.

Using group.selectAll('path').data(dataset1).enter().append('path') you would add not just one path but dataset1.length path elements.

answered Jun 9, 2014 at 21:40

Anto Jurković

11.3k2 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dmr07 Over a year ago

Dude, I want to give you a hug. I've been on this for like past 3 days with zero progress. Problem solved. Thanks!

ROOT · Accepted Answer · 2020-03-06 15:40:09Z

0

You define xScale to be [ 0 - 100 ] but values are [ 0 - 400 ] and out of SVG view, as set in

.x(function(d, i) {
    return i * 100;
})

Try set range of xScale from 0 to 400

edited Mar 6, 2020 at 15:40

ROOT

11.7k5 gold badges35 silver badges49 bronze badges

answered Jun 9, 2014 at 20:38

dsuess

5,3572 gold badges24 silver badges22 bronze badges

Collectives™ on Stack Overflow

D3.js: Accessing Object Property inside Array for Creating Line Graph

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related