EE2dev · August 18, 2020 22:31
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />

  </head>
  <body>

    <div id="chart"></div>

    <script src="https://cdn.jsdelivr.net/npm/vega@5.7.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.10"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@5.1.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite-api@0.1.0"></script>


    <script>

 // create one interval brush for each histogram
  const brushDelay = vl.selectInterval('delay').encodings('x');
  const brushDist  = vl.selectInterval('dist').encodings('x');
  const brushTime  = vl.selectInterval('time').encodings('x');
  
  // function that creates a histogram visualization
  function hist(field, brush, crossfilter) {
    // binned x-axis encoding
    const x = vl.x()
      .fieldQ(field)
      .bin({maxbins: 100, minstep: 1})
      .axis({title: field, titleAnchor: 'start', format: 'd'});
    
    return vl.layer(
        // transparent base layer with unfiltered data
        vl.markBar().select(brush)
          .encode(x, vl.color().value('transparent')), 
        // cross-filtered histogram bars
        vl.markBar().transform(vl.filter(crossfilter)) 
          .encode(x, vl.y().count().axis(null))
      )
      .width(900)
      .height(100);
  }
  
  // vconcat three cross-filtered histograms
  const chartSpec = vl.vconcat(
      hist('delay',    brushDelay, vl.and(brushDist,  brushTime)),
      hist('distance', brushDist,  vl.and(brushDelay, brushTime)),
      hist('time',     brushTime,  vl.and(brushDelay, brushDist))
    )
    .data('https://cdn.jsdelivr.net/npm/vega-datasets@1/data/flights-5k.json')
    .transform(vl.calculate('hours(datum.date) + minutes(datum.date) / 60').as('time'))
    .config({view: {stroke: null}})
  	.toJSON();
      
      vegaEmbed("#chart", chartSpec);
    </script>

  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />

	</head>
	<body>

	<div id="chart"></div>

	<script src="https://cdn.jsdelivr.net/npm/vega@5.7.2"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.10"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-embed@5.1.3"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-lite-api@0.1.0"></script>


	<script>

	// create one interval brush for each histogram
	const brushDelay = vl.selectInterval('delay').encodings('x');
	const brushDist = vl.selectInterval('dist').encodings('x');
	const brushTime = vl.selectInterval('time').encodings('x');

	// function that creates a histogram visualization
	function hist(field, brush, crossfilter) {
	// binned x-axis encoding
	const x = vl.x()
	.fieldQ(field)
	.bin({maxbins: 100, minstep: 1})
	.axis({title: field, titleAnchor: 'start', format: 'd'});

	return vl.layer(
	// transparent base layer with unfiltered data
	vl.markBar().select(brush)
	.encode(x, vl.color().value('transparent')),
	// cross-filtered histogram bars
	vl.markBar().transform(vl.filter(crossfilter))
	.encode(x, vl.y().count().axis(null))
	)
	.width(900)
	.height(100);
	}

	// vconcat three cross-filtered histograms
	const chartSpec = vl.vconcat(
	hist('delay', brushDelay, vl.and(brushDist, brushTime)),
	hist('distance', brushDist, vl.and(brushDelay, brushTime)),
	hist('time', brushTime, vl.and(brushDelay, brushDist))
	)
	.data('https://cdn.jsdelivr.net/npm/vega-datasets@1/data/flights-5k.json')
	.transform(vl.calculate('hours(datum.date) + minutes(datum.date) / 60').as('time'))
	.config({view: {stroke: null}})
	.toJSON();

	vegaEmbed("#chart", chartSpec);
	</script>

	</body>
	</html>