gustavderdrache/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>
  <body>
    <h1>descriptive chart title</h1>
    <svg id="chart1"></svg>

    <!--
    <h1>chart #2 on this page</h1>
    <svg id="chart2"></svg>
    -->

    <script>
      var chart1data = [
        [
          [170, 200],
          [190, 220],
          [210, 240],
          [230, 260],
          [250, 280]
        ],
        [
          [200, 170 + 32],
          [220, 190 + 34],
          [240, 210 + 38],
          [260, 230 + 36],
          [280, 250 + 33]
        ]
      ];

      var pad = {
        left: 50,
        right: 50,
        top: 50,
        bottom: 50
      };

      d3.selectAll('svg').attr('width', 1024).attr('height', 600);

      var width  = 1024 - pad.left - pad.right;
      var height =  600 - pad.top  - pad.bottom;

      var chart1 = d3.select('#chart1')
                     .append('g')
                     .attr('transform', 'translate(' + pad.left + ', ' + pad.top + ')');

      var x = d3.scale.ordinal()
                      .domain([0, 1, 2, 3, 4])
                      .rangeBands([0, width], 0.1);
      var y = d3.scale.linear()
                      .domain([150, 280])
                      .range([height, 0]);

      var colors = ['#0f0', '#ff0'];

      chart1.selectAll('g')
            .data(chart1data)
            .enter()
              .append('g')
              .attr('fill', function (d, i) { return colors[i]; })
            .selectAll('rect')
            .data(function (d) { return d; })
            .enter()
              .append('rect')
              .attr('x', function (d, i) { return x(i); })
              .attr('y', function (d, i) { return y(d[1]); })
              .attr('width', x.rangeBand())
              .attr('height', function (d, i) { return y(d[0]) - y(d[1]); });

      chart1.selectAll('text.category')
            .data([10, 25, 50, 75, 90])
            .enter()
              .append('text')
              .attr('x', function (d, i) { return x(i) + x.rangeBand() / 2; })
              .attr('y', height + pad.bottom)
              .attr('class', 'category')
              .attr('text-anchor', 'middle')
              .attr('font-variant', 'small-caps')
              .attr('font-family', 'sans-serif')
              .text(function (d) { return d + 'th Percentile'; });

      var endPoints = d3.range(14).map(function (v) { var p = 150 + v * 10; return [p, p]; });
      endPoints.push([290, 500]);
      endPoints.unshift([140, 0]);

      chart1.selectAll('text.axis')
            .data(endPoints)
            .enter()
              .append('text')
              .attr('class', 'axis')
              .attr('font-family', 'sans-serif')
              .attr('x', -10)
              .attr('y', function (d) { return y(d[0]) + 6; })
              .attr('text-anchor', 'end')
              .text(function (d) { return d[1]; });

      chart1.append('line')
            .attr('x1', 0)
            .attr('y1', y(140))
            .attr('x2', 0)
            .attr('y2', y(290))
            .attr('stroke', '#000')
            .attr('stroke-width', '1px');


      var cutoff = { h: 5, v: 4 };

      var makeCutoff = function makeCutoff (yp) {
        return [[-cutoff.h, y(yp) + cutoff.v], [ cutoff.h, y(yp) + cutoff.v],
                [ cutoff.h, y(yp) - cutoff.v], [-cutoff.h, y(yp) - cutoff.v]];
      };

      chart1.selectAll('path.cutoff1')
            .data([makeCutoff(285), makeCutoff(145)])
            .enter()
              .append('path')
              .attr('class', 'cutoff')
              .attr('stroke', '#000')
              .attr('fill', '#fff')
              .attr('stroke-dasharray', (cutoff.h * 2) + ',' + (cutoff.v * 2))
              .attr('transform', 'skewY(-45)')
              .attr('d', function (d) { console.log(d); return d3.svg.line()(d); });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body>
	<h1>descriptive chart title</h1>
	<svg id="chart1"></svg>

	<!--
	<h1>chart #2 on this page</h1>
	<svg id="chart2"></svg>
	-->

	<script>
	var chart1data = [
	[
	[170, 200],
	[190, 220],
	[210, 240],
	[230, 260],
	[250, 280]
	],
	[
	[200, 170 + 32],
	[220, 190 + 34],
	[240, 210 + 38],
	[260, 230 + 36],
	[280, 250 + 33]
	]
	];

	var pad = {
	left: 50,
	right: 50,
	top: 50,
	bottom: 50
	};

	d3.selectAll('svg').attr('width', 1024).attr('height', 600);

	var width = 1024 - pad.left - pad.right;
	var height = 600 - pad.top - pad.bottom;

	var chart1 = d3.select('#chart1')
	.append('g')
	.attr('transform', 'translate(' + pad.left + ', ' + pad.top + ')');

	var x = d3.scale.ordinal()
	.domain([0, 1, 2, 3, 4])
	.rangeBands([0, width], 0.1);
	var y = d3.scale.linear()
	.domain([150, 280])
	.range([height, 0]);

	var colors = ['#0f0', '#ff0'];

	chart1.selectAll('g')
	.data(chart1data)
	.enter()
	.append('g')
	.attr('fill', function (d, i) { return colors[i]; })
	.selectAll('rect')
	.data(function (d) { return d; })
	.enter()
	.append('rect')
	.attr('x', function (d, i) { return x(i); })
	.attr('y', function (d, i) { return y(d[1]); })
	.attr('width', x.rangeBand())
	.attr('height', function (d, i) { return y(d[0]) - y(d[1]); });

	chart1.selectAll('text.category')
	.data([10, 25, 50, 75, 90])
	.enter()
	.append('text')
	.attr('x', function (d, i) { return x(i) + x.rangeBand() / 2; })
	.attr('y', height + pad.bottom)
	.attr('class', 'category')
	.attr('text-anchor', 'middle')
	.attr('font-variant', 'small-caps')
	.attr('font-family', 'sans-serif')
	.text(function (d) { return d + 'th Percentile'; });

	var endPoints = d3.range(14).map(function (v) { var p = 150 + v * 10; return [p, p]; });
	endPoints.push([290, 500]);
	endPoints.unshift([140, 0]);

	chart1.selectAll('text.axis')
	.data(endPoints)
	.enter()
	.append('text')
	.attr('class', 'axis')
	.attr('font-family', 'sans-serif')
	.attr('x', -10)
	.attr('y', function (d) { return y(d[0]) + 6; })
	.attr('text-anchor', 'end')
	.text(function (d) { return d[1]; });

	chart1.append('line')
	.attr('x1', 0)
	.attr('y1', y(140))
	.attr('x2', 0)
	.attr('y2', y(290))
	.attr('stroke', '#000')
	.attr('stroke-width', '1px');


	var cutoff = { h: 5, v: 4 };

	var makeCutoff = function makeCutoff (yp) {
	return [[-cutoff.h, y(yp) + cutoff.v], [ cutoff.h, y(yp) + cutoff.v],
	[ cutoff.h, y(yp) - cutoff.v], [-cutoff.h, y(yp) - cutoff.v]];
	};

	chart1.selectAll('path.cutoff1')
	.data([makeCutoff(285), makeCutoff(145)])
	.enter()
	.append('path')
	.attr('class', 'cutoff')
	.attr('stroke', '#000')
	.attr('fill', '#fff')
	.attr('stroke-dasharray', (cutoff.h * 2) + ',' + (cutoff.v * 2))
	.attr('transform', 'skewY(-45)')
	.attr('d', function (d) { console.log(d); return d3.svg.line()(d); });
	</script>
	</body>
	</html>