Freelancer: mattsrinc
Share:
Report Entry

Final Treemap Script

Done with D3.js and completely editable/scriptable e.g. changing container background image, SVG drop shadow or filters, padding between boxes. Standard Squarify tiling method used ("golden rule") with a smart twist and all data set in script to be in the same category. Data read from CSV, easy to change to JSON or other source. Threshold for Other values set or calculated from data (e.g. 1500 or percentage of max and min value difference). Works with several thousand images though for estimated 50.000 nodes it would become slow (web browser DOM limitation) so in that case canvas output rewriting code would be needed.

Contest Entry #7 for Create Easily Updatable Treemap for deployment online (mobile and desktop)

Public Clarification Board

  • remic
    Contest Holder
    • 8 months ago

    Hi Matt, really good and I do like it. Unfortunately I think you have just been pipped to the post here by Mario's entry. Genuinely though I am really impressed - generally I would have expected a load of entries that were really not up to much. In fact I have received two entries here which are really good quality and work as per the scope requirement.

    • 8 months ago
    1. mattsrinc
      mattsrinc
      • 8 months ago

      Thank you. There is still time (22 hours and 11 minutes when writing this) to improve. I really wonder what the hidden entry has - if it is the layout (e.g. background, padding etc) only I can beat that. If it is the "bin packing" algorithm that really works in real time for more than 40 or 50 data objects, I would like to know.

      In the latter case the solution might be better. And even if it for speed my script can be rewritten to work with canvas, having best possible speed.

      • 8 months ago
  • remic
    Contest Holder
    • 8 months ago

    Impressive stuff Sergej - for sheer number apart from anything else. How is the sizing of each box decided and how straight forward is it to change what information is shown? (eg different logos). Am I right in saying this is just an expansion of your previous submission so if you reduced it down to 7 or 8 different boxes it would look the same?

    • 8 months ago
    1. mattsrinc
      mattsrinc
      • 8 months ago

      Thank you (you can call me Matt, if you wish, have two names).

      The sizing of each box is decided based on the “total” value (of a box). This is done automatically with D3.js treemap function. Of course “total” values can be adjusted for example with a logarithmic scale (that would make them more closer in size etc).

      To change the information? Just run the script with other CSV file (as I have in examples, e.g. 500 - repeated several times - social network logos, 257 - repeated twice - flags or 1067 logos). Or I can adapt it quite fast to read the JSON file if you have it - in that case a mapping needs to be scripted if not in usual tree format (parent-children relation).

      Yes, this is an expansion of my previous submission. That one used D3Plus, an additional plugin to create treemaps with D3.js easier but it choked with more than 27 rows as commented. Using D3.js directly removes this limitation, and images are downloaded as fast as a web browser can. ...

      • 8 months ago
    2. mattsrinc
      mattsrinc
      • 8 months ago

      ... So yes, for just 7 or 8 different boxes it would look the same (I believe I have added an image for that in this entry, with a “magnifying glass” icon as an example for the “Other” box).

      And since this is data oriented (javascript) visualization any image/box can have a text caption (probably not this one) and a link that can be a popup with information about that box and/or a link to some URL.

      I can do some small customizations (option to use JSON file from an URL, more parametric usage of container background image and SVG filters for images/rectangles, and Other box threshold calculation and display) as part of the contest if this entry is selected.

      • 8 months ago
  • remic
    Contest Holder
    • 8 months ago

    Thanks Sergej, looks very impressive - will take a look at the video this afternoon

    • 8 months ago
  • mattsrinc
    mattsrinc
    • 8 months ago

    https://www.dropbox.com/s/jaxxta6hhj4u153/responsive-treemap-with-images-mattsrinc.mp4?dl=0
    - a video of working script. So the design can be determined by you (please see all screenshots) though I have found what goes well together. Also drop shadows on (and rounded) rectangles might be useful.

    • 8 months ago

Show more comments Processing...