{"id":13719174,"url":"https://github.com/ankane/vega-ruby","last_synced_at":"2026-01-12T07:52:36.172Z","repository":{"id":39028597,"uuid":"298898992","full_name":"ankane/vega-ruby","owner":"ankane","description":"Interactive charts for Ruby, powered by Vega and Vega-Lite","archived":false,"fork":false,"pushed_at":"2025-08-19T02:21:43.000Z","size":1376,"stargazers_count":294,"open_issues_count":1,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-17T16:46:02.815Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Ruby","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/ankane.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-26T21:02:07.000Z","updated_at":"2025-10-13T04:38:16.000Z","dependencies_parsed_at":"2023-12-26T20:42:47.976Z","dependency_job_id":"661d5aa1-e661-4cf7-ba5e-eb64c6a3d347","html_url":"https://github.com/ankane/vega-ruby","commit_stats":{"total_commits":113,"total_committers":4,"mean_commits":28.25,"dds":0.2654867256637168,"last_synced_commit":"7a95136a5b16ff09ba70aa350cff92a83756180d"},"previous_names":["ankane/vega"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/ankane/vega-ruby","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankane%2Fvega-ruby","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankane%2Fvega-ruby/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankane%2Fvega-ruby/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankane%2Fvega-ruby/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankane","download_url":"https://codeload.github.com/ankane/vega-ruby/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankane%2Fvega-ruby/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":283660766,"owners_count":26872888,"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-11-10T02:00:06.292Z","response_time":53,"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":[],"created_at":"2024-08-03T01:00:43.776Z","updated_at":"2025-11-17T14:08:43.881Z","avatar_url":"https://github.com/ankane.png","language":"Ruby","funding_links":[],"categories":["Visualization","Wrappers","Ruby"],"sub_categories":["Papers"],"readme":"# Vega.rb\n\nInteractive charts for Ruby, powered by [Vega](https://vega.github.io/vega/) and [Vega-Lite](https://vega.github.io/vega-lite/)\n\n[See it in action](https://vega.dokkuapp.com)\n\nWorks with Rails, iRuby, and other frameworks\n\n[![Build Status](https://github.com/ankane/vega-ruby/actions/workflows/build.yml/badge.svg)](https://github.com/ankane/vega-ruby/actions)\n\n## Installation\n\nAdd this line to your application’s Gemfile:\n\n```ruby\ngem \"vega\"\n```\n\nThen follow the instructions for how you plan to use it:\n\n- [Importmap](#importmap) (Rails 7+ default)\n- [Bun, esbuild, or Webpack](#bun-esbuild-or-webpack)\n- [Sprockets](#sprockets)\n- [iRuby](#iruby)\n- [Other](#other)\n\n### Importmap\n\nAdd to `config/importmap.rb`:\n\n```ruby\npin \"vega\", to: \"vega.js\"\npin \"vega-lite\", to: \"vega-lite.js\"\npin \"vega-embed\", to: \"vega-embed.js\"\n```\n\nAnd add to `app/javascript/application.js`:\n\n```js\nimport \"vega\"\nimport \"vega-lite\"\nimport \"vega-embed\"\n\nwindow.dispatchEvent(new Event(\"vega:load\"))\n```\n\n### Bun, esbuild, or Webpack\n\nRun:\n\n```sh\nbun add vega vega-lite vega-embed\n# or\nyarn add vega vega-lite vega-embed\n```\n\nAnd add to `app/javascript/application.js`:\n\n```js\nimport embed from \"vega-embed\"\n\nwindow.vegaEmbed = embed\nwindow.dispatchEvent(new Event(\"vega:load\"))\n```\n\n### Sprockets\n\nAdd to `app/assets/javascripts/application.js`:\n\n```js\n//= require vega\n//= require vega-lite\n//= require vega-embed\n```\n\n### iRuby\n\nNo additional set up is needed.\n\n### Other\n\nFor Sinatra and other web frameworks, download [Vega](https://cdn.jsdelivr.net/npm/vega@6), [Vega-Lite](https://cdn.jsdelivr.net/npm/vega-lite@6), and [Vega-Embed](https://cdn.jsdelivr.net/npm/vega-embed@7) and include them on pages with charts:\n\n```html\n\u003cscript src=\"vega.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"vega-lite.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"vega-embed.js\"\u003e\u003c/script\u003e\n```\n\n## Getting Started\n\nVega is a visualization grammar, and Vega-Lite is a high-level grammar built on top of it. We recommend using Vega-Lite by default and moving to Vega for advanced use cases.\n\nCreate visualizations by chaining together methods:\n\n```ruby\nVega.lite.data(data).mark(\"bar\").height(200)\n```\n\nThere are methods for each of the top-level properties. The docs are a great source of examples:\n\n- [Vega-Lite docs](https://vega.github.io/vega-lite/docs/)\n- [Vega docs](https://vega.github.io/vega/docs/)\n\n## Example\n\nCreate a bar chart\n\n```ruby\nVega.lite\n  .data([{city: \"A\", sales: 28}, {city: \"B\", sales: 55}, {city: \"C\", sales: 43}])\n  .mark(type: \"bar\", tooltip: true)\n  .encoding(\n    x: {field: \"city\", type: \"nominal\"},\n    y: {field: \"sales\", type: \"quantitative\"}\n  )\n```\n\nThe chart will automatically render in iRuby. For Rails, render it in your view:\n\n```erb\n\u003c%= Vega.lite.data(...) %\u003e\n```\n\n## Vega-Lite\n\nStart a Vega-Lite chart with:\n\n```ruby\nVega.lite\n```\n\n### Data\n\n[Docs](https://vega.github.io/vega-lite/docs/data.html)\n\nData can be an array\n\n```ruby\ndata([{x: \"A\", y: 1}, {x: \"B\", y: 2}])\n```\n\nOr a URL\n\n```ruby\ndata(\"https://www.example.com/data.json\")\n```\n\nOr a Rover data frame\n\n```ruby\ndata(df)\n```\n\nOr a data generator\n\n```ruby\ndata(sequence: {start: 0, stop: 10, step: 1, as: \"x\"})\n```\n\n### Transforms\n\n[Docs](https://vega.github.io/vega-lite/docs/transform.html)\n\n```ruby\ntransform(bin: true, field: \"a\", as: \"binned a\")\n```\n\n### Marks\n\n[Docs](https://vega.github.io/vega-lite/docs/mark.html)\n\nBar chart\n\n```ruby\nmark(\"bar\")\n```\n\nLine chart\n\n```ruby\nmark(\"line\")\n```\n\nPie chart\n\n```ruby\nmark(\"pie\")\n```\n\nArea chart\n\n```ruby\nmark(\"area\")\n```\n\nEnable tooltips\n\n```ruby\nmark(type: \"bar\", tooltip: true)\n```\n\n### Encoding\n\n[Docs](https://vega.github.io/vega-lite/docs/mark.html)\n\n```ruby\nencoding(x: {field: \"a\", type: \"ordinal\"})\n```\n\n### Projection\n\n[Docs](https://vega.github.io/vega-lite/docs/projection.html)\n\n```ruby\nprojection(type: \"albersUsa\")\n```\n\n### View Composition\n\n[Docs](https://vega.github.io/vega-lite/docs/composition.html)\n\nFaceting\n\n```ruby\nfacet(row: {field: \"x\"})\n```\n\nLayering\n\n```ruby\nlayer(view)\n```\n\nConcatenation\n\n```ruby\nhconcat(view)\nvconcat(view)\nconcat(view)\n```\n\nRepeating\n\n```ruby\nrepeat(row: [\"a\", \"b\", \"c\"])\n```\n\nResolving\n\n```ruby\nresolve(scale: {color: \"independent\"})\n```\n\n### Selections\n\n[Docs](https://vega.github.io/vega-lite/docs/selection.html)\n\n```ruby\nselection(x: {type: \"single\"})\n```\n\n### Parameters\n\n[Docs](https://vega.github.io/vega-lite/docs/parameter.html)\n\n```ruby\nparams(name: \"cornerRadius\", value: 5)\n```\n\n### Config\n\n[Docs](https://vega.github.io/vega-lite/docs/config.html)\n\nSet the font\n\n```ruby\nconfig(font: \"Helvetica\")\n```\n\n### Top-Level Properties\n\n[Docs](https://vega.github.io/vega-lite/docs/spec.html#top-level)\n\nSet width and height\n\n```ruby\nwidth(500).height(300)\n```\n\nSet the background color\n\n```ruby\nbackground(\"#000\")\n```\n\nSet padding\n\n```ruby\npadding(5)\n# or\npadding(left: 5, top: 5, right: 5, bottom: 5)\n```\n\n### Embed Options\n\n[Docs](https://github.com/vega/vega-embed#options)\n\nSet embed options\n\n```ruby\nembed_options(actions: true)\n```\n\n## Vega\n\nYou can also use Vega directly. In this case, you don’t need to include Vega-Lite in the JavaScript files.\n\nStart a Vega chart with:\n\n```ruby\nVega.start\n```\n\n## Spec\n\nYou can also create a specification by hand\n\n```ruby\nspec = {\n  \"$schema\" =\u003e \"https://vega.github.io/schema/vega-lite/v6.json\",\n  \"data\" =\u003e {\"url\" =\u003e \"https://www.example.com\"},\n  # ...\n}\n```\n\nAnd render it in Rails\n\n```erb\n\u003c%= vega_chart spec %\u003e\n```\n\nOr display it in iRuby\n\n```ruby\nVega.display(spec)\n```\n\nGet the spec for a chart\n\n```ruby\nchart.spec\n```\n\n## Exporting Charts (experimental)\n\nExport charts to PNG, SVG, or PDF. This requires Node.js and npm 7+. Run:\n\n```sh\nyarn add vega-cli vega-lite\n```\n\nFor PNG, use:\n\n```ruby\nFile.binwrite(\"chart.png\", chart.to_png)\n```\n\nFor SVG, use:\n\n```ruby\nFile.binwrite(\"chart.svg\", chart.to_svg)\n```\n\nFor PDF, use:\n\n```ruby\nFile.binwrite(\"chart.pdf\", chart.to_pdf)\n```\n\n## Content Security Policy (CSP)\n\n### Styles and Frames\n\nEnable unsafe inline styles and blob frames on actions that have charts\n\n```ruby\nclass ChartsController \u003c ApplicationController\n  content_security_policy only: :index do |policy|\n    policy.style_src :self, :unsafe_inline\n    policy.frame_src :blob\n  end\nend\n```\n\n### Nonce\n\nAutomatically add a nonce when configured in Rails with:\n\n```erb\n\u003c%= vega_chart chart %\u003e\n```\n\n### Interpreter\n\nBy default, the Vega parser uses the Function constructor, which [can cause issues with CSP](https://vega.github.io/vega/usage/interpreter/).\n\nFor Importmap, add to `config/importmap.rb`:\n\n```ruby\npin \"vega-interpreter\", to: \"vega-interpreter.js\"\n```\n\nAnd add to `app/javascript/application.js`:\n\n```js\nimport \"vega-interpreter\"\n```\n\nFor Bun, run:\n\n```sh\nbun add vega-interpreter\n```\n\nFor esbuild or Webpack, run:\n\n```sh\nyarn add vega-interpreter\n```\n\nFor Sprockets, add to `app/assets/javascripts/application.js`:\n\n```js\n//= require vega-interpreter\n```\n\nAnd set embed options for your charts\n\n```ruby\nembed_options(ast: true)\n```\n\n## History\n\nView the [changelog](https://github.com/ankane/vega-ruby/blob/master/CHANGELOG.md)\n\n## Contributing\n\nEveryone is encouraged to help improve this project. Here are a few ways you can help:\n\n- [Report bugs](https://github.com/ankane/vega-ruby/issues)\n- Fix bugs and [submit pull requests](https://github.com/ankane/vega-ruby/pulls)\n- Write, clarify, or fix documentation\n- Suggest or add new features\n\nTo get started with development:\n\n```sh\ngit clone https://github.com/ankane/vega-ruby.git\ncd vega-ruby\nbundle install\nbundle exec rake test\n```\n\nResources for contributors:\n\n- [Vega specification](https://vega.github.io/vega/docs/specification/)\n- [Vega-Lite specification](https://vega.github.io/vega-lite/docs/spec.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankane%2Fvega-ruby","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankane%2Fvega-ruby","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankane%2Fvega-ruby/lists"}