Skip to content

Embedding Custom Dataviz

Naomi I. Morduch Toubman edited this page Jul 27, 2023 · 3 revisions

To embed custom dataviz in a report

To get the information you need for embedding

  1. Find the relevant visualization at data.newamerica.org
  2. The dataviz src is the url listed as the "Script" link. It will look like https://data.newamerica.org/PROJECT_ID/dist/bundle.js.gz
  3. To find the container id open the "Preview" link for that visualization, and use the text that is listed as chartId in the preview. If there are multiple visualizations for this project, there will be multiple ids.

To add the visualization to the report

  • On the Settings tab of the report, fill out the dataviz src (the last field)
  • For each visualization you want to embed, use the "custom dataviz" block.
    • Fill out the container id as found above
    • The width in the dropdown is usually going to be "site width"
    • If you want an image in the pdf, you'll need to add it just like with the Datawrapper block

Template for giving instructions for adding to a given report

  • On the Settings tab, under "Dataviz src" (the last field) put: https://data.newamerica.org/PROJECT_ID/dist/bundle.js.gz
  • Where you want to put the visualization, use the "custom dataviz" block.
    • The "container id" is: viz__id
    • The width in the dropdown is: site width
    • If you want an image in the pdf, you'll need to add it just like with the Datawrapper block