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

  • Status: Closed
  • Præmier: $200
  • Modtagne indlæg: 4
  • Vinder: marioada

Konkurrence Instruktioner

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: [login to view URL] 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.

Anbefalede Evner

Arbejdsgiverfeedback

“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).”

Profilbillede remic, United Arab Emirates.

Bedste indlæg fra denne konkurrence

Se flere indlæg

Offentlig Præciserings Opslagstavle

  • mattsrinc
    mattsrinc
    • 1 month ago

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

    • 1 month ago
    1. mattsrinc
      mattsrinc
      • 1 month ago

      Thank you.

      • 1 month ago
  • mattsrinc
    mattsrinc
    • 1 month 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.

    • 1 month ago
  • gauraviits
    gauraviits
    • 1 month ago

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

    • 1 month ago
  • marioada
    marioada
    • 1 month ago

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

    • 1 month ago
    1. remic
      Konkurrenceafholder
      • 1 month ago

      Great stuff, look forward to seeing it.

      • 1 month ago
  • marioada
    marioada
    • 1 month ago

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

    • 1 month ago
    1. marioada
      marioada
      • 1 month ago

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

      • 1 month ago
    2. remic
      Konkurrenceafholder
      • 1 month 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).

      • 1 month ago
  • marioada
    marioada
    • 2 months 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?

    • 2 months ago
    1. remic
      Konkurrenceafholder
      • 2 months 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.

      • 2 months ago
    2. marioada
      marioada
      • 1 month ago

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

      • 1 month ago

Vis flere kommentarer

Sådan kommer du i gang med konkurrencer

  • Opret din konkurrence

    Opret din konkurrence Hurtigt og nemt

  • Få tonsvis af indlæg

    Få tonsvis af indlæg Fra hele verden

  • Tildel det bedste indlæg

    Tildel det bedste indlæg Download filerne - Nemt!

Opret en Konkurrence Nu eller slut dig til os i dag!