title: d3 implementation works on firefox/chrome, but not iPad
body: <p>So I have some source code that uses d3.json to fetch some json with an HTTP get request and visualize it...it works perfectly fine on chrome and firefox, but when I try to run it on a mobile verison of safari or chrome, it breaks. When running on iOS safari, the js finds a null type error when encountering a null "d" object...</p>
  
  <pre><code>&lt;em&gt;&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="d3.v2.js"&gt; 
  &lt;/script&gt;
  
  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="syntax.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="pack.css" type="text/css"&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  
      &lt;div id="chart"&gt;&lt;/div&gt;
      &lt;svg width="960" height="960" class="pack"&gt;
      &lt;script type="text/javascript"&gt;
  
  
      setInterval(function(){
          var width = 960,
              height = 960,
              format = d3.format(",d");
  
          var pack = d3.layout.pack()
              .size([width - 4, height -4])
              .value(function(d) { return d.size; });
  
          var vis = d3.select("#chart").append("svg")
              .attr("width", width)
              .attr("height", height)
              .attr("class", "pack")
              .append("g")
              .attr("transform", "translate(2, 2)");
  
          d3.json("http://localhost:8080/cluster", function(json) {       
  
                  //do visualization
                  var node = vis.data([json]).selectAll("g.node")
                   .data(pack.nodes)
                   .enter().append("g")
                   .attr("class", function(d) {return d.children ? "node" : "leaf node" ;})
                   .attr("transform", function(d) {return "translate(" + d.x + "," + d.y +")"; });
  
                  node.append("title")
                      .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });
  
                  node.append("circle")
                  .attr("r", function(d) { return d.r; });
  
                  node.filter(function(d) { return !d.children; }).append("text")
                  .attr("text-anchor", "middle")
                  .attr("dy", ".3em")
                  .text(function(d) { return d.name.substring(0, d.r / 3); });
  
          }
  );
                  //log
      }, 1000);
  
  
  
  
  
          &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;/em&gt;
  </code></pre>
  
  <p>This is how I set up my server using jetty...</p>
  
  <pre><code>public static void main(String[] args) {
      configureLogger();
      Server server = new Server(PORT);
  
      ResourceHandler resource_handler = new ResourceHandler();
      resource_handler.setDirectoriesListed(true);
      resource_handler.setWelcomeFiles(new String[]{ "index.html" });
  
      resource_handler.setResourceBase("src/resources");
      ServletHandler handler = new ServletHandler();
      handler.addServletWithMapping(VisServlet.class, "/cluster");
  
      HandlerList handlers = new HandlerList();
      handlers.setHandlers(new Handler[] { resource_handler, handler, new DefaultHandler() });
      server.setHandler(handlers);        
  
  
      try {
          server.start();
          log.info("Starting server on port " + PORT + "...");
          server.join();
      } catch (Exception ex){
          System.exit(-1);
      }
  
  }
  </code></pre>