{"id":18790404,"url":"https://github.com/vega/dash-vega-components","last_synced_at":"2025-08-09T16:02:53.783Z","repository":{"id":200021342,"uuid":"704649791","full_name":"vega/dash-vega-components","owner":"vega","description":"Dash component for Vega-Altair charts","archived":false,"fork":false,"pushed_at":"2024-08-11T06:57:22.000Z","size":9013,"stargazers_count":45,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-01T09:43:48.772Z","etag":null,"topics":["altair","plotly-dash","vega"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vega.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":"GOVERNANCE.md","roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-13T18:20:36.000Z","updated_at":"2025-04-06T02:38:15.000Z","dependencies_parsed_at":"2023-12-23T20:21:54.458Z","dependency_job_id":"28ef1890-5a14-4810-9121-916e3c1a822a","html_url":"https://github.com/vega/dash-vega-components","commit_stats":null,"previous_names":["binste/dash-vega-components","altair-viz/dash-vega-components"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/vega/dash-vega-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vega%2Fdash-vega-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vega%2Fdash-vega-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vega%2Fdash-vega-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vega%2Fdash-vega-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vega","download_url":"https://codeload.github.com/vega/dash-vega-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vega%2Fdash-vega-components/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268216548,"owners_count":24214595,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["altair","plotly-dash","vega"],"created_at":"2024-11-07T21:12:06.031Z","updated_at":"2025-08-09T16:02:53.669Z","avatar_url":"https://github.com/vega.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dash Vega Components\nWith the `Vega` component, you can display [Vega-Altair](https://altair-viz.github.io/) charts in your [Plotly Dash](https://dash.plotly.com/dash-vega-components) application. All features work as well with Vega-Lite and Vega specifications but the remainder of this README will focus on Altair as it is more common.\n\nYou can either go through the examples below or head over to [the Plotly Dash documentation](https://dash.plotly.com/dash-vega-components) to learn more.\n\n\n```bash\npip install dash-vega-components\n```\n\n## Altair example\nFor the example below, you'll also need:\n```bash\npip install altair vega_datasets\n```\n\n```python\nimport altair as alt\nfrom dash import Dash, Input, Output, callback, dcc, html\nfrom vega_datasets import data\n\nimport dash_vega_components as dvc\n\n# Passing a stylesheet is not required\napp = Dash(\n    __name__, external_stylesheets=[\"https://codepen.io/chriddyp/pen/bWLwgP.css\"]\n)\n\napp.layout = html.Div(\n    [\n        html.H1(\"Altair Chart\"),\n        dcc.Dropdown([\"All\", \"USA\", \"Europe\", \"Japan\"], \"All\", id=\"origin-dropdown\"),\n        # Optionally, you can pass options to the Vega component.\n        # See https://github.com/vega/vega-embed#options for more details.\n        dvc.Vega(id=\"altair-chart\", opt={\"renderer\": \"svg\", \"actions\": False}),\n    ]\n)\n\n\n@callback(Output(\"altair-chart\", \"spec\"), Input(\"origin-dropdown\", \"value\"))\ndef display_altair_chart(origin):\n    source = data.cars()\n\n    if origin != \"All\":\n        source = source[source[\"Origin\"] == origin]\n\n    chart = (\n        alt.Chart(source)\n        .mark_circle(size=60)\n        .encode(\n            x=\"Horsepower\",\n            y=\"Miles_per_Gallon\",\n            color=alt.Color(\"Origin\").scale(domain=[\"Europe\", \"Japan\", \"USA\"]),\n            tooltip=[\"Name\", \"Origin\", \"Horsepower\", \"Miles_per_Gallon\"],\n        )\n        .interactive()\n    )\n    return chart.to_dict()\n\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n```\n![Example](https://raw.githubusercontent.com/binste/dash-vega-components/main/dvc_example.gif)\n\n\nYou can also pass a Vega or Vega-Lite specification as a dictionary.\n\n## Callbacks\n*Parameters* are the basic building blocks to make an Altair chart interactive. They can either be simple variables or more complex selections that map user input (e.g., mouse clicks and drags) to data queries. In Vega, these are called *Signals* and the two concepts of *Signals* and *Parameters* are closely linked. As an Altair user, you don't have to know the details and you can think of them as synonyms.\n\nYou can trigger a Dash callback based on changes in any parameter which is defined in an Altair chart. To do this, you'll need to\n* specify a `name` when defining the parameter, for example `alt.param(name=\"my_param\")` or `alt.selection_point(name=\"my_param\")`\n* add the parameter name to the `signalsToObserve` property of the `Vega` component: `dvc.Vega(id=\"chart1\", signalsToObserve=[\"my_param])`. If you want to observe all signals, you can also pass `signalsToObserve=[\"all\"]`\n* use `Input(\"chart1\", \"signalData\")` in your callback to access the value of `\"my_param\"` and react to changes\n\nFor more examples, see [`example_app.py`](./example_app.py) which shows how to filter a pandas dataframe based on a selection in a chart and display it in a Dash data table (the same would work with the Dash AG Grid component), or head over to https://github.com/altair-viz/dash-vega-components/issues/5.\n\nSome ideas of what you could do with this:\n* Filter a Dash data table based on the selected points in a scatter plot (see [`example_app.py`](./example_app.py))\n* Based on a clickable bar chart, update other charts in your application\n* If you have geographic data, show an overview map of aggregated regional data. Use this map as a navigation element in a dash multi-page app so that if a user clicks on e.g. the US, they get to the US specific subpage\n* ...\n\n## Further information\nFor more infos on the properites of the `Vega` component, see its docstring in [`Vega.py`](./dash_vega_components/Vega.py).\n\nTo learn more about making Altair charts interactive, see [Interactive Charts - Vega-Altair docs](https://altair-viz.github.io/user_guide/interactions.html).\n\nIf you want your chart to resize responsively, set `container=\"width\"` in your Altair chart.\n\n## Development\nRequires npm\n```bash\npython -m venv .venv\nsource .venv/bin/activate\npip install -r requirements.txt\npip install -r requirements-dev.txt\n\nnpm install\nnpm run build\n# Test package with\npython example_app.py\n```\nVisit http://localhost:8050 in your web browser\n\nTo cut a new release, see [RELEASING.md](./RELEASING.md)\n\nThis package is based on the [dash-component-boilerplate template](https://github.com/plotly/dash-component-boilerplate).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvega%2Fdash-vega-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvega%2Fdash-vega-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvega%2Fdash-vega-components/lists"}