I need a dragable and zoomable interface that scales for both desktops and smart devices (similar to a map) that works across modern browsers. The contents are spawnable circles that tie in with SQL to poll a series of variables that define the characteristics of the circle:
* Size - Scale of 1-20, with 1 being extremely small and 20 taking up the whole screen.
* Summary - a brief textbox that appears on the circles. Text will be visible on bigger circles when zoomed out and on smaller circles when zoomed in
* Details - an overlay text box containing up to 300 characters
* Zone - Divide the screen into a dynamic number of zones. Each circle will live in it's own zone, with smaller circles on the outer bands and larger circles near the center. The zones should be identifiable with text on the interface.
* Parent - circles can be linked to one other circle, presenting a visible parent/child relationship. A child can have only one parent. A parent can have multiple children. A child can also be a parent.
All variables should be able to written back to SQL when the circles are modified. Circles should be draggable to adjust zones and resizeable to adjust size. Circles dropped on other circles will create a parent/child relationship and text modified will change the summary or details.
I'm an amateur backend developer specializing in MySQL and PHP. Right now I'm looking for proof of concept, but, realistically, design and presentation is going to be important.
Examples of similar work appreciated.