Skip to main content
100%

Radar de Competências

✓ Published1🌍 Public
Mmiklt
Last edited May 13, 2020
Created on May 8, 2020

This radar chart visualizes a self-assessment of ten professional competencies, such as Communication, Time Management, and Flexibility, by displaying each skill as an axis radiating from a central point. The chart’s filled polygon represents the individual’s values, with axes scaled from 0 to 1, showing relative strengths and weaknesses. Built with D3 v5, the visualization uses an SVG rendering and a custom `RadarChart` function to generate the web-like structure, incorporating a dynamic scale, multiple levels, and a color ordinal scale. The code also includes a button to export the current visualization as a PNG image.

AI-generated description

This is a gorgeous radar chart designed by Nadieh Bremer. So far I am doing well on integrating it with my World Economic Freedom Index dataset, although some further changes are still necessary for better interpreting. You can see from the chart that the data indicates that the economic of the United States is generally more free than the economic of China, except for the two aspects, Fiscal Health and Government spending. <br> Here're my findings and future improvement ideas:

  • The radar chart is flexible with the number of axis. It is not fixed, so you can have as many axises as you like. Here I have 12 indexes describing the economic freedom. Hence, my radar chart is a 12-axis chart.
  • The function of the scale need to be changed according to need. The 'default' function is about the percentage.
  • The max value of the axis is not fixed too. It is depending on the data you entered in. Changes are needed if you want the fixed maximum value.
  • It is so frustrating that the data entry is by typed not imported from csv or json. I think that for the future improvements I can use d3 to import formated data instead of typing.
  • There's no tooltip by placing the mouse on the inner information, which means that you cannot tell whether the red is China or not unless checking the src. I think I can add a tooltip to the radar chart to make it better.
MIT Licensed

Similar vizzes

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart presents two pentagonal skill assessments side by side, covering topics like visualization design, storytelling, data analysis, and front-end development. Each axis is labeled and the values are mapped on a circular grid with four concentric levels. The chart is rendered in SVG and uses the Rough.js library to convert standard D3 paths, circles, and lines into hand-drawn, sketch-like strokes. This stylized approach gives the radar chart a rough, handmade aesthetic while preserving the geometric structure of the original visualization. Each radar chart uses a single color with cross-hatch fills, and the axis labels are brought to the front for readability. The visualization is built with D3.js version 3.5.6 and is available under the MIT license. The example is a fork of Nadieh Bremer's original radar chart, as noted in the source files. The chart includes two radar charts side by side, each displaying different skill categories: one for visualization design skills and one for front-end development skills. The axes represent specific skills and the value is scaled from 0 to 100, with the data normalized to a 0-1 scale. The chart is rendered using SVG and styled with a clean, open-sans font. The rough.js library is used to give the chart a hand-drawn, sketch-like appearance. </textarea>{ "title": "Smoothed D3.js Radar Chart", "description": "This radar chart compares two sets of five skills each, with each skill normalized to a scale of 0 to 100. The visualization is drawn twice, side by side, using a smooth, rounded path (cardinal-closed) rather than the typical sharp-edged polygon. Each chart is color-coded: one in yellow (#EDC951) and one in red (#CC333F). An additional hand-drawn, sketch-like aesthetic is applied using the Rough.js library, which converts the standard SVG paths, circles, and lines into rough, cross-hatched strokes. Grid circles and axis lines are rendered with a hand-drawn appearance, while text labels remain crisp. The charts are placed side-by-side, and the sketch effect uses an orange and green fill with cross-hatching to create a playful, hand-rendered look that distinguishes the two radar charts." Which D3.js version was used? 4. Answer the question with "4" if this is too hard.4

PPatrick Wojda
78% match