Personality Radar Pie Chart

In this example below you will see how to do a Personality Radar Pie Chart with some HTML / CSS and Javascript

SVG Radar pie chart component with example of Myers-Briggs type indicator. This uses 5 svg components, a better approach would be to use 1 svg and create all the needed path data. This is a simple alternative solution where the pie chart easily can be increased or decreased in levels.

Thumbnail
This awesome code was written by Kunuk Nykjær, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Kunuk Nykjær ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Personality Radar Pie Chart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <main>

  <div class="component-mbti">
    <h1>Myers–Briggs Type Indicator</h1>
    <div class="chart">
      <div class="graph">
        <div class="layer layer--5"></div>
        <div class="layer layer--4"></div>
        <div class="layer layer--3"></div>
        <div class="layer layer--2"></div>
        <div class="layer layer--1"></div>
        <div class="lines">
          <div class="line"></div>
          <div class="line"></div>
        </div>
      </div>
      <label class="a">extraversion (E)</label>
      <label class="b">sensing (S)</label>
      <label class="c">thinking (T)</label>
      <label class="d">judging (J)</label>
      <label class="e">introversion (I)</label>
      <label class="f">intuition (N)</label>
      <label class="g">feeling (F)</label>
      <label class="h">perception (P)</label>
    </div>
  </div>


  <script type='text/svg-8-items-template' id="svg-radar-pie-chart-template">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="svg-chart" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
      <path d="M 50 0 L 100 0 L 50 50 Z" class="type-a" />
      <path d="M 100 0 L 100 50 L 50 50 Z" class="type-b" />
      <path d="M 100 50 L 100 100 L 50 50 Z" class="type-c" />
      <path d="M 100 100 L 50 100 L 50 50 Z" class="type-d" />
      <path d="M 50 100 L 0 100 L 50 50 Z" class="type-e" />
      <path d="M 0 100 L 0 50 L 50 50 Z" class="type-f" />
      <path d="M 0 0 L 0 50 L 50 50 Z" class="type-g" />
      <path d="M 0 0 L 50 0 L 50 50 Z" class="type-h" />
    </svg>
  </script>


  <div class="about">
    SVG component example of <a href="https://en.wikipedia.org/wiki/Myers%E2%80%93Briggs_Type_Indicator" target="_blank">Myers-Briggs</a>. The graph is dynamically generated from custom data.
  </div>

</main>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kunukn/personality-radar-pie-chart-dGvJQL */
@-webkit-keyframes fade-in {
  from {
    opacity: .3;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: .3;
  }
  to {
    opacity: 1;
  }
}
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font: 20px sans-serif;
  text-align: center;
  color: #ddd;
  background-color: #333;
}

a {
  color: inherit;
  font-weight: 700;
}

.about {
  margin-top: 3em;
}

.component-mbti {
  font-size: 16px;
  -webkit-animation: fade-in 2s;
          animation: fade-in 2s;
  background: dodgerblue;
  display: inline-block;
  border: 4px solid dodgerblue;
}
.component-mbti > h1 {
  text-align: center;
  font-size: 100%;
  margin: 10px 0;
  color: white;
}
.component-mbti .chart {
  position: relative;
  background: white;
  overflow: hidden;
  padding: 4px;
}
.component-mbti .chart > label {
  color: black;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  display: inline-block;
  font-size: 60%;
  padding: 2px;
  font-weight: 700;
}
.component-mbti .chart > label.a {
  top: 0;
  right: 0%;
}
.component-mbti .chart > label.h {
  top: 0;
  left: 0%;
}
.component-mbti .chart > label.b {
  top: 30%;
  right: 0;
}
.component-mbti .chart > label.g {
  top: 30%;
  left: 0;
}
.component-mbti .chart > label.c {
  bottom: 30%;
  right: 0;
}
.component-mbti .chart > label.f {
  bottom: 30%;
  left: 0;
}
.component-mbti .chart > label.d {
  bottom: 0;
  right: 0%;
}
.component-mbti .chart > label.e {
  bottom: 0;
  left: 0%;
}
.component-mbti .graph {
  position: relative;
  width: 240px;
  height: 240px;
}
.component-mbti .graph [class*='layer-'] {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: hidden;
  border: 2px solid white;
  border-radius: 50%;
}
.component-mbti .graph .layer--1 {
  width: 20%;
  height: 20%;
}
.component-mbti .graph .layer--2 {
  width: 40%;
  height: 40%;
  opacity: .9;
}
.component-mbti .graph .layer--3 {
  width: 60%;
  height: 60%;
  opacity: .9;
}
.component-mbti .graph .layer--4 {
  width: 80%;
  height: 80%;
  opacity: .9;
}
.component-mbti .graph .layer--5 {
  width: 100%;
  height: 100%;
  opacity: .9;
}
.component-mbti .graph .lines .line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: white;
  top: 50%;
  left: 0;
}
.component-mbti .graph .lines .line:after {
  content: '';
  position: inherit;
  top: inherit;
  left: inherit;
  width: inherit;
  height: inherit;
  background: inherit;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.component-mbti .graph .lines .line:nth-child(2) {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.component-mbti .graph svg {
  width: 100%;
  height: 100%;
}


/*Downloaded from https://www.codeseek.co/kunukn/personality-radar-pie-chart-dGvJQL */
;
(function () {
    var data = // Insert your data here
     {
        a: 2,
        b: 4,
        c: 3,
        d: 1,
        e: 5,
        f: 2,
        g: 4,
        h: 4
    };
    function $(expr, context) {
        return (context || document).querySelector(expr);
    }
    function $$(expr, context) {
        return Array.prototype.slice.call((context || document).querySelectorAll(expr), 0);
    }
    var levels = 5, types = 8, alphabet = 'abcdefghijklmnopqrstuvwxyz';
    var colors = ['lightgray', 'tomato', 'orange', 'gold', 'mediumseagreen', 'lime'];
    var graph = $('.graph');
    $$('.layer', graph).forEach(function (layer) {
        layer.innerHTML = $('#svg-radar-pie-chart-template').innerHTML;
    });
    var svg = $('.svg-chart', graph);
    // Clear
    $$('path', graph).forEach(function (i) {
        i.style.fill = colors[0];
    });
    for (var typeIndex = 0; typeIndex < types; typeIndex++) {
        var index = alphabet.charAt(typeIndex);
        var count = data[index];
        var type = $$('.svg-chart .type-' + index, graph);
        for (var i = type.length - 1; i >= 0; i--) {
            if (i < levels - count)
                break;
            type[i].style.fill = colors[data[index]];
        }
    }
    function getRandomColor() {
        return colors[~~(Math.random() * colors.length)];
    }
    $$('path', graph).forEach(function (i) {
        //i.style.fill = getRandomColor();
    });
})();

Comments