title: Difficulty accessing json file with d3 and flask
body: <p>I am using Flask as a web framework, and I am trying to implement the first example from the book <em>Getting Started with D3</em>, by Mike Dewar. I have a Python script named <code>run.py</code> and two directories, <code>templates/</code> and <code>static/</code>, containing <code>index.html</code> and <a href="http://examples.oreilly.com/0636920025429/mikedewar-getting_started_with_d3-bdfc34e/visualisations/data/service_status.json" rel="noreferrer">service_status.json</a>, respectively. Unfortunately, my code is not rendering the data at all, nor is it producing any glaring errors.</p>
  
  <p>This is what I have in <code>run.py</code>:</p>
  
  <pre><code>#!/usr/bin/env python
  
  from flask import Flask, render_template, url_for
  app = Flask(__name__)
  
  @app.route('/')
  def index():
      return render_template('index.html')
  
  if __name__=="__main__":
      port = 5000
      app.debug = True
      app.run( port=port )
  </code></pre>
  
  <p>This is what I have in <code>templates/index.html</code>:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;HTML&gt;
  
  &lt;HEAD&gt;
    &lt;META CHARSET="utf-8"&gt;
    &lt;SCRIPT SRC="http://d3js.org/d3.v3.min.js"&gt;&lt;/SCRIPT&gt;
    &lt;SCRIPT&gt;
      function draw(data) {
          "use strict";
          d3.select("body")
          .append("ul")
          .selectAll("li")
          .data(data)
          .enter()
          .append("li")
          .text( function(d){
              return d.name + ": " + d.status;
              }
          );
      }
    &lt;/SCRIPT&gt;
    &lt;TITLE&gt;MTA Data&lt;/TITLE&gt;
  &lt;/HEAD&gt;
  
  &lt;BODY&gt;
    &lt;H1&gt;MTA Availability Data&lt;/H1&gt;
    &lt;SCRIPT&gt;
      d3.json("{{ url_for( 'static', filename='service_status.json') }}",draw); // &lt;---- BIG PROBLEM
    &lt;/SCRIPT&gt;
  &lt;/BODY&gt;
  
  &lt;/HTML&gt;
  </code></pre>
  
  <p>I am using Windows 7, Google Chrome, and Python 2.7.</p>