justcharts.

You should see a chart being rendered below.

{ "data":{ "url": "https://cdn.jsdelivr.net/gh/koaning/justcharts/bigmac.csv", "format": { "type": "csv" } }, "mark": "line", "encoding": { "x": {"field": "date", "type": "temporal"}, "y": {"field": "dollar_price", "type": "quantitative"}, "color": {"field": "currency_code", "type": "nominal"} }, "width": "container", "title": "this is a simple demo" }

It is generated with the following code:

<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<script src="https://cdn.jsdelivr.net/gh/koaning/justcharts/justcharts.js"></script>

<vegachart style="width: 100%">
    {
        "data":{
            "url": "https://cdn.jsdelivr.net/gh/koaning/justcharts/bigmac.csv",
            "format": {
                "type": "csv"
            }
        },
        "mark": "line",
        "encoding": {
            "x": {"field": "date", "type": "temporal"},
            "y": {"field": "dollar_price", "type": "quantitative"},
            "color": {"field": "currency_code", "type": "nominal"}
        },
        "width": "container",
        "title": "this is a simple demo"
    }
</vegachart>

The <vegachart> element is generated by a small library called justcharts.js. You can give it a json object as contents and the <vegachart> element will parse it to create a vegalite chart. You can learn more about the vegalite json specification on the documentation page but you can also explore it interactively.

Note that you can also use the .to_json() output from altair to generate the json for these chart elements.

It's meant to make it easy to hack together html-dashboards. It doesn't need a build tool in node, it merely needs an html file. This is great when you want to rapid prototype a dashboard or if you want to make a public dashboard with github pages.

If you're interested to learn more, feel free to check out the github repository.