Circle Widget - HTML, CSS & jQuery/JS
$10-30 USD
Paid on delivery
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": "[login to view URL]"
},
{
"text": "CFO",
"link": "[login to view URL]"
},
{
"text": "CFO",
"link": "[login to view URL]",
"sub" : [
{ "text" : "Robin", "link" : "[login to view URL]"},
{ "text" : "Sarah", "link" : "[login to view URL]"},
{ "text" : "Vincent", "link" : "[login to view URL]"},
]
},
{
"text": "Finance Manager",
"link": "[login to view URL]"
},
{
"text": "Another Name",
"link": "[login to view URL]"
}
//... more goes here
];
A sample visual representation (Refer Screenshot [login to view URL])
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 [login to view URL]):
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.
Project ID: #33529744
About the project
13 freelancers are bidding on average $35 for this job
Iread Bhaiya i can do this job , and can start right away A pro coder --Ranjit.........................................................
IRead Hello, I can create the necessary functionality. I can start now and finish shortly. Thanks Tahmida Rahman
Hello. I am expert of HTML and javascript. I can do this work within 2 hours in a professional way and I am ready to start work now. I can provide best quality work in low budget and I want a long-term partnership with More
Hi Dear Going through your project description I found it right fit for me. I can do such app from your posting and I will send you awesome result within your deadline you hire me. I would like to discuss more details More
Hey, I am interested in your project. I can make this website in 3 days and i can start right away. This is a straight forward task and I can get the job done with highest quality results in minimum possible time. I More
Hello As read your job carefully, I can start right now and complete in your time. I think we should discuss in detail via chat. thank you
IRead Hi, it would be a pleasure to do your project. I am an experienced Front-End developer (10+ years). I am new here at freelancer.com so I can't wait to prove my skills to the community and it can be started from h More
Hey, We are a team of professionals of more than 20 experts such as Back end developers, Front End developers, QA Engineers, Graphics Designers, SEO Engineers, Full Stack Developers & mobile app developers/ Hybrid app More
I made many projects and deals with the circle's concept a lot. I like to play with elements and I can do this. I believe in making long term relationships. so I don't let you down with my work.
Hi! My friend. Im developing with javascript application , games , html canvas games , website for 2 years. Im not gonna want so much money from you. I really work cheap. Instead we are team so be relax. If ı couldn More
