D3 Examples - Module 3

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Adding Tooltips</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: #ddddff;
            }
​
            svg {
                background-color: white;
            }
            rect {
                fill: #8080ff;
                opacity: 0.1;
            }
            rect.red {
                fill: #ff0000;
                opacity: 1;
            }
            rect.orange {
                fill: orange;
            }
​
        </style>
    </head>
    <body>
​
        <script type="text/javascript">     
        
            var uberscaler = 4;
​
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 600)
                        .attr("height", 900);
​
            // I'm half expecting this line gets obscured by the bar chart rendered later.  Which would be true but then I've set an opacity on the bars...
            // And this should be in a scale loop                       
            d3.select("svg")
                .append("line")
                .attr("x1",100*uberscaler)
                .attr("y1",0)
                .attr("x2",100*uberscaler)
                .attr("y2",900)
                .attr("stroke-width","1px")
                .attr("stroke","green");
                
            d3.select("svg")
                .append("line")
                .attr("x1",50*uberscaler)
                .attr("y1",0)
                .attr("x2",50*uberscaler)
                .attr("y2",900)
                .attr("stroke-width","1px")
                .attr("stroke","green");
                
​
            d3.csv("Corey.RTU-3-short.csv", function(data) {
​
                data.sort(function(a, b) {
                    return d3.descending(a['64651.Corey Building.RTU-3.Mixed AIr Temp']*1, b['64651.Corey Building.RTU-3.Mixed AIr Temp']*1);
​
                });
​
                var rects = svg.selectAll("rect")
                                .data(data)
                                .enter()
                                .append("rect");
​
                rects.attr("x", 0)
                    .attr("y", function(d, i) {
                        return Math.floor(i * 0.1);
                    })
                    .attr("width", function(d) {
                        return Math.floor(d['64651.Corey Building.RTU-3.Mixed AIr Temp'] * uberscaler)  ;
                    })
                    .attr("height", 1)
                    .attr("class", function(d,i) {
                        if (i/100 == Math.floor(i/100)) {
                            return "red";
                        } else {
                            return "";
                        }
                    })
                    .append("title")
                    .text(function(d,i) {
                        return i + " value is " + d['64651.Corey Building.RTU-3.Mixed AIr Temp'];
                    });
                
                // Confidence bands
                // PROBLEM: I want the width of the band to be semi-dependent on the width of the previous value, not purely random,
                // so I need a local var inside of the rects2 loop somehow.
                
                var rects2 = svg.selectAll("rect2")
                                .data(data)
                                .enter()
                                .append("rect");
​
                rects2
                    .attr("x",function(d,i) {
                        var randwid = Math.random()*100;
                        return Math.floor(d['64651.Corey Building.RTU-3.Mixed AIr Temp'] * uberscaler) - randwid;
                    })
                    .attr("y",function(d,i) {
                        return Math.floor(i * 0.1);
                    })
                    .attr("width",Math.random()*100*2)
                    .attr("height",1)
                    .attr("class","orange");
                    
                                        
​
            });
​
​
        </script>
​
    </body>
</html>
    