aktivkohle · August 24, 2016 12:32
diff --git a/README.md b/README.md
diff --git a/index.html b/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>
diff --git a/originalgraphic.jpg b/originalgraphic.jpg
diff --git a/substance_survey.csv b/substance_survey.csv
diff --git a/thumbnail.png b/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!)