posts_gdocs: 1rD09jXoEG2FDKNkHsfs_iDL4wW1nGwUf1KEl-uhNTKA
Data license: CC-BY
This data as json
| id | slug | type | content | published | createdAt | publishedAt | updatedAt | publicationContext | revisionId | breadcrumbs | markdown | title |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1rD09jXoEG2FDKNkHsfs_iDL4wW1nGwUf1KEl-uhNTKA | how-to-embed | article | {
"toc": [
{
"slug": "an-example",
"text": "An example",
"title": "An example",
"supertitle": "",
"isSubheading": false
},
{
"slug": "all-you-have-to-do-to-embed-it-in-your-article",
"text": "All you have to do to embed it in your article",
"title": "All you have to do to embed it in your article",
"supertitle": "",
"isSubheading": false
},
{
"slug": "change-the-map-focus-change-the-year",
"text": "Change the map focus, change the year",
"title": "Change the map focus, change the year",
"supertitle": "",
"isSubheading": false
},
{
"slug": "static-visualizations-for-your-text-or-presentation",
"text": "Static\u00a0visualizations for your text or presentation",
"title": "Static\u00a0visualizations for your text or presentation",
"supertitle": "",
"isSubheading": false
}
],
"body": [
{
"type": "text",
"value": [
{
"text": "You can use any of the interactive visualizations from Our World in Data in your\u00a0articles. This is possible because everything is\u00a0permissively licensed (under ",
"spanType": "span-simple-text"
},
{
"url": "https://creativecommons.org/licenses/by-sa/3.0/",
"children": [
{
"text": "CC-BY-SA",
"spanType": "span-simple-text"
}
],
"spanType": "span-link"
},
{
"text": ") and because there is an easy embed feature on every chart.",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"type": "text",
"value": [
{
"text": "Here are two recent\u00a0examples of articles\u00a0that embed OWID visualizations:",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"type": "list",
"items": [
{
"type": "text",
"value": [
{
"url": "http://ofuturodascoisas.com/projecao-da-populacao-pelo-nivel-educacional-ate-2100/",
"children": [
{
"text": "The Brazilian website\u00a0",
"spanType": "span-simple-text"
}
],
"spanType": "span-link"
},
{
"children": [
{
"url": "http://ofuturodascoisas.com/projecao-da-populacao-pelo-nivel-educacional-ate-2100/",
"children": [
{
"text": "o futuro das coisas",
"spanType": "span-simple-text"
}
],
"spanType": "span-link"
}
],
"spanType": "span-italic"
},
{
"text": "\u00a0",
"spanType": "span-simple-text"
},
{
"url": "http://ofuturodascoisas.com/projecao-da-populacao-pelo-nivel-educacional-ate-2100/",
"children": [
{
"text": "in an article about the future of global education",
"spanType": "span-simple-text"
}
],
"spanType": "span-link"
},
{
"text": ".",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"type": "text",
"value": [
{
"url": "http://www.vox.com/2016/4/25/11488196/world-malaria-day",
"children": [
{
"text": "Vox.com in an article on the decline of global malaria deaths on World Malaria Day",
"spanType": "span-simple-text"
}
],
"spanType": "span-link"
},
{
"text": ".",
"spanType": "span-simple-text"
}
],
"parseErrors": []
}
],
"parseErrors": []
},
{
"text": [
{
"text": "An example",
"spanType": "span-simple-text"
}
],
"type": "heading",
"level": 2,
"parseErrors": []
},
{
"type": "text",
"value": [
{
"text": "For example\u00a0let's assume\u00a0you want to write about\u00a0fertility and on the ",
"spanType": "span-simple-text"
},
{
"url": "https://ourworldindata.org/fertility/",
"children": [
{
"text": "fertility",
"spanType": "span-simple-text"
}
],
"spanType": "span-link"
},
{
"text": " page\u00a0you find this map that you want to embed in your own article:",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"url": "https://ourworldindata.org/grapher/children-per-woman-un",
"type": "chart",
"parseErrors": []
},
{
"text": [
{
"text": "All you have to do to embed it in your article",
"spanType": "span-simple-text"
}
],
"type": "heading",
"level": 2,
"parseErrors": []
},
{
"type": "text",
"value": [
{
"text": "At the bottom right of the chart you click the little icon and then chose the option </>",
"spanType": "span-simple-text"
},
{
"children": [
{
"text": "\u00a0Embed",
"spanType": "span-simple-text"
}
],
"spanType": "span-bold"
},
{
"text": ". You will see a\u00a0box popping up with the following bit of text:",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"type": "text",
"value": [
{
"text": "<iframe src=\"https://ourworldindata.org/grapher/children-per-woman-un\" width=\"100%\" height=\"600px\"></iframe>",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"type": "text",
"value": [
{
"text": "Now you just take this bit of html code and place it in\u00a0the text of your own article.",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"type": "text",
"value": [
{
"text": "An iframe is used to display a website within another website (",
"spanType": "span-simple-text"
},
{
"children": [
{
"text": "w3schools",
"spanType": "span-simple-text"
}
],
"spanType": "span-italic"
},
{
"text": " has\u00a0",
"spanType": "span-simple-text"
},
{
"url": "http://www.w3schools.com/html/html_iframe.asp",
"children": [
{
"text": "more info on iframes",
"spanType": "span-simple-text"
}
],
"spanType": "span-link"
},
{
"text": ".) Similar to when you embed a YouTube video in your article, your article now embeds an Our World in Data visualization.",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"text": [
{
"text": "Change the map focus, change the year",
"spanType": "span-simple-text"
}
],
"type": "heading",
"level": 2,
"parseErrors": []
},
{
"type": "text",
"value": [
{
"text": "We try to make the embed tool as useful as possible: For example, you can focus on Africa instead of World in the map above; and you can move the time slider to 2015 (you will get ",
"spanType": "span-simple-text"
},
{
"url": "https://ourworldindata.org/grapher/children-per-woman-un?region=Africa&year=2015",
"children": [
{
"text": "this",
"spanType": "span-simple-text"
}
],
"spanType": "span-link"
},
{
"text": "). Now when you click on",
"spanType": "span-simple-text"
},
{
"children": [
{
"text": " ",
"spanType": "span-simple-text"
}
],
"spanType": "span-bold"
},
{
"text": "</>",
"spanType": "span-simple-text"
},
{
"children": [
{
"text": " Embed",
"spanType": "span-simple-text"
}
],
"spanType": "span-bold"
},
{
"text": " you get the following bit of code:",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"type": "text",
"value": [
{
"text": "<iframe src=\"https://ourworldindata.org/grapher/children-per-woman-un?region=Africa&year=2015\" width=\"100%\" height=\"600px\"></iframe>",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"type": "text",
"value": [
{
"text": "If you copy-paste this code your article will embed the\u00a0map with a focus on Africa and the fertility rate for 2015.",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"type": "text",
"value": [
{
"text": "And the same works for the chart view.\u00a0Just switch to Chart in the\u00a0visualization above and\u00a0add the countries that you are interested in \u2013 like ",
"spanType": "span-simple-text"
},
{
"url": "https://ourworldindata.org/grapher/children-per-woman-un?tab=chart&country=DEU+IRN",
"children": [
{
"text": "this",
"spanType": "span-simple-text"
}
],
"spanType": "span-link"
},
{
"text": ". When you click on",
"spanType": "span-simple-text"
},
{
"children": [
{
"text": " ",
"spanType": "span-simple-text"
}
],
"spanType": "span-bold"
},
{
"text": "</>",
"spanType": "span-simple-text"
},
{
"children": [
{
"text": " Embed",
"spanType": "span-simple-text"
}
],
"spanType": "span-bold"
},
{
"text": " you can now get the code to embed this line chart.",
"spanType": "span-simple-text"
}
],
"parseErrors": []
},
{
"text": [
{
"text": "Static\u00a0visualizations for your text or presentation",
"spanType": "span-simple-text"
}
],
"type": "heading",
"level": 2,
"parseErrors": []
},
{
"type": "text",
"value": [
{
"text": "It is also possible to put static versions of Our World in Data visualizations in web articles, text documents or presentations.\u00a0Just click on\u00a0PNG below the chart\u00a0and you have the chart that you need.",
"spanType": "span-simple-text"
}
],
"parseErrors": []
}
],
"refs": {
"errors": [],
"definitions": {}
},
"type": "article",
"title": "How to embed Our World in Data visualizations in your article",
"authors": [
"Max Roser"
],
"excerpt": "Learn how to use any of the interactive visualizations from Our World in Data in your articles.",
"dateline": "June 13, 2016",
"subtitle": "",
"featured-image": ""
} |
1 | 2023-11-30 06:50:48 | 2016-06-13 09:58:00 | 2023-12-28 16:31:11 | listed | ALBJ4LtTgSZgqtMTAnYygsW8SLdIHaug3g5MR3KIx-Nw8v383EEvQb2cTruTmVbEg2e_p16pR-b34x5M7bUecA | You can use any of the interactive visualizations from Our World in Data in your articles. This is possible because everything is permissively licensed (under [CC-BY-SA](https://creativecommons.org/licenses/by-sa/3.0/)) and because there is an easy embed feature on every chart. Here are two recent examples of articles that embed OWID visualizations: * [The Brazilian website ](http://ofuturodascoisas.com/projecao-da-populacao-pelo-nivel-educacional-ate-2100/)_[o futuro das coisas](http://ofuturodascoisas.com/projecao-da-populacao-pelo-nivel-educacional-ate-2100/)_ [in an article about the future of global education](http://ofuturodascoisas.com/projecao-da-populacao-pelo-nivel-educacional-ate-2100/). * [Vox.com in an article on the decline of global malaria deaths on World Malaria Day](http://www.vox.com/2016/4/25/11488196/world-malaria-day). ## An example For example let's assume you want to write about fertility and on the [fertility](https://ourworldindata.org/fertility/) page you find this map that you want to embed in your own article: <Chart url="https://ourworldindata.org/grapher/children-per-woman-un"/> ## All you have to do to embed it in your article At the bottom right of the chart you click the little icon and then chose the option </>** Embed**. You will see a box popping up with the following bit of text: <iframe src="https://ourworldindata.org/grapher/children-per-woman-un" width="100%" height="600px"></iframe> Now you just take this bit of html code and place it in the text of your own article. An iframe is used to display a website within another website (_w3schools_ has [more info on iframes](http://www.w3schools.com/html/html_iframe.asp).) Similar to when you embed a YouTube video in your article, your article now embeds an Our World in Data visualization. ## Change the map focus, change the year We try to make the embed tool as useful as possible: For example, you can focus on Africa instead of World in the map above; and you can move the time slider to 2015 (you will get [this](https://ourworldindata.org/grapher/children-per-woman-un?region=Africa&year=2015)). Now when you click on** **</>** Embed** you get the following bit of code: <iframe src="https://ourworldindata.org/grapher/children-per-woman-un?region=Africa&year=2015" width="100%" height="600px"></iframe> If you copy-paste this code your article will embed the map with a focus on Africa and the fertility rate for 2015. And the same works for the chart view. Just switch to Chart in the visualization above and add the countries that you are interested in – like [this](https://ourworldindata.org/grapher/children-per-woman-un?tab=chart&country=DEU+IRN). When you click on** **</>** Embed** you can now get the code to embed this line chart. ## Static visualizations for your text or presentation It is also possible to put static versions of Our World in Data visualizations in web articles, text documents or presentations. Just click on PNG below the chart and you have the chart that you need. | How to embed Our World in Data visualizations in your article |