var w = 960;
        var h = 800;
        var fill = d3.scale.category20(); //twenty colors
        var linkmap = d3.scale.category20b(); //twenty colors

        var vis = d3.select("#canvas")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h);
        //one can fetch service data through JSON of course
        var data =
        {
            "nodes": [
                      { "name": "Orbifold", "group": 0 }, 
                      { "name": "Data visualization", "group": 1},
                      { "name": "Diagrams", "group": 2},
                      { "name": "Forensics", "group": 2},
                      { "name": "Business Intelligence", "group": 3},
                      { "name": "Particle systems", "group": 3},
                      { "name": "F#", "group": 4 },
                      { "name": "Graphite", "group": 5 },
                      { "name": "Lynx", "group": 5 },
                      { "name": "Twirl", "group": 5 },
                      { "name": "G2", "group": 5 },
                      { "name": "iSee", "group": 5 },
                      ],
            "links": [
                        { "source": 0, "target": 1, "value": 4 },
                        { "source": 0, "target": 2, "value": 2 },
                        { "source": 3, "target": 2, "value": 2 },
                        { "source": 4, "target": 2, "value": 2 },
                        { "source": 4, "target": 5, "value": 2 },
                        { "source": 0, "target": 6, "value": 1 },
                        { "source": 2, "target": 7, "value": 1 },
                        { "source": 5, "target": 8, "value": 1 },
                        { "source": 7, "target": 8, "value": 1 },
                        { "source": 9, "target": 3, "value": 1 },
                     ]
        }

                        var force = d3.layout.force()
                                  .charge(-120)
                                  .distance(180)
                                  .theta(.4)
                                  .gravity(.024)
                                  .nodes(data.nodes)
                                  .links(data.links)
                                  .size([w, h])
                                  .start();

                        var link = vis.selectAll("line.link")
                              .data(data.links)
                              .enter().append("svg:line")
                              .attr("class", "link")
                              .attr("stroke", function (d) { return linkmap(Math.round(Math.random() * 20)); })
                              .style("stroke-width", function (d) { return Math.round(Math.random()*7); })
                              .attr("x1", function (d) { return d.source.x; })
                              .attr("y1", function (d) { return d.source.y; })
                              .attr("x2", function (d) { return d.target.x; })
                              .attr("y2", function (d) { return d.target.y; });

                        var node = vis.selectAll("circle.node")
                              .data(data.nodes)
                              .enter().append("svg:rect")                     
                              .attr("x", function (d) { return d.x-25; })
                              .attr("y", function (d) { return d.y-10; })
                              .attr("width", 50)
                              .attr("height", 20)
                              .attr("rx", 6)
                              .attr("ry", 6)
                              .style("fill", function (d) { return fill(d.group); })
                              .call(force.drag);

                            node.append("svg:title")
                              .text(function (d) { return d.name; });

                            vis.style("opacity", 1e-6)
                                .transition()
                                .duration(1000)
                                .style("opacity", 1);

                            force.on("tick", function () {
                                        link.attr("x1", function (d) { return d.source.x; })
                                            .attr("y1", function (d) { return d.source.y; })
                                            .attr("x2", function (d) { return d.target.x; })
                                            .attr("y2", function (d) { return d.target.y; });

                                        node.attr("x", function (d) { return d.x-25; })
                                            .attr("y", function (d) { return d.y-10; });
                                    });