d3 on cheap smarphones

Prev Next

<style>
                #svg-wrapper{margin-left:auto;margin-right:auto;}
            </style>
            <div id="svg-wrapper"></div>
            <script>
                //create a basic static svg layout
                var svg = d3.select("#svg-wrapper")
                    .append("svg")
                    .attr("width", 300)
                    .attr("height", 300);
                svg.append("circle")
                    .attr("cx", 200)
                    .attr("cy", 200)
                    .attr("r", 100)
                    .style("fill", "#0000FF");
                svg.append("circle")
                    .attr("cx", 110)
                    .attr("cy", 130)
                    .attr("r", 50)
                    .style("fill", "#00FF00");
                svg.append("text")
                    .text("SVG Works!")
                    .attr("x", 0)
                    .attr("y", 120)
                    .attr("transform", "rotate(-20)")
                    .style("stroke", "#FF3333")
                    .style("fill", "#FF3333")
                    .style("font-size", "40px");
                //check to see if there is an svg element
                if(d3.select("#svg-wrapper svg").empty())
                    document.getElementById("svg-wrapper").innerHTML = "<h1>[Cannot display svg]</h1>";
            </script>

<style>
                #svg-wrapper{width:300px;height:300px;margin-left:auto;margin-right:auto;border:1px solid #000000;}
                #add, #sub{margin:10px;text-decoration:none;font-weight:bold;font-size:35px;padding:10px 30px;margin-right:10px;background-color:#0000FF;color:#EEEEEE;border-radius:5px;}
                #add{float:right;}
                #sub{float:left;}
                #footer{width:100%}
                #count{padding-top:20px;font-size:35px;font-weight:bold;text-align:center;margin-left:auto;margin-right:auto;}
            </style>
            <div id="svg-wrapper"></div>
            <div id="footer">
                <a id="sub" href="#">-</a>
                <a id="add" href="#">+</a>
                <div id="count">33</div>
            </div>
            <script>
                //add circle to svg positioned in box layout
                var n = 1;
                var size = 300;
                var pad = 0.15;
                function make_circles(){
                    document.getElementById("svg-wrapper").innerHTML = "";
                    //generate circle locations
                    var data = [];
                    var dia = (size * (1 - pad)) / n;
                    var dist = (n == 1) ? 0 : dia + (size * pad / (n - 1));
                    for(var x = 0; x < n; x++)
                        for(var y = 0; y < n; y++)
                            data.push([x * dist + dia * 0.5, y * dist + dia * 0.5]);
                    //insert circles
                    var svg = d3.select("#svg-wrapper")
                        .append("svg")
                        .attr("width", size)
                        .attr("height", size);
                    svg.selectAll("circle")
                        .data(data).enter().append("circle")
                        .attr("cx", function(d){return d[0];})
                        .attr("cy", function(d){return d[1];})
                        .attr("r", dia * 0.5)
                        .style("fill", "#FF0000");
                    document.getElementById("count").innerHTML = n * n;
                }
                //bind add/subtract buttons
                d3.select("#add").on("click", function(){
                    d3.event.preventDefault();
                    n += 4;
                    make_circles();
                });
                d3.select("#sub").on("click", function(){
                    d3.event.preventDefault();
                    n = (n <= 1) ? 1 : n - 4;
                    make_circles();
                });
                make_circles();
            </script>

<style>
                #svg-wrapper{width:300px;height:300px;margin-left:auto;margin-right:auto;border:1px solid #000000;}
                #add, #sub{margin:10px;text-decoration:none;font-weight:bold;font-size:35px;padding:10px 30px;margin-right:10px;background-color:#0000FF;color:#EEEEEE;border-radius:5px;}
                #add{float:right;}
                #sub{float:left;}
                #footer{width:100%}
                #count{padding-top:20px;font-size:35px;font-weight:bold;text-align:center;margin-left:auto;margin-right:auto;}
            </style>
            <div id="svg-wrapper"></div>
            <div id="footer">
                <a id="sub" href="#">-</a>
                <a id="add" href="#">+</a>
                <div id="count"></div>
            </div>
            <script>
                //add circle to svg positioned in box layout
                var n = 1;
                var size = 250;
                var pad = 0.15;
                function make_circles(){
                    document.getElementById("svg-wrapper").innerHTML = "";
                    //generate circle locations
                    var data = [];
                    var dia = (size * (1 - pad)) / n;
                    var dist = (n == 1) ? 0 : dia + (size * pad / (n - 1));
                    for(var x = 0; x < n; x++)
                        for(var y = 0; y < n; y++)
                            data.push([x * dist + dia * 0.5, y * dist + dia * 0.5]);
                    //insert circles
                    var svg = d3.select("#svg-wrapper")
                        .append("svg")
                        .attr("width", size + 50)
                        .attr("height", size + 50);
                    svg.selectAll("circle")
                        .data(data).enter().append("circle")
                        .attr("cx", function(d){return d[0];})
                        .attr("cy", function(d){return d[1];})
                        .attr("r", dia * 0.5)
                        .style("fill", "#FF0000");
                    //move the group of circles
                    (function move(cur_len){
                        svg.selectAll("circle")
                            .data(data)
                            .transition().duration(500)
                                .attr("cx", function(d){return d[0] + 50;})
                                .attr("cy", function(d){return d[1] + 50;})
                            .transition().duration(500)
                                .attr("cx", function(d){return d[0];})
                                .attr("cy", function(d){return d[1];})
                                .each("end", function(d, i){
                                    //only fire recursion on last circle
                                    if(i == data.length - 1){
                                        //break the recursion if changed number of circles
                                        var cir_len = 0;
                                        svg.selectAll("circle")
                                            .each(function(){cir_len++;});
                                        if(cur_len == cir_len)
                                            move(n * n);
                                    }
                                });
                    })(n * n);
                    document.getElementById("count").innerHTML = n * n;
                }
                //bind add/subtract buttons
                d3.select("#add").on("click", function(){
                    d3.event.preventDefault();
                    n += 2;
                    make_circles();
                });
                d3.select("#sub").on("click", function(){
                    d3.event.preventDefault();
                    n = (n <= 1) ? 1 : n - 2;
                    make_circles();
                });
                make_circles();
            </script>

<style>
                #svg-wrapper{width:300px;height:300px;margin-left:auto;margin-right:auto;border:1px solid #000000;}
                #add, #sub{margin:10px;text-decoration:none;font-weight:bold;font-size:35px;padding:10px 30px;margin-right:10px;background-color:#0000FF;color:#EEEEEE;border-radius:5px;}
                #add{float:right;}
                #sub{float:left;}
                #footer{width:100%}
                #count{padding-top:20px;font-size:35px;font-weight:bold;text-align:center;margin-left:auto;margin-right:auto;}
            </style>
            <div id="svg-wrapper"></div>
            <div id="footer">
                <a id="sub" href="#">-</a>
                <a id="add" href="#">+</a>
                <div id="count"></div>
            </div>
            <script>
                //add circle to svg positioned in box layout
                var n = 2;
                var size = 300;
                var pad = 0.15;
                function make_force(){
                    document.getElementById("svg-wrapper").innerHTML = "";
                    //generate initial nodes
                    var nodes = [];
                    var dia = (size * (1 - pad)) / n;
                    var dist = (n == 1) ? 0 : dia + (size * pad / (n - 1));
                    for(var x = 0; x < n; x++){
                        for(var y = 0; y < n; y++){
                            nodes.push({
                                "x": x * dist + dia * 0.5,
                                "y": y * dist + dia * 0.5,
                                "weight": Math.random() + 1.0,
                            });
                        }
                    }
                    //generate random links (via Fisher–Yates shuffle)
                    var range = [];
                    for(var i = 0; i < nodes.length; i++)
                        range.push(i);
                    var links = [];
                    var max_links = 6;
                    for(var i = 0; i < range.length; i++){
                        var shuf = range.slice(0);
                        var index;
                        var tmp;
                        for(var j = range.length - 1; j >= 0; j--){
                            index = Math.floor(j * Math.random());
                            tmp = shuf[index];
                            shuf[index] = shuf[j];
                            shuf[j] = tmp;
                        }
                        shuf = shuf.slice(0, Math.floor(max_links * Math.random()));
                        for(var j = 0; j < shuf.length; j++){
                            links.push({
                                "source": nodes[i],
                                "target": nodes[shuf[j]],
                            });
                        }
                    }
                    //insert force directed layout
                    var svg = d3.select("#svg-wrapper")
                        .append("svg")
                        .attr("width", size)
                        .attr("height", size);
                    var force = d3.layout.force()
                        .nodes(nodes)
                        .links(links)
                        .size([size, size])
                        .linkDistance(60)
                        .charge(-300)
                        .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("transform", function(d){
                                return "translate(" + d['x'] + "," + d['y'] + ")";
                            });
                        })
                        .start();
                    var link = svg.selectAll("line")
                        .data(force.links())
                        .enter().append("line")
                        .style("stroke-width", "2px")
                        .style("stroke", "#333333");
                    var node = svg.selectAll("circle")
                        .data(force.nodes())
                        .enter().append("circle")
                        .style("fill", "#FF0000")
                        .style("stroke", "#FFDDDD")
                        .style("stroke-width", "2px")
                        .attr("r", 15);
                    document.getElementById("count").innerHTML = n * n;
                }
                //bind add/subtract buttons
                d3.select("#add").on("click", function(){
                    d3.event.preventDefault();
                    n += 1;
                    make_force();
                });
                d3.select("#sub").on("click", function(){
                    d3.event.preventDefault();
                    n = (n <= 2) ? 2 : n - 1;
                    make_force();
                });
                make_force();
            </script>

<style>
                #svg-wrapper{width:300px;height:300px;margin-left:auto;margin-right:auto;border:1px solid #000000;}
                #add, #sub{margin:10px;text-decoration:none;font-weight:bold;font-size:35px;padding:10px 30px;margin-right:10px;background-color:#0000FF;color:#EEEEEE;border-radius:5px;}
                #add{float:right;}
                #sub{float:left;}
                #footer{width:100%}
                #count{padding-top:20px;font-size:35px;font-weight:bold;text-align:center;margin-left:auto;margin-right:auto;}
            </style>
            <div id="svg-wrapper"></div>
            <div id="footer">
                <a id="sub" href="#">-</a>
                <a id="add" href="#">+</a>
                <div id="count"></div>
            </div>
            <script>
                //add circle to svg positioned in box layout
                var n = 1;
                var size = 200;
                var pad = 0.40;
                function make_circles(){
                    document.getElementById("svg-wrapper").innerHTML = "";
                    //generate circle locations
                    var data = [];
                    var dia = (size * (1 - pad)) / n;
                    var dist = (n == 1) ? 0 : dia + (size * pad / (n - 1));
                    for(var x = 0; x < n; x++)
                        for(var y = 0; y < n; y++)
                            data.push([x * dist + dia * 0.5, y * dist + dia * 0.5]);
                    //insert circles
                    var svg = d3.select("#svg-wrapper")
                        .append("svg")
                        .attr("width", size + 100)
                        .attr("height", size + 100);
                    svg.selectAll("circle")
                        .data(data).enter().append("circle")
                        .attr("cx", function(d){return d[0];})
                        .attr("cy", function(d){return d[1];})
                        .attr("r", dia * 0.5)
                        .style("fill", "#FF0000");
                    //scale the group of circles
                    (function move(cur_len){
                        svg.selectAll("circle")
                            .data(data)
                            .transition().duration(500)
                                .attr("transform", "scale(1.5)")
                            .transition().duration(500)
                                .attr("transform", "scale(1.0)")
                                .each("end", function(d, i){
                                    //only fire recursion on last circle
                                    if(i == data.length - 1){
                                        //break the recursion if changed number of circles
                                        var cir_len = 0;
                                        svg.selectAll("circle")
                                            .each(function(){cir_len++;});
                                        if(cur_len == cir_len)
                                            move(n * n);
                                    }
                                });
                    })(n * n);
                    document.getElementById("count").innerHTML = n * n;
                }
                //bind add/subtract buttons
                d3.select("#add").on("click", function(){
                    d3.event.preventDefault();
                    n += 2;
                    make_circles();
                });
                d3.select("#sub").on("click", function(){
                    d3.event.preventDefault();
                    n = (n <= 1) ? 1 : n - 2;
                    make_circles();
                });
                make_circles();
            </script>

<style>
                #svg-wrapper{width:300px;height:300px;margin-left:auto;margin-right:auto;border:1px solid #000000;}
            </style>
            <div id="svg-wrapper"></div>
            <script>
                function update(coords){
                    var data = [[40,40], [113,40], [187,40], [260,40]]; //default coords
                    for(var i = 0; i < coords.length; i++)
                        data[i] = coords[i];
                    var circles = svg.selectAll("circle")
                        .data(data);
                    circles.enter().append("circle")
                        .attr("r", 40)
                        .style("fill", "#FF0000");
                    circles
                        .attr("cx", function(d){return d[0];})
                        .attr("cy", function(d){return d[1] - 40;}); //so people can see the dot with my finger in the way
                }
                var svg = d3.select("#svg-wrapper")
                    .append("svg")
                    .attr("width", 300)
                    .attr("height", 300)
                    .on("touchmove", function(){
                        update(d3.touches(this));
                    });
                update([]);
            </script>

<style>
                #svg-wrapper{width:300px;height:300px;margin-left:auto;margin-right:auto;border:1px solid #000000;}
            </style>
            <div id="svg-wrapper"></div>
            <script>
                var corners = [[200,100], [100,200]]; //default corners
                function update(){
                    var data = [
                        [corners[0][0], corners[1][1]],
                        corners[0],
                        [corners[1][0], corners[0][1]],
                        corners[1]
                    ];
                    //draw lines for box
                    var lines = svg.selectAll("line")
                        .data(data);
                    lines.enter().append("line")
                        .style("stroke-width", "4px")
                        .style("stroke", "#333333");
                    lines
                        .attr("x1", function(d, i){return data[i][0];})
                        .attr("y1", function(d, i){return data[i][1];})
                        .attr("x2", function(d, i){return data[(i+1)%4][0];})
                        .attr("y2", function(d, i){return data[(i+1)%4][1];});
                    //draw corner circles for box
                    var circles = svg.selectAll("circle")
                        .data(data);
                    circles.enter().append("circle")
                        .style("fill", "#FF0000")
                        .style("stroke", "#FFDDDD")
                        .style("stroke-width", "4px");
                    circles
                        .attr("cx", function(d){return d[0];})
                        .attr("cy", function(d){return d[1];})
                        .attr("r", function(d, i){return (i%2) ? 30 : 10;});
                }
                var svg = d3.select("#svg-wrapper")
                    .append("svg")
                    .attr("width", 300)
                    .attr("height", 300)
                    .on("touchmove", function(){
                        var coords = d3.touches(this);
                        for(var i = 0; i < coords.length; i++)
                            corners[i] = coords[i];
                        update();
                    });
                update();
            </script>

<style>
                #svg-wrapper{width:300px;height:300px;margin-left:auto;margin-right:auto;border:1px solid #000000;}
                #add, #sub{margin:10px;text-decoration:none;font-weight:bold;font-size:35px;padding:10px 30px;margin-right:10px;background-color:#0000FF;color:#EEEEEE;border-radius:5px;}
                #add{float:right;}
                #sub{float:left;}
                #footer{width:100%}
                #count{padding-top:20px;font-size:35px;font-weight:bold;text-align:center;margin-left:auto;margin-right:auto;}
            </style>
            <div id="svg-wrapper"></div>
            <div id="footer">
                <a id="sub" href="#">-</a>
                <a id="add" href="#">+</a>
                <div id="count"></div>
            </div>
            <script>
                var size = 300;
                var n = 4;
                //move circles in cascade
                function move_circle(c, i, pos){
                    if(c != n || i < 0)
                        return;
                    setTimeout(function(){
                        d3.select("#c" + c + "-" + i)
                            .transition().duration(100)
                            .attr("cx", pos);
                        move_circle(c, i - 1, pos);
                    }, 20);
                }
                function make_circles(){
                    document.getElementById("svg-wrapper").innerHTML = "";
                    //calculate spacing
                    var data = [];
                    for(var j = 0; j < n; j++)
                        data.push((size - 40) / n * j + 20);
                    //generate pile of circles
                    var svg = d3.select("#svg-wrapper")
                        .append("svg")
                        .attr("width", size)
                        .attr("height", size);
                    svg.append("line")
                        .attr("x1", 40)
                        .attr("y1", data[data.length - 1])
                        .attr("x2", size - 40)
                        .attr("y2", data[data.length - 1])
                        .style("stroke-width", "2px")
                        .style("stroke", "#333333");
                    svg.selectAll("circle")
                        .data(data).enter().append("circle")
                        .attr("id", function(d, i){return "c" + n + "-" + i;})
                        .attr("cx", 150)
                        .attr("cy", function(d){return d;})
                        .attr("r", function(d, i){return (20 / n * i) + 20;})
                        .style("fill", "#FF0000")
                        .style("stroke", "#FFDDDD")
                        .style("stroke-width", "4px");
                    d3.select("#c" + n + "-" + (data.length - 1))
                        .on("touchmove", function(){
                            var xy = d3.touches(this)[0];
                            var x = Math.min(Math.max(xy[0], 40), 260);
                            d3.select("#c" + n + "-" + (data.length - 1))
                                .attr("cx", x);
                            move_circle(n, data.length - 2, x);
                        });
                    document.getElementById("count").innerHTML = n;
                }
                //add/subtract circles
                d3.select("#add").on("click", function(){
                    d3.event.preventDefault();
                    n += 4;
                    make_circles();
                });
                d3.select("#sub").on("click", function(){
                    d3.event.preventDefault();
                    n = (n <= 4) ? 4 : n - 4;
                    make_circles();
                });
                make_circles();
            </script>

<style>
                #svg-wrapper{width:300px;height:300px;margin-left:auto;margin-right:auto;border:1px solid #000000;}
            </style>
            <div id="svg-wrapper"></div>
            <div id="tilt"></div>
            <script>
                var svg = d3.select("#svg-wrapper")
                    .append("svg")
                    .attr("width", 300)
                    .attr("height", 300);
                svg.append("circle")
                    .attr("cx", 150)
                    .attr("cy", 150)
                    .attr("r", 150)
                    .style("fill", "#777777");
                var dot = svg.append("circle")
                    .attr("cx", 150)
                    .attr("cy", 150)
                    .attr("r", 40)
                    .style("fill", "#FF0000");
                if(window.screen && window.screen.mozLockOrientation && window.screen.mozLockOrientation("portrait-primary")){
                    window.ondeviceorientation = function (event) {
                        dot.attr("cx", function(){return 150 + event.gamma * 1.5;})
                           .attr("cy", function(){return 150 + event.beta * 1.5;});
                        document.getElementById("tilt").innerHTML = "Beta:" + event.beta + "<br>" + "Gamma:" + event.gamma;
                    };
                }
            </script>