Plugging hierarchical data from R into d3

Here I show how to convert tabulated data into a json format that can be used in d3 graphics. The motivation for this was an attempt at getting an overview of topic models (link). Illustrations like the one to the right are very attractive; my motivation to learn how to make them was that the radial layout sometimes saves a lot of space - in my case when visualising tree diagrams. But, this type of layout is hard to do in R.  d3 can be used with data in both csv and json format, and has a method 'nest' to convert tabular data into a hierarchical structure. When I started out with d3, though, this was all over my head, and this post shows how to make the conversion from tabular data to json in R.

This post has three parts:
1) I map topics about Stalin to illustrate how this approach can be used to visualise topic models
2) I go through a function to shape data for use in d3 illustrations
3) I end with variations on how to show complexity in topic models



d3 visualisations can be very effective: they are interactive, often colourful, and very flexible. d3, though, has a steep learning-curve, one which in my case is not yet leveling out, so my approach here was to find a template I liked and see how I could plug in my data.These will still need some customisation to present topic models exactly the way I want.

Links between the most common topics in texts about Stalin, adapted from Mike Bostock:



The logic behind the illustration is as follows: the topics are ordered using a hierarchical clustering function, meaning highly correlated topics are grouped together. Then the strongest correlations between the clusters are drawn in the center. In this way we also see associations between thematically distant topics. In the case of the illustration above, there are apparently two main types of text about Stalin: firstly, Stalin features in debates about ideology, and politics, and secondly within texts about culture and lifestyle. Curiously there are few strong links across this divide, the clearest example of a bridge being the 'culture and civilisation' topic, which correlates both with debates about the Russian opposition, and with topics labelled as 'poetry' and 'books and reading'.

Moving data between R and d3
My first steps in using d3 involved plugging my own data into an example; the one we use below comes from here. If you explore the sourcecode of that page, you will notice four things are happening:
1) Html holds all the bits together: <html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

2) Formatting of the content is defined in css. Thus to change font-size of the labels, or the color of the arcs, you would edit the style sheet. For instance, nodes are displayed using fontsize 10:
.node{font-size:10px;}

3) The d3 javascript libraries are loaded

4) The d3 code shapes the visualisation.

The key part here is how the data is loaded: a separate file, called "flare.json" holds the data.

To me JSON looks a lot like a combination of python lists and dictionaries. Take a look at the first few lines here

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
...

It's not as complicated as it looks: Starting at the top of the tree, 'flare' is the central node. The first node it connects to is 'analytics', which connects to 'cluster', and finally 'agglmerativeCluster'. This branch of the tree is mapped at 12 o'clock in the visualisation.

It may not be immediately obvious, but this is a structure we can recreate. My code and data can be found here1) use hclust() to create a hierarchy
2) create a table of the hierarchy
3) convert this to JSON
In the end we will create a function which takes four inputs:
dt (a data.table)
groupVars (a list of variables containing meta information)
dataVars (the variables containing data)
outfile (the destination file)

First up we calculate a correlation matrix. Next we create a hierarchy using hclust()


now we split the data based on membership structure. We will take four levels. this means we will calculate which group each variable belongs in for different levels of the tree structure:


We combine these variables together with the variable labels and order from the hierarchical clustering. Here we can add in any other information, such as size, or colour. Then we sort the data by the order variable, just so everything is positioned in the right place (not necessary for this example, but if you have a more complex visualisation you will be glad you did this) :

This gives us a nice tabulated output:




Here we can see that V80 is in group 1 at the first split, group2 at the second, group 8 at the third, and 14th at the fourth.

Here is the tricky bit: we use a recursive function (this means the function calls itself as long as a condition is true) to create a list structure. Modifying this function to suit your needs will be the trickiest bit here. The first condition specifies that if there are more than two columns in the data frame, then we split the dataframe into a series of smaller frames using the values in the first column. The first lapply function creates nested lists, and the second adds the label and size information.

We then wrap the toJSON function (from RJSONIO) around all of this, and write it to a file:


The output looks as follows:
{
  "name": "Centre",
  "children": [
  {
        "name": "1",
        "imports": [
        {
            "name": "1",
            "imports": [
            {
              "name": "1",
              "imports": [
              {
                "name": "1",
                "imports": [
              {
                "name": "V1",
                "size": 0.8938
              },
              {
                "name": "V92",
                "size": 1.5306
              }


Now all we've got to do is go back into the html file, and replace 'flare.json' with the path of our data output.

To visualise this, clone the d3 github and follow the steps at https://github.com/mbostock/d3/wiki to setup a local server.

Putting all that together will give the illustration below:


Topic models in d3Using the method above, it should be fairly straight forward to recreate the illustrations below.
Two possible ways of visualising topic models are using tree visualisations. The circular version of these is similar to the bundle graph above, except that the tree calculated from the correlated values is in the center, not the actual links:



Another version of this is the collapsible tree. With better labeling this could be a fruitful way forward


A third possible representation of this data is through a treemap. The advantage of the treemap is that it visualises not just relative psoition, but also relative size. It is a bitter harder to see the links between clusters, though:



Finally, circle packing allows us to get a birds-eye view of the data. Personally I think it gives a clearer view of topic clusters than do tree diagrams:

18 comments:

  1. I'm just about to plunge into d3, which looks amazing, so this is very timely. Thanks for posting it!

    ReplyDelete
  2. Nice Post,

    How did you deploy your plot to the web? I have my d3js graph running in a local server, now I want to put it to my blog. How did you do it in blogger?

    ReplyDelete
    Replies
    1. I hosted mine on github.io and used iframes to get them into the body of the post

      Delete
  3. Very helpful. I like the idea of taking a template and stuffing in our data and getting some experience this way. I'm also going to be taking the plunge into d3 here real soon

    ReplyDelete
  4. I am having trouble using your "sampleData" file to recreate the graphs, would you mind uploading it again? Thanks

    ReplyDelete
    Replies
    1. The real trouble is finding "dt" ... called the first time at "dataVars <- colnames(dt)[!colnames(dt) %in% groupVars]"

      Delete
    2. Yes, I can't remember whether I made this explicit or not, but the code assumes the input data is a data.table named dt, and that you have a vector of names, called groupVars, which should not be used in the calculations. The line you flagged up selects all columnnames not listed in groupVars. Hope this helps, R

      Delete
  5. Great work Rolf,

    I've applied all the code but json doesn't work.
    When I use "readme-flare-imports.json" from d3 (https://gist.github.com/mbostock/7607999)
    , I see completely the same output, but your json doesn't work.


    thanks in advance.

    here is first two nodes

    {
    "name": "Centre",
    "children": [
    {
    "name": "1",
    "imports": [
    {
    "name": "1",
    "imports": [
    {
    "name": "1",
    "imports": [
    {
    "name": "1",
    "imports": [
    {
    "name": "V1",
    "size": 0.8938
    },
    {
    "name": "V92",
    "size": 1.5306
    }
    ]
    },
    {
    "name": "13",
    "imports": [
    {
    "name": "V82",
    "size": 0.75103
    },
    {
    "name": "V16",
    "size": 1.2538
    }
    ]
    }

    ReplyDelete
  6. Halo semuanya, saya Rika Nadia, saat ini tinggal orang Indonesia dan saya warga negara, saya tinggal di JL. Baru II Gg. Jaman Keb. Lama Utara RT.004 RW.002 No. 26. Saya ingin menggunakan media ini untuk memberikan saran nyata kepada semua warga negara Indonesia yang mencari pinjaman online untuk berhati-hati karena internet penuh dengan penipuan, kadang-kadang saya benar-benar membutuhkan pinjaman , karena keuangan saya buruk. statusnya tidak begitu baik dan saya sangat ingin mendapatkan pinjaman, jadi saya jatuh ke tangan pemberi pinjaman palsu, dari Nigeria dan Singapura dan Ghana. Saya hampir mati, sampai seorang teman saya bernama EWITA YUDA (ewitayuda1@gmail.com) memberi tahu saya tentang pemberi pinjaman yang sangat andal bernama Ny. ESTHER PATRICK Manajer cabang dari Access loan Firm, Dia adalah pemberi pinjaman global; yang saya hubungi dan dia meminjamkan saya pinjaman Rp600.000.000 dalam waktu kurang dari 12 jam dengan tingkat bunga 2% dan itu mengubah kehidupan seluruh keluarga saya.

    Saya menerima pinjaman saya di rekening bank saya setelah Nyonya. LADY ESTHER telah mentransfer pinjaman kepada saya, ketika saya memeriksa saldo rekening bank saya dan menemukan bahwa jumlah Rp600.000.000 yang saya terapkan telah dikreditkan ke rekening bank saya. dan saya punya buktinya dengan saya, karena saya masih terkejut, emailnya adalah (ESTHERPATRICK83@GMAIL.COM)

    Jadi untuk pekerjaan yang baik, LADY ESTHER telah melakukannya dalam hidup saya dan keluarga saya, saya memutuskan untuk memberi tahu dan membagikan kesaksian saya tentang LADY ESTHER, sehingga orang-orang dari negara saya dan kota saya dapat memperoleh pinjaman dengan mudah tanpa stres. Jadi, jika Anda memerlukan pinjaman, hubungi LADY ESTHER melalui email: (estherpatrick83@gmail.com) silakan hubungi LADY ESTHER Dia tidak tahu bahwa saya melakukan ini tetapi saya sangat senang sekarang dan saya memutuskan untuk memberi tahu orang lain tentang dia, Dia menawarkan semua jenis pinjaman baik untuk perorangan maupun perusahaan dan juga saya ingin Tuhan memberkati dia lebih banyak,

    Anda juga dapat menghubungi saya di email saya: (rikanadia6@gmail.com). Sekarang, saya adalah pemilik bangga seorang wanita bisnis yang baik dan besar di kota saya, Semoga Tuhan Yang Mahakuasa terus memberkati LADY ESTHER atas pekerjaannya yang baik dalam hidup dan keluarga saya.
    Tolong lakukan dengan baik untuk meminta saya untuk rincian lebih lanjut tentang Ibu dan saya akan menginstruksikan, dan ada bukti pinjaman, hubungi LADY ESTHER melalui email: (estherpatrick83@gmail.com) Terima kasih semua

    ReplyDelete
  7. Saya Fitriani Suhesti dari kota Medan. Saya melihat postingan ibu Yanti Ari dengan detailnya bagaimana dia meminjam dari Guaranty Trust Loans untuk memulihkan usahanya dan juga mengembangkan usahanya. Ibu berkata dia tinggal di kota Medan dan saya tinggal di kota itu jadi saya memutuskan untuk menghubunginya karena saya telah kehilangan 16 juta karena penipuan hanya karena saya membutuhkan pinjaman untuk mengembangkan bisnis saya.

    Di bawah ini adalah informasinya yang saya lihat dan yang saya hubungi.

    nama ibu: Yanti Ari
    nomor telepon: +62821-1644-0184
    Nomor Whatsapp: +62821-1644-0184
    Kota: Medan
    email ibu: ariy6261@gmail.com
    Setelah saya menghubungi ibu yanti dia menceritakan semua yang perlu saya ketahui dan dia berkata kepada saya bahwa setelah saya menghubungi Guaranty Trust Loans dan menerima pinjaman saya, saya harus mencoba untuk membagikan cerita saya agar orang lain yang membutuhkan pinjaman dapat diandalkan perusahaan dapat diselamatkan dari orang-orang curang yang bukan pemberi pinjaman.

    Jadi saya mengajukan pinjaman sejumlah 500 juta Rupiah, dan mereka meminta kredensial saya yang saya serahkan dan setelah mereka selesai memverifikasi detail saya, pinjaman itu disetujui untuk saya dan saya pikir itu adalah lelucon dan mungkin itu salah satu penipuan yang membuat saya kehilangan uang, tetapi karena ibu Yanti berasal dari Medan dan saya melihat buktinya jadi saya mempercayai mereka, saya kagum ketika saya mendapatkan pinjaman dalam waktu kurang dari 24 jam dengan bunga rendah 2% tanpa jaminan. Saya sangat senang bahwa Allah memakai ibu yanti yang menghubungi mereka dan memperkenalkan saya kepada mereka dan karena saya diselamatkan dari pemberi pinjaman palsu dan juga akan mewujudkan impian bisnis saya.

    Jadi saya menyarankan semua orang yang tinggal di Indonesia, Malaysia dan belahan dunia lain yang membutuhkan pinjaman untuk satu tujuan atau yang lain untuk menghubungi Guaranty Trust Loans dan di bawah ini adalah detail mereka
    email: (anamichaelguarantytrustloans@gmail.com)
    Anda juga dapat menghubungi perusahaan dengan nomor ini: +1(470)481-0039
    jangan ragu untuk menghubungi saya jika Anda memerlukan informasi lebih lanjut melalui email: (fitrianisuhesti90@gmail.com)
    Terima kasih telah membaca cerita saya, dan semoga Allah terus melindungi dan memberkati kita semua bahkan di masa-masa sulit karena pandemi virus corona.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Salam kepada semua warga negara Indonesia, nama saya Yeyes Ristintares tolong, saya ingin membagikan kesaksian hidup saya di sini di platform ini agar semua warga negara Indonesia berhati-hati dengan pemberi pinjaman di internet, Allah benar-benar mendukung saya melalui kebaikan Ibu Ny. Helen Wilson. Setelah beberapa periode mencoba untuk mendapatkan pinjaman dari lembaga keuangan, dan ditolak, jadi saya memutuskan untuk mendaftar melalui pinjaman online tetapi saya ditipu dan saya kehilangan lebih dari 32 juta Rupiah dengan pemberi pinjaman yang berbeda setelah membayar beberapa biaya dan tidak mendapatkan pinjaman. Saya menjadi sangat putus asa dalam mendapatkan pinjaman, jadi saya berdiskusi dengan seorang teman saya yang kemudian memperkenalkan saya kepada Ny. Helen Wilson, pemberi pinjaman di perusahaan, jadi teman saya meminta saya untuk melamar dari ibu Helen, jadi saya memanggil keberanian dan menghubungi Ibu Helen.

    Saya mengajukan pinjaman 900 juta dengan tingkat bunga 2%, sehingga pinjaman itu disetujui tanpa tekanan dan semua pengaturan dibuat pada transfer kredit, karena fakta bahwa itu tidak memerlukan jaminan dan jaminan untuk pinjaman transfer saya hanya diberitahu untuk mendapatkan sertifikat perjanjian lisensi aplikasi mereka untuk mentransfer kredit saya dan dalam waktu kurang dari 48 jam uang pinjaman telah disetorkan ke rekening bank saya.

    Saya pikir itu lelucon sampai saya menerima telepon dari bank saya bahwa akun saya dikreditkan dengan jumlah 900 juta. Saya sangat senang bahwa Allah akhirnya menjawab doa saya dengan memesan pinjaman saya dengan pinjaman asli saya, yang memberi saya keinginan hati saya. mereka juga memiliki tim ahli yang akan memberi tahu Anda tentang jenis bisnis yang ingin Anda investasikan dan cara menginvestasikan uang Anda, sehingga Anda tidak akan pernah bangkrut lagi dalam hidup Anda. Semoga ALLAH memberkati Ny. Helen Wilson untuk membuat hidup saya mudah, jadi saya menyarankan siapa pun yang tertarik mendapatkan pinjaman untuk menghubungi Ny. Helen melalui email: (helenwilson719@gmail.com) atau Whatsapp: + 1-585-326-2165 untuk Anda pinjaman

    Ada perusahaan palsu lain yang menggunakan kesaksian saya secara online untuk mencapai keinginan egois mereka, saya satu-satunya dengan kesaksian yang benar ini, harap berhati-hati terhadap orang-orang ini. Akhirnya saya ingin berterima kasih kepada Anda semua karena telah meluangkan waktu untuk membaca kesaksian sejati hidup saya tentang kesuksesan saya dan saya berdoa Allah akan melakukan kehendak-Nya dalam hidup Anda. Sekali lagi nama saya Yeyes Ristintares, Anda dapat menghubungi saya untuk informasi lebih lanjut melalui email saya: yristintares@gmail.com

    ReplyDelete
  10. Assalamualaikum
    Saya membawa kabar baik kepada Anda semua warga negara Indonesia di platform ini, Tuhan telah sepenuhnya setia kepada saya dan seluruh rumah saya telah bertahan sejak Mei 2019, kesaksian saya dan kabar baik saya berjalan seperti ini, Nama saya Kartin Kiba dari Jl.P .Biak 9 No. 230 Rt.007 Rw.018 Desa Arenjaya, Jakarta Timur, Kota Bekasi, Jawa Barat, saya adalah seorang pemasar di perusahaan tempat saya bekerja, Suami saya dan saya ingin menggunakan platform ini untuk menginformasikan semua ini. Platform ini membutuhkan dan mencari pinjaman yang tulus untuk berhati-hati karena internet dan blog penuh dengan perusahaan pinjaman palsu dan penipuan yang hanya ada di sini untuk merobek uang hasil jerih payah Anda.

    Suami saya dan saya memiliki hutang besar dan kami memutuskan untuk mencari pinjaman online untuk melunasi hutang kami dan kami menghubungi perusahaan pinjaman dari Singapura yang pada bulan Desember 2018, dan kami ditipu oleh pemilik perusahaan dengan meminta kami untuk membayar banyak biaya yang kami bayar dan pada akhirnya kami tidak mendapatkan pinjaman, kami kehilangan sekitar Rp7.500.000 untuk perusahaan pinjaman palsu di Singapura karena kami mengajukan pinjaman sebesar Rp450.000.000,00 dan dengan semua biaya yang kami bayarkan kami lakukan tidak mendapatkan pinjaman dan suami saya dan saya sangat Frustrasi dan saya dipecat dari pekerjaan saya di perusahaan tempat saya bekerja karena saya juga mengambil pinjaman dari perusahaan tempat saya bekerja dan kami bangkrut dan muak dengan kehidupan.

    Jadi Tuhan itu baik, kami berdoa dan Tuhan mengarahkan kami ke seorang pelayan dan pada hari yang setia ini 20 Mei 2019, saya menjelajah internet ketika saya bisa menemukan kesaksian seorang wanita Indonesia dengan nama Yohanes Hendra Who dari Kota Bandung, bagaimana Tuhan mengubah kehidupan keuangannya melalui perusahaan pinjaman. Dia meminta saya untuk menghubungi ibu Helen dan dia memperkenalkan saya kepada ibu Helen dan dia memberi saya keberanian dan saya mengajukan pinjaman dari ibu dan ibu Helen, Helen akhirnya membantu saya mendapatkan pinjaman. di perusahaan dan saya mendapat jumlah persis yang saya ajukan dan saya sangat senang.

    Saya juga ingin menggunakan kesempatan ini untuk memberi tahu rekan-rekan saya bahwa jika Anda membutuhkan pinjaman asli yang asli dan ingin mendapatkan pinjaman cepat dengan tingkat bunga 2%, cukup mendaftar melalui Ny. Helen Wilson melalui email: (helenwilson719@gmail.com) atau Whatsapp: +1-585-326-2165. Anda juga dapat menghubungi saya melalui email ini, (kartinkiba72@gmail.com). untuk informasi lebih lanjut.

    ALLAH memberkati kalian semua!
    Terima kasih.

    ReplyDelete
  11. Your style and passion for blogging is contagious. good post

    ReplyDelete
  12. Assalamualaikum
    Data pribadi
    Negara: Indonesia
    Nama: Wahyu Sapto Handoko
    Email: wahyusaptohandoko256@gmail.com
    Alamat: Jl. Sukarela rt.02 / 05 Paninggilan, Ciledug, Tangerang
    Sudah empat tahun sekarang saya telah memberikan kesaksian tentang bagaimana saya meminjam Rp1,2 miliar dari ibu Helen dan beberapa orang meragukan saya karena tingkat penipuan online. Ibu Helen Wilson telah memberi saya satu hal lagi untuk tersenyum karena setelah menyelesaikan angsuran pinjaman bulanan yang saya pinjam sebelumnya, saya memohon kepada Ibu Helen bahwa saya ingin pergi untuk ekspansi bisnis lebih lanjut sehingga saya meminta tambahan Rp3,7 miliar setelah melalui saya proses hukum. pinjaman itu disetujui oleh manajemen mereka dan saya menerima pinjaman saya dalam waktu kurang dari 48 jam di rekening bank BRI saya. Saya tidak memiliki tantangan dengan bank karena Mrs. Helen Wilson dan tim manajemen pinjaman WEMA Finance telah dianggap sebagai pemberi pinjaman yang sah baik di Amerika Serikat, MALAYSIA, INDONESIA dan Rumania, sehingga tidak ada masalah sama sekali.
    Untuk pinjaman apa pun, saya sangat merekomendasikan Ibu Helen Wilson hari ini dan selalu
    Email: (helenwilson719@gmail.com)

    WA: +1-585-326-2165

    Waalaikumsalam Warahmatullahi Wabarakatuh

    ReplyDelete