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.

JavaScript doesn't go in an <svg> tag. Place it in a <script> tag instead. — Colin Brock
– Colin Brock, Commented Jan 12, 2014 at 22:34
tried that but this too doesn't work: <script var myFlower = new CodeFlower("#visualization", 300, 200); myflower.update(jsonData); </script> — user3183900
– user3183900, Commented Jan 12, 2014 at 22:39
You are missing a closing >. It should be <script> //code here</script> — Colin Brock
– Colin Brock, Commented Jan 12, 2014 at 22:46
fixed that too. i have the jsonData and javascript files in the same folder so I'm not sure what's going on. — user3183900
– user3183900, Commented Jan 12, 2014 at 22:50
Is your script at the end of the page (after all the other script links?) or is it still in the middle? Scripts are executed in the order they appear, so you can't tell the browser to execute the "code flower" method until after you have loaded in the "code flower" script. See the links to MDN I gave in my answer so you can get an overview of how Javascript is interpreted by the browser. — AmeliaBR
– AmeliaBR, Commented Jan 12, 2014 at 22:59

t.888 · Accepted Answer · 2014-01-13 03:11:51Z

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/

edited Jan 13, 2014 at 3:11

answered Jan 12, 2014 at 22:59

t.888

3,9023 gold badges27 silver badges31 bronze badges

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

2 Comments

user3183900 Over a year ago

thanks but i tried the code you provided but it still doesn't work. any other thoughts?

t.888 Over a year ago

I added a working example to the bottom of my answer. Everything seems to work fine, but you'll need some json data for CodeFlower to operate on. See the provided fiddle.

AmeliaBR · Accepted Answer · 2014-01-12 22:56:29Z

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:

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

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

Collectives™ on Stack Overflow

Implementing d3 Codeflower source code

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related