Implementing d3 Codeflower source code

Question

I'm trying to replicate this visualization here http://redotheweb.com/CodeFlower/ using my own json data. However the visualization is not showing up and I suspect it's because I have misplaced this block of code

var myFlower = new CodeFlower("#visualization", 300, 200);
myflower.update(jsonData);

which updates the visualization based on the content in the jsonData file. The full code is as follows:

<html>
<head> </head>
<body>
    <div class = "content">
        <div class = "container">
            <p class = "lead"> </p>
            <div id = "visualization">
                <svg width = "270" height = "270">
                    var myFlower = new CodeFlower("#visualization", 300, 200);
                    myflower.update(jsonData);
                </svg>
            </div>
        </div>
    </div>
    <script type = "text/java
    <script type="text/javascript" src="javascripts/d3/d3.js"></script>
    <script type="text/javascript" src="javascripts/d3/d3.geom.js"></script>
    <script type="text/javascript" src="javascripts/d3/d3.layout.js"></script>
    <script type="text/javascript" src="javascripts/CodeFlower.js"></script>
    <script type="text/javascript" src="javascripts/dataConverter.js"></script>
    <script type="text/javascript"> </script>
</body>

Please help. Thank you.

Answer 1

Your code is not quite correct. I think you can dispense with the SVG element, and move your CodeFlower initialization code to the empty script tag. Try this instead:

<html>
<head> </head>
<body>
    <div class = "content">
        <div class = "container">
            <p class = "lead"> </p>
            <div id = "visualization">
              <!-- this empty div is what gets used by CodeFlower -->
            </div>
        </div>
    </div>
    <script type="text/javascript" src="d3.js"></script>
    <script type="text/javascript" src="d3.geom.js"></script>
    <script type="text/javascript" src="d3.layout.js"></script>
    <script type="text/javascript" src="CodeFlower.js"></script>
    <script type="text/javascript" src="dataConverter.js"></script>
    <script type="text/javascript">
        var myFlower = new CodeFlower("#visualization", 300, 200);
        myFlower.update(jsonData);
    </script>
</body>
</html>

According to the documentation :

Usage

To create a CodeFlower, include the CodeFlower.js file together with d3.js, just like in this page. Create a new CodeFlower instance using a CSS selector ( of the div where the flower should be inserted ), and the width and height of the desired visualization. Then, bind JSON data to the flower using CodeFlower.update(), and you're done.

CodeFlower creates the SVG element itself, inside the DIV that you provide. From the CodeFlower source code:

this.svg = d3.select(selector).append("svg:svg")
  .attr('width', w)
  .attr('height', h);

So adding your own SVG tag for CodeFlower is superfluous.

EDIT:

Make sure you have a valid jsonData variable: var jsonData = { /* json data here */ };

Here is a working fiddle: http://jsfiddle.net/2DUy9/1/

Answer 2

The block of code you're talking about is javascript, so it needs to be within script tags -- you've got a nice empty one at the end of your code. As is, your "code" is just being read as plain text. If it was inside a regular HTML element, the code would be displayed as text on the webpage, but text inside an SVG tag isn't even understood as plain text, since SVG is supposed to contain graphics.

Within the script you have to then indicate which SVG element you want to add the graph to. Just putting some code in the middle of your HTML doesn't make the results of the code go there -- even if it was put inside a script tag. However, the code you are borrowing is looking for the <div id="visualization"></div> tags, and should draw it there once you get your script formatted as @Colin recommended -- but only if your little bit of script comes after the script tag that imports the CodeFlower script. Otherwise, you'll just get an error in the console and nothing on the screen.

I'm afraid you're going to have to take some time to figure out what all the different parts of the program do before you can effectively adapt them to your needs.

The Mozilla Development Network has some good intro guides:

On HTML markup
On Javascript

For D3, the best intro for beginners without coding experience is the work of Scott Murray:

http://alignedleft.com/tutorials/d3/

Implementing d3 Codeflower source code

Question

2 answers

solution1
1 2014-01-12 22:59:08

solution2
0 2014-01-12 22:48:49

Implementing d3 Codeflower source code

Question

2 answers

solution1 1 2014-01-12 22:59:08

solution2 0 2014-01-12 22:48:49

solution1
1 2014-01-12 22:59:08

solution2
0 2014-01-12 22:48:49