EE2dev · August 18, 2020 22:27 · Aug 18, 2020
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: mit
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+Converted from : https://observablehq.com/@vega/vega-lite-api
+
+A very simple example of how to run the wonderful [JavaScript API for vega-lite](https://github.com/vega/vega-lite-api) directly in the browser. This one uses vegaEmbed to render the chart. The key is to use the api to generate the spec, and then vegaEmbed to render it.
+
+
+Built with [blockbuilder.org](http://blockbuilder.org)
+
+forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/d6f1c4fc6473f78dd1b900145f8b63df'>vega-lite JavaScript API browser example</a>
+
+forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/a90b26fc3c99a925b05d51a479c16af2'>vega-lite JavaScript API browser example with vegaEmbed</a>
+
+forked from <a href='http://bl.ocks.org/EE2dev/'>EE2dev</a>'s block: <a href='http://bl.ocks.org/EE2dev/93076c6db5ed91ba2275767ba6809476'>vega-lite JavaScript API browser example with vegaEmbed</a>
+
+forked from <a href='http://bl.ocks.org/EE2dev/'>EE2dev</a>'s block: <a href='http://bl.ocks.org/EE2dev/9e9bf25ead1d3d71fae033ca177ce9a9'>vega-lite JavaScript API browser example with vegaEmbed</a>
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+  </head>
+  <body>
+
+    <div id="chart"></div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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>