title: How can I efficiently move from a Pandas dataframe to JSON
body: <p>I've started using <code>pandas</code> to do some aggregation by date. My goal is to count all of the instances of a measurement that occur on a particular day, and to then represent this in <code>D3</code>. To illustrate my workflow, I have a queryset (from <code>Django</code>) that looks like this:</p>
  
  <pre><code>queryset = [{'created':"05-16-13", 'counter':1, 'id':13}, {'created':"05-16-13", 'counter':1, 'id':34}, {'created':"05-17-13", 'counter':1, 'id':12}, {'created':"05-16-13", 'counter':1, 'id':7}, {'created':"05-18-13", 'counter':1, 'id':6}]
  </code></pre>
  
  <p>I make a dataframe in <code>pandas</code> and aggregate the measure 'counter' by the day created:</p>
  
  <pre><code>import pandas as pd
  queryset_df = pd.DataFrame.from_records(queryset).set_index('id')
  aggregated_df = queryset_df.groupby('created').sum()
  </code></pre>
  
  <p>This gives me a dataframe like this:</p>
  
  <pre><code>          counter
  created          
  05-16-13        3
  05-17-13        1
  05-18-13        1
  </code></pre>
  
  <p>As I'm using <code>D3</code> I thought that a <code>JSON</code> object would be the most useful. Using the <code>Pandas</code> <code>to_json()</code> function I convert my dataframe like this:</p>
  
  <pre><code>aggregated_df.to_json()
  </code></pre>
  
  <p>giving me the following <code>JSON</code> object</p>
  
  <pre><code>{"counter":{"05-16-13":3,"05-17-13":1,"05-18-13":1}}
  </code></pre>
  
  <p>This is not exactly what I want, as I would like to be able to access both the date, and the measurement. Is there a way that I can export the data such that I end up with something like this?</p>
  
  <pre><code>data = {"c1":{"date":"05-16-13", "counter":3},"c2":{"date":"05-17-13", "counter":1}, "c3":{"date":"05-18-13", "counter":1}}
  </code></pre>
  
  <p>I thought that if I could structure this differently on the <code>Python</code> side, it would reduce the amount of data formatting I would need to do on the <code>JS</code> side as I planned to load the data doing something like this:</p>
  
  <pre><code>  x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain(d3.extent(data, function(d) { return d.counter; }));
  </code></pre>
  
  <p>I'm very open to suggestions of better workflows overall as this is something I will need to do frequently but am unsure of the best way of handling the connection between <code>D3</code> and <code>pandas</code>. (I have looked at several packages that combine both <code>python</code> and <code>D3</code> directly, but that is not something that I am looking for as they seem to focus on static chart generation and not making an svg)</p>