project viability. D3 with AJAX?

[r34ch]

Hey everyone, I have a question to see if this is possible using D3 and if there is a better way of accomplishing the task.

I am going to be working on a website which contains webpages of projects and I have been assigned to build a visual navigational tool to navigate these pages. The webpages use php to extract information from a mySQL database and populate the pages with information.

The navigational tool I wish to embed will effectively be a force-directed graph where navigation is done by clicking on nodes.

When a node is clicked in the D3 diagram, I wish to communicate with the mySQL server to then update the rest of the webpage with the new information. Now I realise php causes a new page load when returning information and this obviously spells disaster for an embedded navigational tool so I am considering using AJAX to get round this.

But how possible is this using D3? I did a quick search but didn't find much. Has anyone attempted this before? Will the graph continue to function as normal with only the rest of the webpages text being updated?

Cheers for any help,

[Ian Johnson]

It sounds very plausible to me.

d3 is a javascript library, so as long as the following example works so would using d3 force directed nodes:

To begin with you could just set up a few buttons, clicking different buttons loads different text from the php/mysql call thru ajax. 

then replace the buttons with a force diagram, setting click handlers on your nodes to fire the same javascript functions your buttons used to call.

then all you have to do is learn d3 ;)

--
Ian Johnson

http://enja.org

[Mike Bostock]

You can load HTML fragments using d3.html. Here's a 20-line
implementation of PJAX, which loads partial HTML fragments using XHR.

http://bl.ocks.org/1367999

Mike

[Chris Viau]

I didn't knew about PJAX. Interesting. @r34ch, you could also use all the D3 request methods to simplify your AJAX queries. Binding an event to nodes could trigger a request on click and refresh part of the page.

[Kyle Foreman]

I've done this via some php:

<?php

// load in mysql server configuration

include 'mysqlConfig.php';

// connect to the database

$pdo = new PDO($dsn, $username, $password);

// make an empty array in which to put the data

$rows = array();

        // prepare a query for the year passed in via POST

        $stmt = $pdo->prepare('SELECT * FROM table WHERE year='.$_GET['year'].';');

// query the database

$stmt->execute(array('year'));

        // return the results in json format

echo json_encode($rows);

Then I just use d3.json() to retrieve it, e.g.:

        

        data = {};

        d3.json('data_by_year?year=' + year, function(json) {

                 data[year] = json;

                 update_visualization();

        });

It works great when you have hundreds of millions of datapoints and only need to display a few thousand at any given time.

[r34ch]

Thanks everyone for the quick and informative responses and code snippets, I think its safe to take a stab at this now. Just one last question. 

I noticed some of the D3.js examples run really slow on Firefox (yet surprisingly well on IE9) Apart from mobile browsers and IE8 and below, are there any other browsers D3 doesn't work well on? Safari or Opera? I have read some threads about mixing raphael with D3 to get universal compatibility, is this the best solution?

Cheers again