D3 library + Javascript + function

Question

Apologies in advance if this is a very basic question.

I am reading through this book on D3, Interactive Data Visualization for the Web, a JavaScript library
http://chimera.labs.oreilly.com/books/1230000000345/ch06.html#_the_data

I find it a good book as I am still a novice at this stuff.

In the code below, and demo here , as i understand it I can call "d" anything and it will still reference the "dataset" array.

Anyhow my question is in the example below how is d referenced to the dataset array? And what if I had another array that I wanted to reference?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: A simple scatterplot with SVG</title>
        <script type="text/javascript" src="../d3/d3.v3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 100;

            var dataset = [
                            [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                            [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
                          ];

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    alert(d); //d here can be anything here EG "p" --> still not sure how it relates to dataset --> what if I had another array that I wanted to reference??-->  
                    return d[0];  //return the 0th element
               })
               .attr("cy", function(d) {
                    return d[1];    //return the 1th element
               })
               .attr("r", 5);

        </script>
    </body>
</html>

Answer 1

Well that's a good question. First lets go through what your doing in that code. The first part involves selecting the body element of the DOM and appending a svg container, that's in this snippet:

var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

Next your creating svg circles based on the data, which in this case the variable dataset. That's done in this snippet:

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")

You then give the circles some attributes in the rest of the code.

So your question how is d referenced to your dataset is answered in the data(dataset) line. This line says, use the variable dataset and bind it to the circles. So if you had another dataset called Hattrick you would simply replace dataset with Hattrick in data(dataset) .

I'd suggest that you have a look at these tutorials Thinking with Joins and How Selections Work both by Mike Bostock as well as Scott Murray's excellent book. You might also be interested in Scott's on-line tutorials if you haven't already found them.

D3 library + Javascript + function

Question

1 answers

solution1
0 ACCPTED 2013-09-26 03:57:58

D3 library + Javascript + function

Question

1 answers

solution1 0 ACCPTED 2013-09-26 03:57:58

solution1
0 ACCPTED 2013-09-26 03:57:58