title: How to implement Javascript within Salesforce Visual Force?
body: <p>I'm currently trying to implement javascript and html within Visual force in order to produce a graph.The below script is suppose to do this, but all I see is a blank page. The resources I'm importing include </p>
  
  <ul>
  <li>jquery</li>
  <li>D3</li>
  <li>Dc</li>
  <li>Crossfilter</li>
  <li>firebase</li>
  <li>twitter bootstrap</li>
  <li>dc.css</li>
  <li>bootstrap.css</li>
  </ul>
  
  <p>Perhaps, it's the way I'm importing libraries through their src link, but this hasn't posed a problem before. </p>
  
  <pre><code>&lt;apex:page showHeader="false" standardStylesheets="false"&gt;
  &lt;head&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" media="screen" /&gt; 
  
  &lt;link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="screen" /&gt; 
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class='pie-graph span6' id='dc-magnitude-chart'&gt;&lt;/div&gt;
  &lt;script type = "text/javascript"&gt;
  
  
  new Firebase('https://MYFIREBASE.firebaseIO.com/BetaActivities').on('value', function (snapshot) {
      var lst = [];
      snapshot.forEach(function(childSnapshot) {lst.push(childSnapshot.val());});
      ndx = new crossfilter(lst);
  
      var XDimension = ndx.dimension(function (d) {return d.Owner;});
      var YDimension = XDimension.group().reduceCount(function(d) {return d.Owner;});
      dc.barChart("#dc-magnitude-chart")
          .width(480).height(150)
          .dimension(XDimension)                                
          .group(YDimension)
          .centerBar(true)
          .gap(56)
          .x(d3.scale.ordinal().domain(XDimension))
          .xUnits(dc.units.ordinal)
          .xAxisLabel("Market Developer")
          .yAxisLabel("Unique Counts")
          .elasticY(true)
          .xAxis().tickFormat(function(v) {return v;}); 
      dc.renderAll();
  
      });
  
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  
  &lt;/apex:page&gt;
  </code></pre>