AlainRo/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from AlainRo's block: Vega-Lite

  
## index.html
<!DOCTYPE html>
<head>
  <title>Vega Lite Bar Chart</title>
  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-rc5/vega-lite.js"></script>


  <style media="screen">
    /* Add space between Vega-Embed links  */
    .vega-actions a {
      margin-right: 5px;
    }
  </style>
</head>

<body>
  <h1>Template for Embedding Vega-Lite Visualization</h1>
  <!-- Container for the visualization -->
  <div id="vis"></div>

  <script>
  // Assign the specification to a local variable vlSpec.
  var vlSpec = {
  //"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "A simple bar chart with embedded data.",
  "width": 360,
  "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
};

  // Embed the visualization in the container with id `vis`
   const opt = {renderer: "svg"};
   const runtime = vega.parse(vlSpec);
   const view = new vega.View(runtime)
      .logLevel(vega.Warn) // set view logging level
      .initialize(document.querySelector("#vis")) // set parent DOM element
      .renderer("svg") // set render type (defaults to canvas)
      .hover() // enable hover event processing
      .run(); // update and render the view
  //vegaEmbed("#vis", vlSpec, opt);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<title>Vega Lite Bar Chart</title>
	<meta charset="utf-8">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-rc5/vega-lite.js"></script>


	<style media="screen">
	/* Add space between Vega-Embed links */
	.vega-actions a {
	margin-right: 5px;
	}
	</style>
	</head>

	<body>
	<h1>Template for Embedding Vega-Lite Visualization</h1>
	<!-- Container for the visualization -->
	<div id="vis"></div>

	<script>
	// Assign the specification to a local variable vlSpec.
	var vlSpec = {
	//"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
	"description": "A simple bar chart with embedded data.",
	"width": 360,
	"data": {
	"values": [
	{"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
	{"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
	{"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
	]
	},
	"mark": "bar",
	"encoding": {
	"x": {"field": "a", "type": "ordinal"},
	"y": {"field": "b", "type": "quantitative"}
	}
	};

	// Embed the visualization in the container with id `vis`
	const opt = {renderer: "svg"};
	const runtime = vega.parse(vlSpec);
	const view = new vega.View(runtime)
	.logLevel(vega.Warn) // set view logging level
	.initialize(document.querySelector("#vis")) // set parent DOM element
	.renderer("svg") // set render type (defaults to canvas)
	.hover() // enable hover event processing
	.run(); // update and render the view
	//vegaEmbed("#vis", vlSpec, opt);
	</script>
	</body>
	</html>