Create Easily Updatable Treemap for deployment online (mobile and desktop)

  • Status: Closed
  • Prize: $200
  • Entries Received: 4
  • Winner: RedLayers

Contest Brief

Build a HTML (or similar) treemap for deployment on a website. The criteria are:
1) Treemap must automatically scale to fill the full screen on mobiles and computer screens.
2) Treemap must update based on an easily updated table with the following columns:
a. Title
b. Quantity
c. Value
d. Total (= Quantity * Value)
e. Image (uploaded image file)
f. Colour
3) The Treemap boxes will adjust based on the value in the ‘Total’ column. i.e. based on the % the value in that row is of the total %.
4) The Treemap boxes will be the colour in the ‘Colour’ column.
5) The Treemap boxes will have the ‘Image’ at their centre. The proportions of the image must remain when the box scales and it cannot become ‘stretched’ when the box becomes rectangular.
6) The number of rows should not be limited (if there is a limit the Contractor should advise what that limit is but not to be less than 500).
7) The Treemap should look slick and modern with a consistent clean space between each box and a high quality appearance (feel free to play round with how this is best achieved).

Example of treemap and some initial code: https://developers.google.com/chart/interactive/docs/gallery/treemap. There are a number of uses planned - a single example has been added with social media companies.

Submission format to be text format with screengrabs of the treemap.

Recommended Skills

Employer Feedback

“Mario did a great job on this and the end product is exactly what I was hoping for. Wouldn't hesitate to hire him again (and most likely will for some hourly rate work).”

Profile image remic, United Kingdom.

Top entries from this contest

View More Entries

Public Clarification Board

  • mattsrinc
    mattsrinc
    • 5 years ago

    Please don't close the contest before deadline. I have one nice addition for my third entry.

    • 5 years ago
    1. mattsrinc
      mattsrinc
      • 5 years ago

      Thank you.

      • 5 years ago
  • mattsrinc
    mattsrinc
    • 5 years ago

    The usual tools and approach choke when dealing with (opening ) more than 27 images (e.g. HTTP connections opening) though I have created a nice solution with that limitation. I can post an entry yet I'll explore more (500 rows and potentially 500 images if each data entity has a different image, right?) and ask you to not close the contest for next 24 hours.

    • 5 years ago
  • gauraviits
    gauraviits
    • 5 years ago

    #3
    please does take a look and give your valuable fedback

    • 5 years ago
  • RedLayers
    RedLayers
    • 5 years ago

    Alright, I'm almost done, I will upload an entry with a video tomorrow morning

    • 5 years ago
    1. remic
      Contest Holder
      • 5 years ago

      Great stuff, look forward to seeing it.

      • 5 years ago
  • RedLayers
    RedLayers
    • 5 years ago

    Do you still need someone to get this done? I'm going to start working on it fulltime tonight

    • 5 years ago
    1. RedLayers
      RedLayers
      • 5 years ago

      Do you also want the treemap to be responsive while resizing the browser? Or only on page load?

      • 5 years ago
    2. remic
      Contest Holder
      • 5 years ago

      Hi Mario - yes still open. It should be responsive while resizing browser too. The only small item that would also be good is if smaller items could be bundled under ''other' (i.e. everything with a percentage share < X% are grouped together in an 'other' treemap box and you can see the different items in there just as a list with percentages when hovering over it).

      • 5 years ago
  • RedLayers
    RedLayers
    • 5 years ago

    I have some questions: 1- You said the treemap will update based on the table provided, but how do we know if there's children or parents? The table doens't provide that information. 2- What is the treemap going to be about? It's important to know to design it properly. 3- Are you going to populate the Table manually or is there an API that we can get the data from?

    • 5 years ago
    1. remic
      Contest Holder
      • 5 years ago

      Hi Mario - no children or parents it will just be a 'one level' treemap.

      The treemap will be flexible - for purposes of design you can consider that it will be social media / messenging companies - the 'Total' used to calculate the size could be the total revenue. I would want the treemap to be made up of boxes with the logos of facebook, whatsapp etc in their middle and then the background colour is just so the box can be rectangular etc without distorting the logo. I've just added an example image to the contest.

      Table will be populated manually initially but I would like to have the option of linking it directly to a data source in the future.

      • 5 years ago
    2. RedLayers
      RedLayers
      • 5 years ago

      Great, I'll get to it and finish it very soon.

      • 5 years ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!