lindsaycarbonell · May 26, 2017 23:47
diff --git a/all.csv b/all.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <style>
  svg { border: 1px solid black }
  .delay{
    fill:#551A8B;
    /*stroke:black;*/
  }
  </style>
 </head>

 <body>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="http://cdn.rawgit.com/gka/d3-jetpack/master/build/d3-jetpack.js" charset="utf-8"></script>
 <script>
 d3.csv('assets/all.csv', function(data){

  data.forEach(function(d) {
    d.How_Long_Delayed = parseInt(d.How_Long_Delayed)
  })

  data = data.filter(function(d) {
    return ! isNaN(d.How_Long_Delayed)
  })

  const max_delay = d3.max(data, function(d){
    return parseInt(d.How_Long_Delayed);
  })

  const nested = d3.nest()
    .key(function(d){
      return d.Name;
    })
    .entries(data)
    .slice(0,40);

  nested.sort(function(a, b){
    const a_total = d3.sum(a.values, function(d){
      return d.How_Long_Delayed;
    })
    const b_total = d3.sum(b.values, function(d){
      return d.How_Long_Delayed;
    })
    return d3.ascending(a_total, b_total);
  })

  const school_names = nested.map(function(d){
    return d.key;
  })

    // debugger
  const height = 500;
  const width = 800;
  const max_minutes = 8000;
  const yScale = d3.scaleBand()
                  .domain(school_names)
                  .range([0,height]);
  const xScale = d3.scaleLinear()
                  .domain([0, max_minutes])
                  .range([0,width]);
  const opacityColorScale = d3.scaleThreshold()
                    .domain([20, 40, 60])
                    .range([0.2, 0.5, 0.8, 1.0])
  // const standardColorScale = d3.scaleLinear()
  //                   .domain([0, max_delay])
  //                   .range(['#fff', '#551A8B'])


  const conventions = d3.conventions({
    y: yScale,
    x: xScale,
    width: width,
    height: height,
    margin: {left: 200}
  });

  conventions.drawAxis();

  const schools = conventions.svg.appendMany(nested, 'g.school');

  schools.append('circle').attr('r', 2);

  schools.translate(function(d){
    const y = yScale(d.key);
    return [0,y];
  });


  schools.each(function(d){
    var total_width = 0;
    const filtered = d.values.filter(function(d){
      const parsed = parseInt(d.How_Long_Delayed);
      if (!isNaN(parsed)){
        return true;
      } else {
        return false;
      }

    })

    filtered.sort(function(a, b){
      return d3.ascending(a.How_Long_Delayed, b.How_Long_Delayed);
    })

    d3.select(this).appendMany(filtered, 'rect.delay')
    //draw the rects
      .attr('width', function(d){
        const width = xScale(parseInt(d.How_Long_Delayed));
        // console.log(width);
        return width;
      })
      .attr('height', yScale.bandwidth())
      // .style('fill', function(d){
      //   return delayColors(parseInt(d.How_Long_Delayed));
      // })
      .style('opacity', function(d){
        return opacityColorScale(parseInt(d.How_Long_Delayed));
      })
    //separate the rects
      .translate(function(d){
        const current_width = total_width;
        //total_width += xScale(parseInt(d.How_Long_Delayed))
        total_width += parseInt(d3.select(this).attr('width')) + 1;
        // console.log(current_width);
        return [current_width, 0];

      })
  });




 });




 </script>
 </body>


 </html>
	<!DOCTYPE html>
	<head>
	<style>
	svg { border: 1px solid black }
	.delay{
	fill:#551A8B;
	/stroke:black;/
	}
	</style>
	</head>

	<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="http://cdn.rawgit.com/gka/d3-jetpack/master/build/d3-jetpack.js" charset="utf-8"></script>
	<script>
	d3.csv('assets/all.csv', function(data){

	data.forEach(function(d) {
	d.How_Long_Delayed = parseInt(d.How_Long_Delayed)
	})

	data = data.filter(function(d) {
	return ! isNaN(d.How_Long_Delayed)
	})

	const max_delay = d3.max(data, function(d){
	return parseInt(d.How_Long_Delayed);
	})

	const nested = d3.nest()
	.key(function(d){
	return d.Name;
	})
	.entries(data)
	.slice(0,40);

	nested.sort(function(a, b){
	const a_total = d3.sum(a.values, function(d){
	return d.How_Long_Delayed;
	})
	const b_total = d3.sum(b.values, function(d){
	return d.How_Long_Delayed;
	})
	return d3.ascending(a_total, b_total);
	})

	const school_names = nested.map(function(d){
	return d.key;
	})

	// debugger
	const height = 500;
	const width = 800;
	const max_minutes = 8000;
	const yScale = d3.scaleBand()
	.domain(school_names)
	.range([0,height]);
	const xScale = d3.scaleLinear()
	.domain([0, max_minutes])
	.range([0,width]);
	const opacityColorScale = d3.scaleThreshold()
	.domain([20, 40, 60])
	.range([0.2, 0.5, 0.8, 1.0])
	// const standardColorScale = d3.scaleLinear()
	// .domain([0, max_delay])
	// .range(['#fff', '#551A8B'])


	const conventions = d3.conventions({
	y: yScale,
	x: xScale,
	width: width,
	height: height,
	margin: {left: 200}
	});

	conventions.drawAxis();

	const schools = conventions.svg.appendMany(nested, 'g.school');

	schools.append('circle').attr('r', 2);

	schools.translate(function(d){
	const y = yScale(d.key);
	return [0,y];
	});


	schools.each(function(d){
	var total_width = 0;
	const filtered = d.values.filter(function(d){
	const parsed = parseInt(d.How_Long_Delayed);
	if (!isNaN(parsed)){
	return true;
	} else {
	return false;
	}

	})

	filtered.sort(function(a, b){
	return d3.ascending(a.How_Long_Delayed, b.How_Long_Delayed);
	})

	d3.select(this).appendMany(filtered, 'rect.delay')
	//draw the rects
	.attr('width', function(d){
	const width = xScale(parseInt(d.How_Long_Delayed));
	// console.log(width);
	return width;
	})
	.attr('height', yScale.bandwidth())
	// .style('fill', function(d){
	// return delayColors(parseInt(d.How_Long_Delayed));
	// })
	.style('opacity', function(d){
	return opacityColorScale(parseInt(d.How_Long_Delayed));
	})
	//separate the rects
	.translate(function(d){
	const current_width = total_width;
	//total_width += xScale(parseInt(d.How_Long_Delayed))
	total_width += parseInt(d3.select(this).attr('width')) + 1;
	// console.log(current_width);
	return [current_width, 0];

	})
	});




	});




	</script>
	</body>


	</html>