✨ improve download modal

owid · Aug 9, 2024 · 1f9008e · 1f9008e
1 parent 6809fd0
commit 1f9008e
Showing 1 changed file with 25 additions and 5 deletions.
diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx b/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
@@ -325,11 +325,18 @@ export class DownloadModal extends React.Component<DownloadModalProps> {
         }
 
         const csvUrl = this.csvFileUrl
+        const metadataUrl = csvUrl.replace(".csv", ".metadata.json")
 
         const googleDocsCode = `=IMPORTDATA("${csvUrl}")`
 
         const pandasCode = `import pandas as pd
-df = pd.read_csv("${csvUrl}")`
+import requests
+
+# Fetch the data
+df = pd.read_csv("${csvUrl}")
+
+# Fetch the metadata
+metadata = requests.get("${metadataUrl}").json()`
 
         const rCode = `df <- read.csv("${csvUrl}")`
         return (
@@ -416,9 +423,18 @@ df = pd.read_csv("${csvUrl}")`
                         </div>
                     ) : (
                         <>
+                            <h4>Source</h4>
+                            <p>
+                                Whenever you use this data in a public context,
+                                please make sure to credit the original source
+                                and to verify that your use is permitted as per
+                                the source's license.
+                            </p>
+                            <p>{this.renderSources()}</p>
                             <h4 className="grapher_h4-semibold">
                                 Download options
                             </h4>
+
                             <div className="grouped-menu-list">
                                 <button
                                     title="Full data (CSV)"
@@ -453,13 +469,17 @@ df = pd.read_csv("${csvUrl}")`
                                     </div>
                                 </button>
                             </div>
-                            <h4>Source</h4>
-                            <p>{this.renderSources()}</p>
                             <h4>Download</h4>
                             <div className="grouped-menu-list">
                                 <DownloadButton
-                                    title="Data as CSV"
-                                    description="Download the data in CSV format."
+                                    title="Data and metadata as a ZIP file"
+                                    description="Download the data csv, metadata json and a readme as a ZIP file."
+                                    onClick={this.onCsvDownload}
+                                    tracking="chart_download_csv"
+                                />
+                                <DownloadButton
+                                    title="Data only (CSV)"
+                                    description="Download only the data in CSV format."
                                     onClick={this.onCsvDownload}
                                     tracking="chart_download_csv"
                                 />