Likert chart: a d3.chart.js answer to Ann Emery's Dataviz Challenge #5

A chart for 4-point Likert scale

A d3.chart.js answer to Ann K. Emery's Dataviz Challenge #5

( feedback is welcomed: @CodeXmonk )

Order is changed

I changed the sequence of colors. Why i did it?

It's not based on any research data it is only my humble opinion...

I've been administering the so called Szondi test for years now. It is a projective psychological test designed by Leopold Szondi in the 30's of the XX century. During the test I ask people to pick out some photograph from a group of pictures according to whether they are attracted or repulsed by that very image. I don't ask them what exactly to do with the image I just ask them to put it aside. Positive choice is put to the right and the negative one to the left by the great majority of the people I examined...

So I think our positive answers or cues should be put on the right side...

What about labels?

Labels are not centered... It is a four-point scale so we usually call it a "forced choice" method. When evenly scaled Likert is used I think the answers are pushed towards the extremities... That's what I wanted to symbolize with the left/right aligned labels. ( and doing this way there was no any need to do extra calculation either...!-)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3.chart Likert (even-point) example</title>
  <script src="https://d3js.org/d3.v3.min.js"></script> 
  <script src="d3.chart.min.js"></script>
  <style>

table{
    border: none;
    margin-left:auto; 
    margin-right:auto;
  }
  td{text-align:center;}
  td.wide{width:450px;}
    
  .LikertEven{display:block;font: 10px sans-serif; margin-left:auto;margin-right:auto;}
  .LikertEven .tick line { stroke: #666; stroke-width: .5px; }
  .LikertEven .percent.s0 { fill: #FD6753; }
  .LikertEven .percent.s1 { fill: #FA8634; }
  .LikertEven .percent.s2 { fill: #46FA7D; }
  .LikertEven .percent.s3 { fill: #99E23F; }
    
  .LikertEven .subtitle.s { fill: #4D4B4B; }
  .LikertEven .subtitle.s0 { font-weight:bold; fill: #FF0000;} /* for the text more red is needed*/
  .LikertEven .subtitle.s1 { font-weight:bold; fill: #FA8634; }
  .LikertEven .subtitle.s2 { font-weight:bold; fill: #99E23F; }
  .LikertEven .subtitle.s3 { font-weight:bold; fill: #00FF00; } /* and clear green too for the text */
      
  .little{font-size:11px;}  
  .middle{font-size:14px;}
  .normal{font-size:16px;font-weight:bold;} 
  .l {fill: #F0F0F0;}
  .d {fill: #D9D9D9;} 
  .white {fill: white;}
  .background {}
  .dimTextKiem{font: 11px sans-serif; font-weight:bold;}
  .textResult{font: 8px sans-serif;}
  .textResultKiem{font: 9px sans-serif; font-weight:bold;}
  text.textLegendA{fill:#737373;}
  .axis text {font: 10px sans-serif;}
  
button.demo{
  background:#D9D9D9;
  border:1px solid #bbb;
  border-radius:3px;
  -webkit-box-shadow:inset 0 0 1px 1px #f6f6f6;
  box-shadow:inset 0 0 1px 1px #f6f6f6;color:#333;
  font:bold 12px/1"helvetica neue",helvetica,arial,sans-serif;
  padding:4px 0px 4px 0px;
  text-align:center;
  text-shadow:0 1px 0 #fff;
  width:70px;
}
button.demo:hover{
  background:#C4C4C4;
  -webkit-box-shadow:inset 0 0 1px 1px #eaeaea;
  box-shadow:inset 0 0 1px 1px #eaeaea;
  color:#222;cursor:pointer;
}
button.demo:active{
  background:#A6A6A6;
  -webkit-box-shadow:inset 0 0 1px 1px #e3e3e3;
  box-shadow:inset 0 0 1px 1px #e3e3e3;color:#000;
}  
</style>
</head>
<body>
<h2>chart for 4-point likert scale</h2>
<table> 
  <tr>
    <td class="wide">
      <div id="LikertEven"></div>
    </td>
  </tr>
  <tr>
    <td>
      <button class="demo" id="Randomize">Randomize</button>
      <button class="demo" id="Reset">Reset</button>
    </td>
  </tr>
</table>
  
	<script src="LikertEven-chart.js"></script>
	<script src="LikertEvens-chart.js"></script>
	<script src="LikertEven-app.js"></script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js