Merge pull request #1665 from ClimateWatch-Vizzuality/visualization-u…

…pload-johannes Visualization upload johannes
ClimateWatch-Vizzuality · Jun 9, 2023 · fd58546 · fd58546
2 parents f7de4e8 + 748b180
commit fd58546
Show file tree

Hide file tree

Showing 13 changed files with 234 additions and 1 deletion.
diff --git a/public/visualizations/sunburst-world-emitters-2022/README.txt b/public/visualizations/sunburst-world-emitters-2022/README.txt
@@ -0,0 +1 @@
+You can put static files in this directory.
diff --git a/public/visualizations/sunburst-world-emitters-2022/flourish.embed.js b/public/visualizations/sunburst-world-emitters-2022/flourish.embed.js
diff --git a/public/visualizations/sunburst-world-emitters-2022/how_to_embed_me.txt b/public/visualizations/sunburst-world-emitters-2022/how_to_embed_me.txt
@@ -0,0 +1,26 @@
+Host the contents of this zipfile at a URL of your choice. Then on the page where you would like to embed the visualisation, use one of the following embed codes, replacing {{URL}} with the real URL corresponding to the directory these unpacked files are in (see the notes below).
+
+Preferred method: flourish.embed.js
+-----------------------------------
+
+Use the included flourish.embed.js file to embed (recommended; best for responsive). Target a container div where you want the visualisation to appear using the data-src attribute, as follows:
+
+    <div class="flourish-embed" data-src="{{URL}}/index.html"><script src="{{URL}}/flourish.embed.js"></script></div>
+
+You only need to include the script once in your HTML page, even if you have multiple visualisations displayed (though there is no harm in including it multiple times; it will only run once).
+
+Alternative method: iframe embed
+--------------------------------
+
+You can also embed via a simple iframe (this is best if your CMS blocks scripts):
+
+    <iframe scrolling="no" src="{{URL}}" data-id="visualisation/12502548" class="flourish-embed-iframe"></iframe><div><a href="https://flourish.studio/?utm_source=embed" target='_top'><img alt="Made with Flourish" src="https://public.flourish.studio/resources/made_with_flourish.svg"></a></div>
+
+Be sure to specify scrolling="no" to avoid problems on iOS.
+
+Notes
+-----
+
+1. Your {{URL}} must be a full path, not a local file URL - in other words it should begin http:// or https://, not file://.
+2. If necessary, also update the height and width.
+3. You may not remove the Flourish credit unless you are an enterprise customer or have permission from Flourish HQ.
diff --git a/public/visualizations/sunburst-world-emitters-2022/index.html b/public/visualizations/sunburst-world-emitters-2022/index.html
diff --git a/public/visualizations/sunburst-world-emitters-2022/style.css b/public/visualizations/sunburst-world-emitters-2022/style.css
diff --git a/public/visualizations/sunburst-world-emitters-2022/style.css.map b/public/visualizations/sunburst-world-emitters-2022/style.css.map
diff --git a/public/visualizations/test-visualization/README.txt b/public/visualizations/test-visualization/README.txt
@@ -0,0 +1 @@
+You can put static files in this directory.
diff --git a/public/visualizations/test-visualization/flourish.embed.js b/public/visualizations/test-visualization/flourish.embed.js
diff --git a/public/visualizations/test-visualization/how_to_embed_me.txt b/public/visualizations/test-visualization/how_to_embed_me.txt
@@ -0,0 +1,26 @@
+Host the contents of this zipfile at a URL of your choice. Then on the page where you would like to embed the visualisation, use one of the following embed codes, replacing {{URL}} with the real URL corresponding to the directory these unpacked files are in (see the notes below).
+
+Preferred method: flourish.embed.js
+-----------------------------------
+
+Use the included flourish.embed.js file to embed (recommended; best for responsive). Target a container div where you want the visualisation to appear using the data-src attribute, as follows:
+
+    <div class="flourish-embed" data-src="{{URL}}/index.html"><script src="{{URL}}/flourish.embed.js"></script></div>
+
+You only need to include the script once in your HTML page, even if you have multiple visualisations displayed (though there is no harm in including it multiple times; it will only run once).
+
+Alternative method: iframe embed
+--------------------------------
+
+You can also embed via a simple iframe (this is best if your CMS blocks scripts):
+
+    <iframe scrolling="no" src="{{URL}}" data-id="visualisation/708106" class="flourish-embed-iframe"></iframe><div><a href="https://flourish.studio/?utm_source=embed" target='_top'><img alt="Made with Flourish" src="https://public.flourish.studio/resources/made_with_flourish.svg"></a></div>
+
+Be sure to specify scrolling="no" to avoid problems on iOS.
+
+Notes
+-----
+
+1. Your {{URL}} must be a full path, not a local file URL - in other words it should begin http:// or https://, not file://.
+2. If necessary, also update the height and width.
+3. You may not remove the Flourish credit unless you are an enterprise customer or have permission from Flourish HQ.
diff --git a/public/visualizations/test-visualization/index.html b/public/visualizations/test-visualization/index.html
diff --git a/public/visualizations/test-visualization/style.css b/public/visualizations/test-visualization/style.css
diff --git a/public/visualizations/test-visualization/style.css.map b/public/visualizations/test-visualization/style.css.map
diff --git a/public/visualizations/top-emitters-2018/circle_state_config.htm b/public/visualizations/top-emitters-2018/circle_state_config.htm
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
+ 
   <title>Climate Watch - Top 10 Greenhouse Gas Emitters 2018</title>
 
   <script id="twitter-wjs" src="files/widgets.js"></script>