d3JS: Drawing Line Segments from CSV

Question

In d3Js, How would one draw basic line segments from a tsv file? Say the file declare, in one row of data, x1,y1,x2,y2. I want to draw two line segments as in the data below:

x0      y0      x1      y1      weight
0.5     0.5     0.2     0.2     2
0.25    0.35    0.7     0.8     1

I'm having trouble with the d3.tsv function here. I'm confident that the code below is fundamentally wrong, but just to show what I'm trying to do...

d3.tsv("data/sampledata.tsv", function(error, data) {
data.forEach(function(d) {
    d.x0 = +d.x0;
    d.y0 = +d.y0;
    d.x1 = +d.x1;
    d.y1 = +d.y1;
});

 var line = svgContainer.append("line")
                     .attr("x1", function(d) { return (d.x0); })
                     .attr("y1", function(d) { return (d.y0); })
                     .attr("x2", function(d) { return (d.x1); })
                     .attr("y2", function(d) { return (d.y1); })
                     .attr("stroke-width", 2)
                     .attr("stroke", "black");

});

Could someone please point me in the right direction? The documentation out there refers mostly to creating paths through a series of data while I'm trying to produce individual line segments. Thanks in advance for any help.

score 1 · Accepted Answer · answered Dec 25 '13 at 09:01

The code below should work. Depending on your style, you may want to organize files and code differently, but the key part you must include is chain selectAll("line").data(data).enter().append("line"). This is the most frequent D3 idiom, and also the one that gives the hardest time to everyone learning D3 - especially to those that come from the background of procedural languages. You can look up D3 documentation, but I will also try to write down something on this topic later today.

data/sampledata.tsv:

same as yours.

index.html:

<html>
<head>
    <title>Two Lines</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="script.js"></script>
</head>
<body onload="load()">
    <h2>Two Lines</h2>
</body>
</html>

script.js:

function load(){
    var svg = d3.select("body")
        .append("svg")
        .attr("width", 1000)
        .attr("height", 1000);
    d3.tsv("data/sampledata.tsv", function(error, data) {
        svg.selectAll("line")
            .data(data)
           .enter()
            .append("line")
            .attr("x1", function(d) { return (1000 * d.x0); })
            .attr("y1", function(d) { return (1000 * d.y0); })
            .attr("x2", function(d) { return (1000 * d.x1); })
            .attr("y2", function(d) { return (1000 * d.y1); })
            .attr("stroke-width", function(d) { return (d.weight); })
            .attr("stroke", "black");
    });
};

The code in action is here. IT produces following page:

output page

VividD · Answer 2 · 2013-12-25T15:20:27.127

I already posted the answer below, just want to tell you that you could use this code too (with the same outcome) (I am mentioning it here as a help for you if you are more familiar with approach and philosophy of C++, Java or other similar languages):

function load(){
    var svg = d3.select("body")
        .append("svg")
        .attr("width", 1000)
        .attr("height", 1000);
    d3.tsv("data/sampledata.tsv", function(error, data) {
        data.forEach(function(d) {
            svg.append("line")
                .attr("x1", 1000 * d.x0)
                .attr("y1", 1000 * d.y0)
                .attr("x2", 1000 * d.x1)
                .attr("y2", 1000 * d.y1)
                .attr("stroke-width", d.weight)
                .attr("stroke", "black");
        });        
    });
};

So, there is explicit for loop here.

However, the answer that is on the bottom of the page is more in the spirit of D3 development. This answer nevertheless may help you mentally digest whats going on behind D3-powered code.

d3JS: Drawing Line Segments from CSV

2 Answers2

Linked