CODEWITHSUNDEEP
pythondjangod3.jsintegration
Jason J
Jason J

Reputation: 97

D3.js Directed Graph Django Integration

I have a simple Django application that queries a database and displays the fields of the objects returned. I was wondering what would be the best way to go about integrating this directed graph visualisation into my project; I've never worked with d3 until now.

Allow me to explain my application. At the moment, it's simply a form that allows users to query contents of the database regarding information on books, by entering the unique ID of a book. This works fine, the contents are displayed through the use of a template.

What I wish to do is used one of the fields of the queried objects to push data into the graph example above, and simply display this graph in a new window when a text-link is pressed.

Here's my application structure:

Code

myapp.models.py:

from django.db import models

class Book(models.Model):
    uid = models.IntegerField(primary_key=True)
    title = models.CharField(max_length=30)
    related_books = models.CharField(max_length=2048)
    class Meta:
        db_table = u'books'

The field related_books contains the data I wish to graph. The data is stored in the format rel_book1 rel_book2 rel_book3 ... where each book is related to the queried Book object, there are n related books for each object, but there is at least always two.

myproject.templates.search.html:

<form action="" method="get">
<label for="id_q">Search:</label>
<input id="id_q" name="q" type="text">
<input type="submit" value="Submit">

{% if found_entries %}
    <ul>
        {% for i in found_entries %}
            {{ i.uid }} {{ i.title }} {{ value|linebreaks }}
        {% endfor %}
    </ul>
{% endif %}
</form>

So this is where I'd like to display the graph; in a new window when a text-link is pressed.

myapp.views.py:

from django.shortcuts import render_to_response
from django.template import RequestContext
from myapp.search import get_query
from myapp.models import Book

def search(request):
    query_string = ''
    found_entries = None

    if ('q' in request.GET) and request.GET['q']:
        query_string = request.GET['q']
        found_entries = Book.objects.filter(uid=query_string)

    return render_to_response('search.html',
                        { 'query_string': query_string, 'found_entries': found_entries },
                          context_instance=RequestContext(request))

So just to reiterate, a user enter a unique ID for a given book and contents of the database related to that book are displayed. At the moment the ID and title are displayed, I'd also like to display a link to the directed graph example.

So my question is, how would I go about extracting the information out of the field related_books when the Book model is queried, so that I can push this data into the graph example to generate graphs for each Book object generated?

Thanks for bearing with me!

Upvotes: 1

Views: 1543

Answers (1)

jeffknupp
jeffknupp

Reputation: 6254

It seems to me you already have enough information. Your view returns book objects that match the filter, and related_books is a member of the Book class.

You'd simply need to generate a link on the fly by iterating over the related_books attribute of each book, e.g.

{% for book in found_entries %}
# print out whatever results here
<a href="graphing_page.html?contents=
    {% for content in book.related_books %}content{% endfor %}
">Graph this</a>
{% endfor %}

I'm not sure what parameters the d3 library takes, but a list of connected components seems reasonable.

Upvotes: 1

Related Questions