Replace Existing Results Bar Chart with Custom 8-Slice Radial Results Graphic (Design + Front-End Dev)
Budget: $750 – $1,500 USD
My website (BLTtrainingusa.com) already has a working self-assessment and a results page. The results page currently displays the user’s scores across 8 competencies as a horizontal bar graph.
I want to replace that bar chart with a downloadable radial / segmented circular chart (8 “pie slices”) that visually resembles the attached reference image (which has 12 dimensions; I only need 8). No “exploded slices” are required—this is simply the look and feel reference. This is primarily a front-end visualization project with strong design expectations.
Current State (Already Done)
• Self-assessment questions and scoring are implemented.
• Results page exists and is functioning.
• Results values for the 8 competencies are already available on the results page (or can be accessed from the same source powering the current bar chart).
What You Will Do (Scope)
1) Build the New Visualization (Replace Existing Bar Chart)
• Implement an 8-segment radial chart that displays the same competency scores currently shown in the bar chart.
• Each segment should fill to a level based on score (e.g., 0–100 or 1–5), similar to the graded ring effect in the reference image.
• Must be responsive, clean, professional, and downloadable (desktop + mobile).
2) Integrate It into the Existing Results Page
• Remove/disable the existing horizontal bar chart component.
• Insert the new radial visualization in its place.
• Use the existing data already being passed into the current chart (no changes to survey logic unless required for plumbing).
3) Match Style Expectations
• Overall style should be similar to the attached reference (radial, segmented, readable).
• I will provide competency names and preferred ordering if needed.
• The final output should look like a deliberate “product UI,” not a default chart library theme.
Technical Requirements
• Must work within my existing site stack (WordPress).
• Use a maintainable approach: SVG (preferred for crispness), Canvas, or a reputable chart library (Chart.js / D3 / etc.).
• Fast loading; no heavy dependencies unless justified.
• Accessibility: readable labels; provide a text/numeric fallback summary if the graphic is not readable by a screen reader.
Deliverables
1. New 8-slice, downloadable radial chart embedded on the existing results page.
2. Existing bar chart removed/disabled (or hidden cleanly).
3. Mobile responsiveness verified.
4. Short video tutorials:
○ Where the chart code lives
○ How to adjust labels/colors/range
○ Any assumptions about the score inputs (scale/min/max)
What I Need from You (Proposal)
Examples of data visualization/UI work (links or screenshots).
Cost + timeline estimate.
NOTE: Bid must include 2-3 revision rounds.
I want to replace that bar chart with a downloadable radial / segmented circular chart (8 “pie slices”) that visually resembles the attached reference image (which has 12 dimensions; I only need 8). No “exploded slices” are required—this is simply the look and feel reference. This is primarily a front-end visualization project with strong design expectations.
Current State (Already Done)
• Self-assessment questions and scoring are implemented.
• Results page exists and is functioning.
• Results values for the 8 competencies are already available on the results page (or can be accessed from the same source powering the current bar chart).
What You Will Do (Scope)
1) Build the New Visualization (Replace Existing Bar Chart)
• Implement an 8-segment radial chart that displays the same competency scores currently shown in the bar chart.
• Each segment should fill to a level based on score (e.g., 0–100 or 1–5), similar to the graded ring effect in the reference image.
• Must be responsive, clean, professional, and downloadable (desktop + mobile).
2) Integrate It into the Existing Results Page
• Remove/disable the existing horizontal bar chart component.
• Insert the new radial visualization in its place.
• Use the existing data already being passed into the current chart (no changes to survey logic unless required for plumbing).
3) Match Style Expectations
• Overall style should be similar to the attached reference (radial, segmented, readable).
• I will provide competency names and preferred ordering if needed.
• The final output should look like a deliberate “product UI,” not a default chart library theme.
Technical Requirements
• Must work within my existing site stack (WordPress).
• Use a maintainable approach: SVG (preferred for crispness), Canvas, or a reputable chart library (Chart.js / D3 / etc.).
• Fast loading; no heavy dependencies unless justified.
• Accessibility: readable labels; provide a text/numeric fallback summary if the graphic is not readable by a screen reader.
Deliverables
1. New 8-slice, downloadable radial chart embedded on the existing results page.
2. Existing bar chart removed/disabled (or hidden cleanly).
3. Mobile responsiveness verified.
4. Short video tutorials:
○ Where the chart code lives
○ How to adjust labels/colors/range
○ Any assumptions about the score inputs (scale/min/max)
What I Need from You (Proposal)
Examples of data visualization/UI work (links or screenshots).
Cost + timeline estimate.
NOTE: Bid must include 2-3 revision rounds.