Circle Widget - HTML, CSS & jQuery/JS
Budget: $10 – $30 USD
This would be a simple project that you have to make using HTML, CSS and jQuery(or plain Javascript).
Type "IRead" in your proposal so that I know you read my proposal!
What I basically want is a layout where the center circle will have a text (this would be a static text. Here for example "Company"). And around this circle, I need N number of circles with text in it. Here for example, "CEO", "CFO", "COO", etc.. And the text would be a clickable link. The number of circles to be displayed around will be different, and is based on the data I pass. Please refer the first screenshot for more details.
These circles have to be generated dynamically as I would be passing the text & links for all circles as an JS object (or if you have any other suggestions on how to pass the data, please feel free to share). Because this data would be generated by PHP code (which is already created, but can be modified with your suggestions) at runtime.
Example data (JS):
var data = [
{
"text": "CEO",
"link": "https://www.mycompany.com/cheif_executive_officer"
},
{
"text": "CFO",
"link": "https://www.mycompany.com/cfo_page"
},
{
"text": "CFO",
"link": "https://www.mycompany.com/cfo_page",
"sub" : [
{ "text" : "Robin", "link" : "https://www.mycompany.com/employee/robin"},
{ "text" : "Sarah", "link" : "https://www.mycompany.com/employee/sarah"},
{ "text" : "Vincent", "link" : "https://www.mycompany.com/employee/vincent"},
]
},
{
"text": "Finance Manager",
"link": "https://www.mycompany.com/fin_manager"
},
{
"text": "Another Name",
"link": "https://www.mycompany.com/another_name"
}
//... more goes here
];
A sample visual representation (Refer Screenshot 1.png)
If there are any sub circles, then it should be displayed around that respective outer circle(eg: for "COO", there are 3 sub circles "Robin", "Sarah" and "Vincent").
There will only be a maximum of two levels of circles. "CEO", "CFO", "COO", etc.. being the first level. And "Robin", "Sarah" and "Vincent" being the second level. There won't be any other sub levels beneath it.
Displaying of the second level ("Robin", "Sarah" and "Vincent" of "COO") can be initiated when the User hovers the mouse over the respective first level circle (here, "COO") or you can display a "+" symbol near the first level circle (if it has any sub circles), which when clicked can display the second level of circles.
If you could display a zoomed in version of the second level of circles when it's expanded, then that would be an added advantage. But if it is tough for you to code that zoom functionality, then no problem.
The reason why zoom functionality is suggested is because the text on the second level of circles(eg: "Robin", "Sarah" and "Vincent" of "COO") might be tiny and hard to read. If you have any suggestions, I am all ears.
Sample Screenshot with Second Level of Circles (Refer Screenshot 2.png):
You can use SVG, canvas or div elements to achieve this together with CSS & JS.
The representation has to be professional. But if you have suggestions on improving the representation, I am open to it. I like to get this done in 2 days if possible.
If I am satisfied with your work, you will definitely get more work from me.
Type "IRead" in your proposal so that I know you read my proposal!
What I basically want is a layout where the center circle will have a text (this would be a static text. Here for example "Company"). And around this circle, I need N number of circles with text in it. Here for example, "CEO", "CFO", "COO", etc.. And the text would be a clickable link. The number of circles to be displayed around will be different, and is based on the data I pass. Please refer the first screenshot for more details.
These circles have to be generated dynamically as I would be passing the text & links for all circles as an JS object (or if you have any other suggestions on how to pass the data, please feel free to share). Because this data would be generated by PHP code (which is already created, but can be modified with your suggestions) at runtime.
Example data (JS):
var data = [
{
"text": "CEO",
"link": "https://www.mycompany.com/cheif_executive_officer"
},
{
"text": "CFO",
"link": "https://www.mycompany.com/cfo_page"
},
{
"text": "CFO",
"link": "https://www.mycompany.com/cfo_page",
"sub" : [
{ "text" : "Robin", "link" : "https://www.mycompany.com/employee/robin"},
{ "text" : "Sarah", "link" : "https://www.mycompany.com/employee/sarah"},
{ "text" : "Vincent", "link" : "https://www.mycompany.com/employee/vincent"},
]
},
{
"text": "Finance Manager",
"link": "https://www.mycompany.com/fin_manager"
},
{
"text": "Another Name",
"link": "https://www.mycompany.com/another_name"
}
//... more goes here
];
A sample visual representation (Refer Screenshot 1.png)
If there are any sub circles, then it should be displayed around that respective outer circle(eg: for "COO", there are 3 sub circles "Robin", "Sarah" and "Vincent").
There will only be a maximum of two levels of circles. "CEO", "CFO", "COO", etc.. being the first level. And "Robin", "Sarah" and "Vincent" being the second level. There won't be any other sub levels beneath it.
Displaying of the second level ("Robin", "Sarah" and "Vincent" of "COO") can be initiated when the User hovers the mouse over the respective first level circle (here, "COO") or you can display a "+" symbol near the first level circle (if it has any sub circles), which when clicked can display the second level of circles.
If you could display a zoomed in version of the second level of circles when it's expanded, then that would be an added advantage. But if it is tough for you to code that zoom functionality, then no problem.
The reason why zoom functionality is suggested is because the text on the second level of circles(eg: "Robin", "Sarah" and "Vincent" of "COO") might be tiny and hard to read. If you have any suggestions, I am all ears.
Sample Screenshot with Second Level of Circles (Refer Screenshot 2.png):
You can use SVG, canvas or div elements to achieve this together with CSS & JS.
The representation has to be professional. But if you have suggestions on improving the representation, I am open to it. I like to get this done in 2 days if possible.
If I am satisfied with your work, you will definitely get more work from me.