Initial d3 barchart

Joe Hanley · Joe Hanley · commit af26ce8027af · 2013-06-19T10:02:11.000-04:00
diff --git a/bootstrapTest.css b/bootstrapTest.css
@@ -13,7 +13,16 @@ body{
     text-align:center;
     border-radius:3px;
 }
-
+#beenHereBefore{
+    position:absolute;
+    top:10px;
+    right:15px;
+    background-color:#EEEEEE;
+    border: 1px solid #CCCCCC;
+    padding: 10px;
+    
+        
+}
 #logo{
     position:relative;
     width:100px;
@@ -83,6 +92,7 @@ body{
     
 }
 #helpText{
-    color:
+    position:relative;
+    top:30px;
     
 }
diff --git a/bootstrapTest.html b/bootstrapTest.html
@@ -6,26 +6,29 @@
 </head>
 
 <body>
-<div class = 'container'>
+<div id='beenHereBefore'>
+    <a href=http://google.com>Been here before?</a>
+</div>
+<div class = 'container-fluid'>
    
     <div class = 'row-fluid'>
     
-        <div id = 'mainbox' class = 'span8 offset2'>
+        <div id = 'mainbox' class = 'span8 offset3'>
             <div id = 'contentBox' class=''>
                 <img id = 'logo' src="http://beathound.com/bh-icon.png" >
                 <h2 id='logoText'><span id='beat'>Beat</span><span id='hound'>hound</span></h2>
                 <h2 id='splashText'>New releases from the artists you love,straight to your inbox every week.</h2>
                 <span id='uploadNowText'>Upload your iTunes library XML file to find out what you've been missing.</span>
-                <form id='form'>
+                <form id='form' class="row-fluid">
                     <div id='getFile'>Upload your file
                         <button>Choose file</button>
                         No file chosen
                     </div>
                     <input id='emailInput' type="text" placeholder="email my results to...">
-                    <div><button id='analyze'>
-                        <span style="color:#FFFFFF"> Analyze</span></button>
+                    <div><button id='analyze' class = 'btn btn-success'>
+                        Analyze</button>
                     </div>
-                    <span id='helpText'>Need help?</span>
+                    <a id = 'helpText' href=http://google.com>Need help?</a>
                 
                 </form>
             </div>
diff --git a/day8/visual.css b/day8/visual.css
@@ -0,0 +1,6 @@
+.chart div {
+    background-color:#aac8dd;
+    color:#fff;
+    border: 1px solid #99b8cc;
+    
+}
diff --git a/day8/visual.html b/day8/visual.html
@@ -0,0 +1,19 @@
+<html>
+<head>
+    <title>Visualizations</title>
+    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js'></script>
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <link href='visual.css' rel = 'stylesheet'>
+</head>
+<body>
+    <div class='chart-container'>
+    <script src='visual.js'></script>
+    
+    </div>
+    
+    
+</body>
+
+
+
+</html>
diff --git a/day8/visual.js b/day8/visual.js
@@ -0,0 +1,10 @@
+var dataList = [0,4,8,8,15,16,23,42];
+
+var x_scale = d3.scale.linear()
+                .domain([0,d3.max(dataList)]).range(['0%', '100%']);
+
+var chart = d3.select(".chart-container").append("div").attr("class","chart");
+
+chart.selectAll("div").data(dataList).enter().append("div")
+.style("width", x_scale)
+.text(function(d) {return d});
