Node focus explorer without excel

Up till now we've been considering a solution for Focus node explorer with d3.js that leverages massaging the data from Analyzing site content with GAS using the stuff we already had from d3.js. That solution also means that you can use the same solution for any data, regardless of how you created it.  However, Excel doesn't even have to be involved at all. Using the standalone html file generated in Focus node explorer with d3.js, we just need to replace the data source function. 

In this case I'm going to  use the raw data from Analyzing site content with GAS and massage it directly. 

The source data

When I first wrote this, Google Drive was able to be used as a hosting service. That's been deprecated, so now I'm using Cloud Storage and Apps Script to write the results to as well as host it. If you want you can use Drive, but you'll need to find somewhere to host the result. How to do all that is described in Node focus on Blogger posts, and the material it references there. For the rest of this post, I'll assume you've got your data file to some hosting place. I'm using google cloud storage. The data looks like this.

    "data": [
        {
            "parent": "share",
            "name": "images",
            "key": "images_0",
            "url": "https://sites.google.com/a/mcpher.com/share/images",
            "title": "zzz",
            "tags": {
                "tagmap": [
                    {
                        "name": "d3",
                        "values": [
                            "d3",
                            "d3js",
                            "d3.js"
                        ],
                        "counts": [
                            0,
                            0,
                            0
                        ]
                    },
                    {
                        "name": "vba",
                        "values": [
                            "vba",
                            "vb"
                        ],
                        "counts": [
                            0,
                            0
                        ]
                    },
                    {
                        "name": "excel",
                        "values": [
                            "excel",
                            "xl"
                        ],
                        "counts": [
                            0,
                     etc....

Data retrieval and massage functions

You may need to play with some or all of these functions. If you have replicated the Analyzing site content with GAS for your own site then this should work as is (if you don't need a proxy - see Node focus on Blogger posts, as the code has one built in, otherwise you will need to modify the massage function at least to match your data structure.

data massage functions


getTheData()

You probably wont need to change this at all. 

dataMassage()

This creates options, nodes and links from the input data, and emulates what Site data to sheets and Excel tables to d3.js Force diagram do. You won't need to change this (apart from perhaps some of the options), if you are using Analyzing site content with GAS.

getTheRawData()

You may need to change the proxy and what it returns if you are not using one, or have one of your own.

findOrAddNode()

This probably won't need changing.

The result

Here's the end result, accessing the data directly from Google Cloud Storage. It'll take a while to settle down as there's lots of data. You also run it here.

d3 node force explorer



The Code


And here's the complete code


data massage functions


For more on this , see GAS and sites and d3.js. For help and more information join our forum,follow the blog or follow me on twitter .
For more stuff see my book - Going Gas.  All formats are available now from O'Reilly,Amazon and all good bookshops. You can also read a preview on O'Reilly.


Comments