aktivkohle/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Here this is my more sensible re-make of this chart.
This chart is a depiction of perceived and actual substance use in a survey of a thousand students. It is quite a mess, a reminder about how little journalists care about the truth. The height of the bars is unconnected to the printed values. They seem to want to convey that perception is far greater than reality with substance use, but want to depict that so badly they can't even maintain some honesty by linking the numbers to the graphic. Even the zero height bars seem to have a height. A bar with 30.9% is higher than a bar of 56.9%, nothing seems to really add up to 100%. Okay, perhaps the surveys had a certain proportion of didn't respond. The alcohol numbers do come close, adding up to 98%, which can be interpreted to mean that almost all the surveyed hold an opinion on their own and their peer's use of alcohol.

Creating a better graphic

As far as making this data work nicely with a dimple.js visualisation, it was necessary to put the numbers into a csv in tall format. Bar for the perceived results are made less opaque than the actual one although you can tell whats what by hovering the mouse anyway. It was quite easy to mix the dimple.js templates to get the legend up the top of the standard stacked-bar template. I tried a few other ways of altering some of the bars before using a d3 selector, there might be another way.
What does it actually show?

Okay, they were right even if they fudged the length of the bars, perceived is greater than actual in all cases. Can see comparing the purple and the green in the alcohol section that they have an exagerated idea of how many not-quite-alcoholics there are but it's only out by a factor of about two. The actual use of the harder substances is close to zero as it should be. ~50% and ~30% respectively of the surveyed believe that their peers are taking cocaine or opiates up to ten days a month when both figures are actually closer to zero, they must be talking about it more than they are doing it which is good.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
</head>
<div id="chartContainer">
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 650, 700);
    d3.csv("substance_survey.csv", function (data) {
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 45, 610, 415)
      myChart.addCategoryAxis("x",["SUBSTANCE USE "," ACTUAL vs PERCEIVED"]);
      myChart.addMeasureAxis("y", "percent");
      myChart.addSeries(["howOften"], dimple.plot.bar);
// Define a custom color palette.
      myChart.defaultColors = [
          new dimple.color("#2ecc71", "#27ae60", 1), // green
          new dimple.color("#9b59b6", "#8e44ad", 1), // purple
          new dimple.color("#e67e22", "#d35400", 1), // orange
      ];
      myChart.addLegend(200, 10, 380, 20, "right");
      myChart.draw();
// Use developer mode in Chrome to work out the code to get to the shapes and modify the 'perceived' bars
      d3.selectAll(".dimple-perceived").style("opacity", .15);
// note the dot needed in that statement
      svg.selectAll("title_text")
        .data(["How often did they use over 30 days?  :"])
        .enter()
        .append("text")
          .attr("x", 90)
          .attr("y", 17)
          .style("font-family", "sans-serif")
          .style("font-size", "10px")
          .style("color", "Black")
          .text(function (d) { return d; });
    });


// references consulted :
// http://stackoverflow.com/questions/30149773/dimple-js-assign-colour-to-bar-when-series-is-null
// http://stackoverflow.com/questions/15588984/d3-rgb-darker-brighter
// http://www.d3noob.org/2014/02/styles-in-d3js.html
// http://stackoverflow.com/questions/17435838/how-to-use-d3-selectall-with-multiple-class-names
// http://dimplejs.org/advanced_examples_viewer.html?id=advanced_custom_styling
// http://dimplejs.org/advanced_examples_viewer.html?id=advanced_interactive_legends
// http://dimplejs.org/advanced_examples_viewer.html?id=advanced_bullet
// https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#setBounds

  </script>
</div>
</html>

## originalgraphic.jpg

      
    Raw
  

              originalgraphic.jpg
            
          
## substance_survey.csv

          
            SUBSTANCE USE 
            percent
             ACTUAL vs PERCEIVED
            frequency
            howOften

            
              opiates
              0.7
              actual
              1
              <10

            
              opiates
              29.4
              perceived
              1
              <10

            
              opiates
              0
              actual
              2
              10-29

            
              opiates
              2.4
              perceived
              2
              10-29

            
              opiates
              0
              actual
              3
              30 (every day!)

            
              opiates
              0.4
              perceived
              3
              30 (every day!)

            
              alcohol
              56.9
              actual
              1
              <10

            
              alcohol
              30.9
              perceived
              1
              <10

            
              alcohol
              21.1
              actual
              2
              10-29

            
              alcohol
              56.3
              perceived
              2
              10-29

            
              alcohol
              1.4
              actual
              3
              30 (every day!)

            
              alcohol
              11.2
              perceived
              3
              30 (every day!)

            
              cocaine
              0.3
              actual
              1
              <10

            
              cocaine
              48.4
              perceived
              1
              <10

            
              cocaine
              0.2
              actual
              2
              10-29

            
              cocaine
              5.3
              perceived
              2
              10-29

            
              cocaine
              0
              actual
              3
              30 (every day!)

            
              cocaine
              1.2
              perceived
              3
              30 (every day!)

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
	</head>
	<div id="chartContainer">
	<script type="text/javascript">
	var svg = dimple.newSvg("#chartContainer", 650, 700);
	d3.csv("substance_survey.csv", function (data) {
	var myChart = new dimple.chart(svg, data);
	myChart.setBounds(60, 45, 610, 415)
	myChart.addCategoryAxis("x",["SUBSTANCE USE "," ACTUAL vs PERCEIVED"]);
	myChart.addMeasureAxis("y", "percent");
	myChart.addSeries(["howOften"], dimple.plot.bar);
	// Define a custom color palette.
	myChart.defaultColors = [
	new dimple.color("#2ecc71", "#27ae60", 1), // green
	new dimple.color("#9b59b6", "#8e44ad", 1), // purple
	new dimple.color("#e67e22", "#d35400", 1), // orange
	];
	myChart.addLegend(200, 10, 380, 20, "right");
	myChart.draw();
	// Use developer mode in Chrome to work out the code to get to the shapes and modify the 'perceived' bars
	d3.selectAll(".dimple-perceived").style("opacity", .15);
	// note the dot needed in that statement
	svg.selectAll("title_text")
	.data(["How often did they use over 30 days? :"])
	.enter()
	.append("text")
	.attr("x", 90)
	.attr("y", 17)
	.style("font-family", "sans-serif")
	.style("font-size", "10px")
	.style("color", "Black")
	.text(function (d) { return d; });
	});


	// references consulted :
	// http://stackoverflow.com/questions/30149773/dimple-js-assign-colour-to-bar-when-series-is-null
	// http://stackoverflow.com/questions/15588984/d3-rgb-darker-brighter
	// http://www.d3noob.org/2014/02/styles-in-d3js.html
	// http://stackoverflow.com/questions/17435838/how-to-use-d3-selectall-with-multiple-class-names
	// http://dimplejs.org/advanced_examples_viewer.html?id=advanced_custom_styling
	// http://dimplejs.org/advanced_examples_viewer.html?id=advanced_interactive_legends
	// http://dimplejs.org/advanced_examples_viewer.html?id=advanced_bullet
	// https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#setBounds

	</script>
	</div>
	</html>
SUBSTANCE USE	percent	ACTUAL vs PERCEIVED	frequency	howOften
opiates	0.7	actual	1	<10
opiates	29.4	perceived	1	<10
opiates	0	actual	2	10-29
opiates	2.4	perceived	2	10-29
opiates	0	actual	3	30 (every day!)
opiates	0.4	perceived	3	30 (every day!)
alcohol	56.9	actual	1	<10
alcohol	30.9	perceived	1	<10
alcohol	21.1	actual	2	10-29
alcohol	56.3	perceived	2	10-29
alcohol	1.4	actual	3	30 (every day!)
alcohol	11.2	perceived	3	30 (every day!)
cocaine	0.3	actual	1	<10
cocaine	48.4	perceived	1	<10
cocaine	0.2	actual	2	10-29
cocaine	5.3	perceived	2	10-29
cocaine	0	actual	3	30 (every day!)
cocaine	1.2	perceived	3	30 (every day!)