Question

I’ve started to build a web-app using d3 and django. d3 builds on the DOM of course and it is not clear to me, where in the stack objects and functions should reside and how there are passed on. For example I have a model of items, which has a certain value, say size. Now I want to display those elements based on size, for example the radius. I have a list of those and pass them on to d3. I do the scaling first and then pass on the raw values, instead of using d3.scale. I use django templates to produce javascript code, which seams not like a good idea.

From the description of the d3 it seems there is quite a bit of overlap: “D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.” I’m looking into CouchDB and MongoDB as well, and am a bit puzzled how all these layers can interact.

// simple example using django with d3
// routing with django
values = [float(item.size) for item in itemlist] // get model-data
//scale values in django/python                   
values = [round(x/(max(values)),3) for x in values]                         
html += t.render(Context({'values':values})) 


//template producing javascript given the values from python
{% for value in values %}                                                 
     data.push({"x":{{value}},"y":0.5})                                     
{% endfor %} 

//paint data with d3 based on DOM

Answer 1

I have found the best is probably not to go with django when using d3, but use own’s one mappers etc (Cherrypy, Pylons, etc.).