EE2dev · August 18, 2020 22:00
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>

  const width = 900;
  const brush = vl.selectInterval().encodings('x');
  const click = vl.selectMulti().encodings('color');

  const scale = {
    domain: ['sun', 'fog', 'drizzle', 'rain', 'snow'],
    range: ['#e7ba52', '#a7a7a7', '#aec7e8', '#1f77b4', '#9467bd']
  };

  const plot1 = vl.markPoint({filled: true})
    .encode(
      vl.color().value('lightgray')
        .if(brush, vl.color().fieldN('weather').scale(scale).title('Weather')),
      vl.size().fieldQ('precipitation').scale({domain: [-1, 50], range: [10, 500]}).title('Precipitation'),
      vl.order().fieldQ('precipitation').sort('descending'),
      vl.x().timeMD('date').axis({title: 'Date', format: '%b'}),
      vl.y().fieldQ('temp_max').scale({domain: [-5, 40]}).axis({title: 'Maximum Daily Temperature (°C)'})
    )
    .width(width)
    .height(300)
    .select(brush)
    .transform(vl.filter(click));

  const plot2 = vl.markBar()
    .encode(
      vl.color().value('lightgray')
        .if(click, vl.color().fieldN('weather').scale(scale).title('Weather')),
      vl.x().count(),
      vl.y().fieldN('weather').scale({domain: scale.domain}).title('Weather')
    )
    .width(width)
    .select(click)
    .transform(vl.filter(brush));

  const chartSpec = vl.vconcat(plot1, plot2)
    .data('https://cdn.jsdelivr.net/npm/vega-datasets@1/data/seattle-weather.csv')
    .autosize({type: 'fit-x', contains: 'padding'})
  	.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>

	const width = 900;
	const brush = vl.selectInterval().encodings('x');
	const click = vl.selectMulti().encodings('color');

	const scale = {
	domain: ['sun', 'fog', 'drizzle', 'rain', 'snow'],
	range: ['#e7ba52', '#a7a7a7', '#aec7e8', '#1f77b4', '#9467bd']
	};

	const plot1 = vl.markPoint({filled: true})
	.encode(
	vl.color().value('lightgray')
	.if(brush, vl.color().fieldN('weather').scale(scale).title('Weather')),
	vl.size().fieldQ('precipitation').scale({domain: [-1, 50], range: [10, 500]}).title('Precipitation'),
	vl.order().fieldQ('precipitation').sort('descending'),
	vl.x().timeMD('date').axis({title: 'Date', format: '%b'}),
	vl.y().fieldQ('temp_max').scale({domain: [-5, 40]}).axis({title: 'Maximum Daily Temperature (°C)'})
	)
	.width(width)
	.height(300)
	.select(brush)
	.transform(vl.filter(click));

	const plot2 = vl.markBar()
	.encode(
	vl.color().value('lightgray')
	.if(click, vl.color().fieldN('weather').scale(scale).title('Weather')),
	vl.x().count(),
	vl.y().fieldN('weather').scale({domain: scale.domain}).title('Weather')
	)
	.width(width)
	.select(click)
	.transform(vl.filter(brush));

	const chartSpec = vl.vconcat(plot1, plot2)
	.data('https://cdn.jsdelivr.net/npm/vega-datasets@1/data/seattle-weather.csv')
	.autosize({type: 'fit-x', contains: 'padding'})
	.toJSON();

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

	</body>
	</html>