Freelancer: marioada
Share:
Report Entry

Treemap - Demo

This treemap fits all of your requirements and even more, it is limitless, it looks nice, it's responsive, looks great on phones and desktops and is also easily and fully customizable. Here's a demo video (6mins): https://youtu.be/igrR3O7j8qQ I hope you like it, Thanks for reading and watching, MarioAda.

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

Public Clarification Board

  • remic
    Contest Holder
    • 8 months ago

    Hi Mario, I just watched the two videos and this is a seriously impressive piece of work. Can you just confirm what I will receive? Is it basically the whole package including control panel etc that I can run locally (noting that if I upload it all to my website there is a serious risk of a brute force attack breaking into it)?

    • 8 months ago
    1. marioada
      marioada
      • 8 months ago

      Thanks a lot. You will receive everything you saw in the videos, basically the treemap, the json file editor(the table) and the api sample which could be used in a bigger project.
      Creating a control panel should honestly not be part of this contest because I will have to create a database, an authentication system that is secure from ALL kinds of attacks, design at least 2 more pages, program all the backend AND an API with PHP7 and add a few more features(such as creating multiple treemaps).
      It's a HUGE deal. I can definitely make all of this happen but it has to be in a different project, I think you understand that 200$ isn't enough for all of this and I honestly think we even pushed things too far with the Json File Editor since we used Vue.js.

      With the current code you can update the Json File(using the table) LOCALLY then upload everything to your website.

      With an advanced panel, you'll be able to create multiple treemaps and do everything remotely.

      • 8 months ago
    2. remic
      Contest Holder
      • 8 months ago

      Thanks Mario - understood and that is fine with me and agree the control panel would be OTT for the scope - this is what I was hoping for. Looks great. Thanks.

      • 8 months ago
  • marioada
    marioada
    • 8 months ago

    It's Mario, but don't worry about it. Anyways, a database file can't be accessed remotely, it's better if we use something big like Mysql or MariaDB to store the data in it, then use an API to change and retrieve the data. So the treemap will also use the API to fill its content. This way this treemap could be part of a huge project if you want it to be. This means that instead of changing the Json data manually the way I was doing it in the video, we will simply retrieve it with the API.

    • 8 months ago
    1. marioada
      marioada
      • 8 months ago

      Since create a very secure admin panel with a dashboard and all that takes this contest to a whole new level, I thought I could create a simple table that could help you edit the Json file. It'll be over in a few minutes, I'm using Vue.js which is usually used for huge projects but it's all good.

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

      Here we go: https://youtu.be/vsXrSpzZJf4

      • 8 months ago
  • marioada
    marioada
    • 8 months ago

    We can easily hide the "hovering" on phones if we want to and also make the boxes take you anywhere you wanna go. I assumed you wanted this so I've implemented it already, it's done.

    • 8 months ago
    1. remic
      Contest Holder
      • 8 months ago

      That's great, thanks Mario - agree the hovering is best hidden on mobiles and great news about the link.

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

    It'd be great to be able to click the boxes and have it take you to a defined link (in this example facebook, snapchat or whatever). I hadn't realised the hovering would look weird...I assumed it just wouldnt show up.

    • 8 months ago
  • marioada
    marioada
    • 8 months ago

    So?

    • 8 months ago
  • marioada
    marioada
    • 8 months ago

    Great you liked it. About updating the values, this means that we need to create another page with a nice design that can easily update the json file OR we have to store this data in a database (which is the best way if there's A LOT of entries) and then request them from an API. This treemap can handle any of these cases we just have to feed it the data and it will do the rest.
    Yes we can easily add whatever we want really, we have full control over the design. I can add the link and the name right now, but, you have to know that on a mobile "hovering" acts weird since it doesn't really exist. Now about the link, do you want the boxes to be clickable? We can also do that easily because we have a good foundation, I'm just trying to build exactly what you want.

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

    Sorry just starting out with my coding - I've taken a quick look and assume I could just add this in using YOUR CODE FOR THE BOX

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

    This is a really impressive piece of work Mario, it looks great. My only slight concern would be it is going to take some time updating the value figure each time - is it possible to have them link to a table or something?

    Would it be easy to add a link for each box and maybe a name that appears when you hover over it?

    Really impressed, its great work and looks as good as I could have hoped for I think - agree it is better for it to be fast and only resize on refresh

    • 8 months ago
  • marioada
    marioada
    • 8 months ago

    Any feedback?

    • 8 months ago

Show more comments Processing...