D3 Examples

VI3
#Juliette Pardue
##Learned from D3 Tutorial
For scatterplots, how to use the radius attribute to encode size.
Using scales to specify a valid range where data values can be mapped to. So all data values will fall into the specified range after the mapping or normalizing has been applied.
How to format aesthetically pleasing axis as true values or percentages. However, I preferred the true values for this example since the percentages didn't make sense.
How to create transitions by specifying the ending attributes of the object and the transition effects.
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
            .axis path, .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
​
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
            
            svg {overflow:hidden;}
            #button {display:inline-block;}
            .btn {display:inline-block;*display:inline;/* IE7 inline-block hack */ *zoom:1;padding:4px 10px 4px;margin-bottom:0;font-size:13px;line-height:18px;color:#333333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#ffffff,#e6e6e6);background-image:-ms-linear-gradient(top,#ffffff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#ffffff,#e6e6e6);background-image:-o-linear-gradient(top,#ffffff,#e6e6e6);background-image:linear-gradient(top,#ffffff,#e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:dximagetransform.microsoft.gradient(enabled=false);border:1px solid #cccccc;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);cursor:pointer;*margin-left:.3em;} .btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] { background-color:#e6e6e6;} .btn:active,.btn.active { background-color:#cccccc \9;} .btn:first-child { *margin-left:0;} .btn:hover { color:#333333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-ms-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;} .btn:focus { outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} .btn.active,.btn:active { background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);background-color:#e6e6e6;background-color:#d9d9d9 \9;outline:0;} .btn.disabled,.btn[disabled] { cursor:default;background-image:none;background-color:#e6e6e6;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn-mini { padding:2px 6px;font-size:11px;line-height:14px;}}
            svg {border:1px solid black;}
        </style>
    </head>
    <body style="text-align:center;margin-top:5px;">
        <div id="chart_a" style="width:450px;height:250px;display:inline-block;text-align:center;"></div>
        </br>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script type="text/javascript">
            //Width and height
            var w = 450;
            var h = 250;
            var padding = 30;
​
            //Dynamic, random dataset
            var dataset = [];           //Initialize empty array
            var numDataPoints = 50;         //Number of dummy data points to create
            var xRange = Math.random() * 1000;  //Max range of new x values
            var yRange = Math.random() * 1000;  //Max range of new y values
            for (var i = 0; i < numDataPoints; i++) {           //Loop numDataPoints times
                var newNumber1 = Math.round(Math.random() * xRange);    //New random integer
                var newNumber2 = Math.round(Math.random() * yRange);    //New random integer
                dataset.push([newNumber1, newNumber2]);         //Add new number to array
            }
​
            //Create scale functions
            var xScale = d3.scale.linear()
                .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                .range([padding, w - padding * 2]);
​
            var yScale = d3.scale.linear()
                .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                .range([h - padding, padding]);
​
            var rScale = d3.scale.linear()
                .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                .range([2, 5]);
​
            //var formatAsPercentage = d3.format(".1%");
​
            //Define X axis
            var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .ticks(5)
                /*.tickFormat(formatAsPercentage)*/;
​
            //Define Y axis
            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left")
                .ticks(5)
                /*.tickFormat(formatAsPercentage)*/;
​
            //Create SVG element
            var svg_a = d3.select("#chart_a")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
​
            //Create circles
            svg_a.selectAll("circle")
                .data(dataset)
                .enter()
                .append("circle")
                .attr("cx", function(d) {
                    return xScale(d[0]);
                })
                .attr("cy", function(d) {
                    return yScale(d[1]);
                })
                .attr("r", function(d) {
                    return rScale(d[1]);
                });
​
            //Create X axis
            svg_a.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + (h - padding) + ")")
                .call(xAxis);
​
            //Create Y axis
            svg_a.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + padding + ",0)")
                .call(yAxis);
        </script>
        
        <div id="chart_b" style="width:500px;height:250px;display:inline-block;text-align:center;">
            <svg xmlns="https://www.w3.org/2000/svg" version="1.1" width="500" height="200"></svg>
            <button class="btn btn-mini" id="button">Transition</button>
        </div>
        
        <script>
            data={
                title:"All combined!",
                shapes:[{
                    type:"path",
                    init:{
                        attr:{
                            "d":"m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z","transform":"translate(60,120)"
                        },
                        style:{stroke:"blue",fill:"white"}
                    },
                    transition:{
                        attr:{
                        "d":"m 0,-60 l 40,20 l 20,40 l -20,40 l -40,20 l -40,-20 l -20,-40 l 20,-40 z",
                        "transform":"translate(440,120) rotate(180)"
                        },
                        style:{stroke:"white",fill:"blue"},
                        next:{
                            type:"circle",
                            attr:{cx:440,cy:120,r:250},
                            style:{fill:"green",opacity:0},
                            next:{
                                attr:{r:0},
                                style:{fill:"yellow",opacity:1},
                                next:{remove:true}
                            }
                        }
                    }
                }]
            };
            
            var svg_b=d3.select("#chart_b").select("svg");
            svg_b.selectAll(".vline").data(d3.range(26)).enter()
                .append("line")
                .attr("x1",function(d){return d*20;})
                .attr("x2",function(d){return d*20;})
                .attr("y1",function(d){return 40;})
                .attr("y2",function(d){return 250;})
                .style("stroke","#eee");
            svg_b.selectAll(".vline").data(d3.range(2,13)).enter()
                .append("line")
                .attr("y1",function(d){return d*20;})
                .attr("y2",function(d){return d*20;})
                .attr("x1",function(d){return 0;})
                .attr("x2",function(d){return 500;})
                .style("stroke","#eee");
            
            var button=d3.select("#button");
            if (data.button==="none") {button.remove();}
            var mode=0;
            var modes=[{state:"init",title:"Transition"},{state:"transition",title:"Reset"}];
            
            d3.select("#title").html(data.title);
            data.shapes.forEach(function(d,i) {
                // here we create shapes according to the parameters of the data file.
                var myshape=svg_b.append(d.type).attr("id","s"+i); // taking into account the type of the shape, 
                var state=d.init; // noting that these are the initial state.
                set(myshape,state);
            })
            
            button.on("click",function() {
                mode=1-mode;
                button.html(modes[mode].title);
                data.shapes.forEach(change)
            });
            
            function change(d,i){
                var state=d[modes[mode].state];
                var myshape=svg_b.select("#s"+i).transition().duration(state.duration||1000).delay(state.delay||0).ease(state.ease||"cubic-in-out");
                // so transition if going through a transition, reset if going through a reset
                set(myshape,state);
            }
            
            function set(selection,state,createTransition) {
                if(state.remove) {
                    selection.remove();return;
                }
            
                d3.keys(state.attr).forEach(function(a) {
                    selection.attr(a, state.attr[a]); // all of its attributes
                });
                if (state.text) {
                    selection.text(state.text);
                };
                d3.keys(state.style).forEach(function(s) {
                    selection.style(s, state.style[s]); // and all of its style properties
                });
            
                if(state.next)  {
                    var next=state.next;
                    if (next.type) {
                        selection.each("end",function() {
                            set(svg_b.append(next.type),next,true); // we are creating a new shape  
                        })
                    }
                    else {
                        if(createTransition) {
                            selection=selection.transition().duration(0);
                        }
                        selection.each("end",function() {
                            set(d3.select(this).transition().duration(next.duration||1000).delay(next.delay||0).ease(state.ease||"cubic-in-out"),next);
                        });
                    }
                }
            }
        </script>
    </body>
</html>
    