| license: mit |
Built with blockbuilder.org
It seems that vega-embed will not work with some vega-lite config
that is offered with vl.compile(spec, {config}). For instance, the default
mark color '#4c78a8' cannot be overridden with
vegaEmbed(el, vega-lite spec, {config: {mark: {fill: "#aaa"}}})
We can make it work by manually compiling with vl.compile(spec, {config})
before vega-embed. Or we can also add the config in the vega-lite spec.
forked from timelyportfolio's block: vega font
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/vega-tooltip.min.css"> | |
| <script src="https://unpkg.com/d3"></script> | |
| <script src="https://unpkg.com/vega/build/vega-core.js"></script> | |
| <script src="https://unpkg.com/vega-lite/build/vega-lite.js"></script> | |
| <script src="https://unpkg.com/vega-embed/build/vega-embed.js"></script> | |
| <script src=""></script> | |
| </head> | |
| <body> | |
| <pre> | |
| It seems that vega-embed will not work with some vega-lite config | |
| that is offered with vl.compile(spec, {config}). For instance, the default | |
| mark color '#4c78a8' cannot be overridden with | |
| vegaEmbed(el, vega-lite spec, {config: {mark: {fill: "#aaa"}}}) | |
| We can make it work by manually compiling with vl.compile(spec, {config}) | |
| before vega-embed. Or we can also add the config in the vega-lite spec. | |
| </pre> | |
| <div style="display:flex;"> | |
| <div style="width: 33%;"> | |
| <h3>manual vl.compile(spec, {config: theme})</h3> | |
| <div id = "example-row-vega" style = "width: 100%; height: 400px"></div> | |
| </div> | |
| <div style="width: 33%;"> | |
| <h3>vega-embed with manually compiled vl spec</h3> | |
| <div id = "example-vega-embed" style = "width: 100%; height: 400px;"></div> | |
| </div> | |
| <div style="width: 33%;"> | |
| <h3>vega-embed with vl spec</h3> | |
| <div id = "example-vl-vega-embed" style = "width: 100%; height: 400px;"></div> | |
| </div> | |
| </div> | |
| <script> | |
| var spec = { | |
| "$schema": "https://vega.github.io/schema/vega-lite/v2.json", | |
| "description": "A simple bar chart with embedded data.", | |
| "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"} | |
| } | |
| } | |
| // experiment with vega-themes | |
| var markColor = '#3e5c69'; | |
| var theme = { | |
| background: '#fff', | |
| mark: {fill: markColor}, | |
| axis: { | |
| domainWidth: 0.5, | |
| gridDefault: true, | |
| tickPadding: 2, | |
| tickWidth: 0.5, | |
| titleFontWeight: 'normal', | |
| tickSize: 5 | |
| }, | |
| axisBand: { | |
| gridDefault: false | |
| }, | |
| axisX: { | |
| gridWidth: 0.2 | |
| }, | |
| axisY: { | |
| gridWidth: 0.4, | |
| gridDash: [3] | |
| }, | |
| legend: { | |
| padding: 1, | |
| labelFontSize: 11, | |
| symbolType: 'square' | |
| }, | |
| range: { | |
| category: [ | |
| '#3e5c69', | |
| '#6793a6', | |
| '#182429', | |
| '#0570b0', | |
| '#3690c0', | |
| '#74a9cf', | |
| '#a6bddb', | |
| '#e2ddf2' | |
| ] | |
| } | |
| }; | |
| var view = new vega.View( | |
| vega.parse( | |
| vl.compile(spec, {config: theme}).spec | |
| ), | |
| theme | |
| ) | |
| .renderer('svg') // set renderer (canvas or svg) | |
| .initialize('#example-row-vega') // initialize view within parent DOM container | |
| .hover() // enable hover encode set processing | |
| .run(); // run the dataflow and render the view | |
| vegaEmbed( | |
| "#example-vega-embed", | |
| vl.compile(spec, {config: theme}).spec, | |
| {renderer: 'svg'} | |
| ) | |
| vegaEmbed("#example-vl-vega-embed", spec, {config: theme, renderer: 'svg'}) | |
| </script> | |
| </body> | |
| </html> |
