Freelancer: mattsrinc
Share:
Report Entry

Scripted treemap with full options

I have started a script to change CSV (also JSON), tile method, rounded corner width for a box, padding (width between boxes), box (SVG) filter and background image. This is worth the contest prize. Later it can be expanded to saving SVG etc.

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

Public Clarification Board

  • remic
    Contest Holder
    • 8 months ago

    Hi Matt, this is really good work and definitely you have done more than enough work here to justify the prize - I slightly prefer the other entry so have unfortunately awarded it to them. Thank you for your work and obvious talent - there are two entries here that are good enough to warrant the prize.

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

      SVG useless for a treemap? Good luck if you believe small PNG and JPG images will scale well on screen.

      CSS and SVG gradients are beyond typical business user knowledge. Even creating and copying&pasting them from the web. Unless your business clients all have technical web skills.

      I have not come late here. “Easily Updatable Treemap” is a broad term. Typical business user can edit an Excel table. And if he can do that he can export it to CSV and use in a treemap solution. I haven’t received a comment from a contest holder (like you did) that he would like to have JSON editing solution. And of course Vue.js is not a component but you can create and add (existing) components to a final web page solution as far as I know:
      https://vuejs.org/v2/guide/components.html

      Signing off, congratulations yet you’re wrong with SVG for this project.

      • 8 months ago
    2. marioada
      marioada
      • 8 months ago

      You can still use SVG images with Divs lol, this has nothing to do with the treemap or the treemap library (d3js) for this case...

      And how is Vue.js supporting components affect this project AT ALL?!

      Whatever, cya around.

      • 8 months ago
  • mattsrinc
    mattsrinc
    • 8 months ago

    https://youtu.be/i1kwxeYeRbw
    - sorry for the Dropbox viewing video length limitation.

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

      Last notes: of course the treemap itself is responsive for mobile devices. And padding can be automatically calculated (a formula would involve number of data objects with/out thresholded ones, the size of the screen and possibly best chosen SVG effect appearance). Thank you for reading and watching this.

      • 8 months ago
  • mattsrinc
    mattsrinc
    • 8 months ago

    https://www.dropbox.com/s/vwtuwe1a114vnrp/Treemap-icons-mattsrinc.mp4?dl=0
    - a video of the implementation. Only various SVG filters - same was used in the entire video session - for treemap boxes are not in the sidebar options yet (sidebar icon can be hidden and shown again, keys H and S). Since everything is practically a variable or a function it can be easily integrated.
    Please don’t object about any popup or clicks on the boxes (or list in the Other box as a popup). That can be added in half an hour by any serious D3.js pro (including me).

    • 8 months ago
  • mattsrinc
    mattsrinc
    • 8 months ago

    It works now for the file change and new treemap display and changing padding. Other functions are already there and just need a user interface - as shown in the first screenshot it opens and collapses by mouse click.

    • 8 months ago

Show more comments Processing...