D3 Examples - Thinking hard...

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="utf-8">
        <title>Something a bit more visually appealing</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
        <style type="text/css">
            
            .outsiders {
                color: black;
                font: 24px Courier;
            }
            .collars{
                color: blue;
                font: 18px Times;
            }
            .rowers {
                color: black;
                font: 18px Times;
            }
            #text1.changeMain {
              display: none;
            }
           #text2.changeMain {
             display: none;
            }
            #text3.changeMain {
              display: none;
            }
​
            #text_at_the_top {
                color: green;
                font: 36px Courier;
            }
            #intro {
                color: black;
                font: 18px Courier;
            }
​
            rect:hover {
                fill: orange;
            }
            
            #tooltip {
                position: absolute;
                width: 150px;
                height: auto;
                padding: 10px;
                background-color: white;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                pointer-events: none;
            }
            
            #tooltip.hidden {
                display: none;
            }
            
            #tooltip p {
                margin: 0;
                font-family: sans-serif;
                font-size: 16px;
                line-height: 20px;
            }
        </style>
    </head>
    <body>
        
        <div id="text_at_the_top">
            <p>The frequency of digits in Josh's bank account</p>
        </div>
​
        <table id="table1">
            <tr id="row1">
                <div id="outside" class="outsiders">HELLO?</div>
                <td id="nav">
                    <div id="intro" class="changeMain">
                        <!--<button id="showhide" onclick()>Text1</button>
                        <button id="showhide" onclick()>Text2</button>
                        <button id="showhide" onclick()>Text3</button>-->
                    </div>
                    <div id="chart" class="changeMain">
                        
                    </div>
                    <div id="link" class="changeMain">
                        
                    </div>
                </td> 
                <td id="main">
                    <div id="tooltip" class="hidden">
                        <p><span id="value"></span></p>
                        <p><span id="frequency"></span></p>
                    </div>
                </td>
            </tr>
        </table>
​
​
        <script type="text/javascript">
            
            var w = 600;
            var h = 600;
            var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
            var dataset = [311, 304, 311, 198, 221, 208, 164, 181, 167, 229];
​
            var xScale = d3.scale.ordinal()
                            .domain(d3.range(dataset.length))
                            .rangeRoundBands([0, w], 0.05);
​
            var yScale = d3.scale.linear()
                            .domain([0, d3.max(dataset)])
                            .range([0, h]);
​
            var nav = d3.select("#nav")
                .append("svg")           
                .attr("width", w/4)      
                .attr("height", h);
                
            var main = d3.select("#main") 
                .append("svg")           
                .attr("width", w)      
                .attr("height", h);
​
            var color = 1;
​
            d3.select("#intro").append("p").text("here I am");
            
            d3.select("#row1").append("div").attr("class", "outsiders")
              .append("div").text("I am here?");
​
            d3.select("#table1")
              // .append("tr").attr("id", "row2").attr("class", "rowers")
              // // .select("#row2")
              // // .append("td").attr("id", "col2").attr("class", "collars")
              .append("div").text("Wat duck wat?");
​
​
​
​
​
​
        </script>
    </body>
</html>
    