backend/app.py

@@ -1,42 +1,11 @@
-from flask import Flask, g, jsonify, request, json, Response, send_from_directory, abort
+from flask import Flask, jsonify, request, json, Response, send_from_directory, abort
 from flask_cors import CORS
 import orjson, os
 
-import datetime
-import time
-
 app = Flask(__name__)
 CORS(app)
 
 FILES_DIRECTORY = '../data/'
-today = datetime.datetime.today()
-
-@app.before_request
-def start_timer():
-    g.start = time.time()
-
-@app.after_request
-def log(response):
-    now = time.time()
-    duration = round(now - g.start, 4)
-    dt = datetime.datetime.fromtimestamp(now).strftime('%Y-%m-%d %H:%M:%S')
-
-    log_entry = {
-        'timestamp': dt,
-        'duration': duration,
-        'method': request.method,
-        'url': request.url,
-        'status': response.status_code,
-        'remote_addr': request.remote_addr,
-        'user_agent': request.user_agent.string,
-    }
-
-    log_line = ','.join(f'{key}={value}' for key, value in log_entry.items())
-
-    with open('api_logs.txt', 'a') as f:
-        f.write(log_line + '\n')
-
-    return response
 
 @app.route('/bitcoin_business_growth_by_country', methods=['GET'])
 def business_growth():
@@ -60,18 +29,8 @@ def business_growth():
         countries = [name.strip() for name in country_names.split(",")]
         filtered_data = [item for item in filtered_data if item['country_name'] in countries]
     
-    if cumulative_period_type == "1 day":
+    if cumulative_period_type:
-        delta = today - datetime.timedelta(days=2)
+        filtered_data = [item for item in filtered_data if item['cumulative_period_type'] == cumulative_period_type]
-        filtered_data = [item for item in filtered_data if item['cumulative_period_type'] == cumulative_period_type and delta <= datetime.datetime.strptime(item['date'], '%Y-%m-%d')]
-    elif cumulative_period_type == "7 day":
-        delta = today - datetime.timedelta(days=7)
-        filtered_data = [item for item in filtered_data if item['cumulative_period_type'] == cumulative_period_type and delta <= datetime.datetime.strptime(item['date'], '%Y-%m-%d')]
-    elif cumulative_period_type == "28 day":
-        delta = today - datetime.timedelta(days=28)
-        filtered_data = [item for item in filtered_data if item['cumulative_period_type'] == cumulative_period_type and delta <= datetime.datetime.strptime(item['date'], '%Y-%m-%d')]
-    elif cumulative_period_type == "365 day":
-        delta = today - datetime.timedelta(days=365)
-        filtered_data = [item for item in filtered_data if item['cumulative_period_type'] == cumulative_period_type and delta <= datetime.datetime.strptime(item['date'], '%Y-%m-%d')]
     
     # Sort by date
     sorted_data = sorted(filtered_data, key=lambda x: x['date'], reverse=True)
@@ -81,36 +40,14 @@ def business_growth():
 
 @app.route('/get_json/<filename>', methods=['GET'])
 def get_json(filename):
-
-    period = request.args.get('period')
-
     file_path = os.path.join(FILES_DIRECTORY, filename)
     if not os.path.isfile(file_path):
         abort(404)
 
-    with open(file_path, 'r') as f:
+    with open(file_path, 'r') as file:
-        data = orjson.loads(f.read())
+        data = json.load(file)
 
-    if period == "last 7 days":
+    return jsonify(data)
-        delta = today - datetime.timedelta(days=7)
-        filtered_data = [item for item in data if delta <= datetime.datetime.strptime(item['date'], '%Y-%m-%d') <= today]
-        sorted_data = sorted(filtered_data, key=lambda x: x['date'])
-    elif period == "last 28 days":
-        delta = today - datetime.timedelta(days=28)
-        filtered_data = [item for item in data if delta <= datetime.datetime.strptime(item['date'], '%Y-%m-%d') <= today]
-        sorted_data = sorted(filtered_data, key=lambda x: x['date'])
-    elif period == "last 365 days":
-        delta = today - datetime.timedelta(days=365)
-        filtered_data = [item for item in data if delta <= datetime.datetime.strptime(item['date'], '%Y-%m-%d') <= today]
-        sorted_data = sorted(filtered_data, key=lambda x: x['date'])
-    elif period == "last 2 years":
-        delta = today - datetime.timedelta(days=730)
-        filtered_data = [item for item in data if delta <= datetime.datetime.strptime(item['date'], '%Y-%m-%d') <= today]
-        sorted_data = sorted(filtered_data, key=lambda x: x['date'])
-    else:
-        sorted_data = sorted(data, key=lambda x: x['date'])
-
-    return jsonify(sorted_data)
 
 @app.route('/download/<filename>', methods=['GET'])
 def download_file(filename):

content/data-downloads/singapore-srtm.md

@@ -11,7 +11,7 @@ tags: ["QGIS", "SRTM", "DEM", "Raster", "download"]
 {{< figure src="/pics/blog/batch-import-postgis-rasters/singapore-final.webp" width="300">}}
 Download the Digital Elevation Model featured in [this](/blog/batch-import-postgis-rasters/) blog.
 
-{{< download-data src="/singapore-srtm-dem.tif" name="singapore-srtm-dem.tif" >}}
+{{< download-data src="https://api.baseddata.io/download/singapore-srtm-dem.tif" name="singapore-srtm-dem.tif" >}}
 
 #### Citations
 NASA Shuttle Radar Topography Mission (SRTM)(2013). Shuttle Radar Topography Mission (SRTM) Global. Distributed by OpenTopography. https://doi.org/10.5069/G9445JDF. Accessed: 2024-08-06

content/data-lab/global-business-growth.md

@@ -8,12 +8,13 @@ summary: "This analysis uses OpenStreetMaps data to chart the yearly growth of b
 tags: ["Bitcoin", "Stats", "OpenStreetMaps"]
 ---
 
-The table below illustrates growth of businesses worldwide that accept bitcoin as payment for products or services. The accompanying chart displays the cumulative number of bitcoin-accepting businesses for the countries selected in the table. The data is sourced from OpenStreetMaps and is updated approximately every 2 hours.
+The table below illustrates growth of businesses worldwide that accept bitcoin as payment for products or services. The accompanying chart displays the yearly cumulative number of bitcoin-accepting businesses for the countries selected in the table. The data is sourced from OpenStreetMaps and is updated approximately every 2 hours.
 
 You can select the growth period of interest from the drop-down, which updates the values in the table. The table shows the ***Previous*** value, which was the number of businesses *n* days ago specified in the drop-down. The ***Current*** value is the number of businesses as of the latest update. The table also shows the ***Absolute Difference***, and the ***Percent Difference*** between this period.
 
-The chart always reflects the countries selected in the table.
+The chart always reflects the countries selected in the table. There is a zoom feature on the chart to focus in on a period of interest.
 
 <br/>
+Select growth period: {{< dropdown-filter id=cumulative_period_type select="365 day,28 day,7 day,1 day" >}}
 {{< chart src="/js/bitcoin-business-growth-chart.js" >}}
 {{< table src="/js/bitcoin-business-growth-table.js" >}}

hugo.toml

@@ -1,10 +1,7 @@
-baseURL = 'baseddata.io'
+baseURL = 'https://baseddata.io/'
 languageCode = 'en-gb'
 title = 'Based Data'
 
-[params]
-    apiURL = 'http://localhost:5000'
-
 [markup.highlight]
     pygmentsUseClasses = false
     codeFences = true

layouts/partials/chart.html

@@ -1,7 +1,7 @@
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
 <section class="chart-container">
-  <div id="chart-modifiers"></div>
   <div id="chart">
+    <canvas id="{{ .id }}"></canvas>
     <script src="{{ .src }}"></script>
   </div>
 </section>

layouts/shortcodes/bitcoin-price.html

@@ -4,7 +4,7 @@
     <p id="price"></p>
 
     <script>
-      fetch(`${"{{ .Site.Params.apiURL }}"}/get_json/final__price.json`)
+      fetch("https://api.baseddata.io/get_json/final__price.json")
         .then((response) => response.json())
         .then((data) => {
           var lastElement = data[data.length - 1];

layouts/shortcodes/chart.html

@@ -1,5 +1,2 @@
-<script>
+{{ $id := .Get "src" | md5 }} 
-  const apiURL = "{{ .Site.Params.apiURL }}";
+{{ partial "chart.html" (dict "src" (.Get "src") "id" $id) }}
-</script>
-{{ $id := .Get "src" | md5 }} {{ partial "chart.html" (dict "src" (.Get "src")
-"id" $id) }}

layouts/shortcodes/download-data.html

@@ -5,7 +5,7 @@
 <script>
   async function downloadFile(url, name) {
     try {
-      const response = await fetch(`${"{{ .Site.Params.apiURL }}"}/download${url}`);
+      const response = await fetch(url);
       if (!response.ok) {
         throw new Error('Network response was not ok');
       }

layouts/shortcodes/dropdown-filter.html

@@ -0,0 +1,7 @@
+<select id={{ .Get "id" }} class="dropdownFilter">
+{{ with .Get "select" }}
+  {{ range $index, $element := split . "," }}
+    <option value="{{ $element }}">{{ $element }}</option>
+  {{ end }}
+</select>
+{{ end }}

static/css/charts.css

@@ -16,9 +16,4 @@
   margin-top: 20px;
   display: flex;
   justify-content: center;
-  flex-direction: column;
-}
-
-#chart-modifiers {
-  display: flex;
 }

static/js/bitcoin-business-growth-chart.js

@@ -1,14 +1,9 @@
 let chartData = [];
 let myChart;
 
-let periodIndex = 3;
+async function fetchDataForChart(str) {
-
-const periods = ["1 day", "7 day", "28 day", "365 day"];
-
-async function fetchDataForChart(str, period) {
   try {
-    const apiEndpoint = `${apiURL}/bitcoin_business_growth_by_country?cumulative_period_type=${period}&countries=${str}`;
+    const apiEndpoint = `https://api.baseddata.io/bitcoin_business_growth_by_country?cumulative_period_type=365 day&countries=${str}`;
-    console.log("Fetching from " + apiEndpoint);
     const response = await fetch(apiEndpoint);
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
@@ -74,21 +69,18 @@ function handleCheckboxChange(event) {
   if (event.target.type === "checkbox") {
     const boxChecked = event.target.checked;
     const boxId = event.target.id;
-    let selectedPeriod = getPeriodFromDropdown();
     // Remove unchecked boxes
     if (boxChecked === false) {
       delete chartData[boxId];
       updateChart();
       // Add checked boxes
     } else {
-      fetchDataForChart(boxId, selectedPeriod);
+      fetchDataForChart(boxId);
     }
   }
 }
 
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("reloadTable", () => {
-  periodDropdown(periods, periodIndex);
-  document.addEventListener("reloadTable", () => {
   myChart = echarts.init(document.getElementById("chart"));
   jsonTableCheckedBoxes = document.querySelectorAll(
     '#jsonTableContainer input[type="checkbox"]:checked',
@@ -97,12 +89,10 @@ document.addEventListener("DOMContentLoaded", function () {
     (checkbox) => checkbox.id,
   );
   const str = checkedBoxes.join(",");
-    let selectedPeriod = getPeriodFromDropdown();
   chartData = [];
-    fetchDataForChart(str, selectedPeriod);
+  fetchDataForChart(str);
 
   jsonTable = document.getElementById("jsonTableContainer");
   jsonTable.removeEventListener("change", handleCheckboxChange);
   jsonTable.addEventListener("change", handleCheckboxChange);
-  });
 });

static/js/bitcoin-business-growth-table.js

@@ -1,9 +1,12 @@
 async function fetchDataForTable() {
   try {
-    selectedPeriod = getPeriodFromDropdown();
+    const dropdown = document.querySelector(".dropdownFilter");
-    const apiEndpoint = `${apiURL}/bitcoin_business_growth_by_country?latest_date=true`;
+    let selectedIndex = dropdown.selectedIndex;
+    let selectedValue = dropdown.options[selectedIndex].value;
+    const apiEndpoint =
+      "https://api.baseddata.io/bitcoin_business_growth_by_country?latest_date=true";
     const response = await fetch(
-      apiEndpoint + `&cumulative_period_type=${selectedPeriod}`,
+      apiEndpoint + `&cumulative_period_type=${selectedValue}`,
     );
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
@@ -86,10 +89,10 @@ function createTable(data) {
   );
 }
 
-document.addEventListener("DOMContentLoaded", function () {
+window.onload = () => {
-  const dropdown = document.getElementById("select-period-dropdown");
+  const dropdown = document.querySelector(".dropdownFilter");
   fetchDataForTable();
   dropdown.addEventListener("change", () => {
     fetchDataForTable();
   });
-});
+};

static/js/bitcoin-price.js

@@ -1,18 +1,9 @@
 let dataArr = [];
 const myChart = echarts.init(document.getElementById("chart"));
-const filename = "final__price.json";
 
-const periods = [
+async function fetchDataForChart() {
-  "all time",
-  "last 7 days",
-  "last 28 days",
-  "last 365 days",
-  "last 2 years",
-];
-
-async function fetchDataForChart(selectedValue) {
   try {
-    const apiEndpoint = `${apiURL}/get_json/${filename}?period=${selectedValue}`;
+    const apiEndpoint = "https://api.baseddata.io/get_json/final__price.json";
     const response = await fetch(apiEndpoint);
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
@@ -36,7 +27,7 @@ function initEchart(dataArr) {
       axisLine: axisLine,
     },
     grid: grid,
-    dataZoom: dataZoom(0),
+    dataZoom: dataZoom(),
     yAxis: [
       {
         type: "value",
@@ -71,14 +62,4 @@ function initEchart(dataArr) {
   myChart.setOption(option);
 }
 
-document.addEventListener("DOMContentLoaded", function () {
+fetchDataForChart();
-  let periodIndex = 2;
-  periodDropdown(periods, periodIndex);
-  fetchDataForChart(periods[periodIndex]);
-  const selectElement = document.getElementById("select-period-dropdown");
-
-  selectElement.addEventListener("change", function (event) {
-    const selectedValue = event.target.value;
-    fetchDataForChart(selectedValue);
-  });
-});

static/js/chart-params.js

@@ -106,35 +106,6 @@ function nFormatter(value, digits) {
     : "0";
 }
 
-function periodDropdown(periods, defaultIndex = 0) {
-  const modifiers = document.getElementById("chart-modifiers");
-  const dropdownContainer = document.createElement("div");
-  const dropdown = document.createElement("select");
-  const textNode = document.createTextNode("Select period: ");
-
-  dropdownContainer.id = "dropdown-container";
-  dropdown.id = "select-period-dropdown";
-  dropdownContainer.appendChild(textNode);
-  dropdownContainer.appendChild(dropdown);
-  modifiers.appendChild(dropdownContainer);
-
-  periods.forEach((period, index) => {
-    const option = document.createElement("option");
-    if (index === defaultIndex) {
-      option.selected = true;
-    }
-    option.value = period;
-    option.textContent = period;
-    dropdown.appendChild(option);
-  });
-}
-
-function getPeriodFromDropdown() {
-  let dropdown = document.getElementById("select-period-dropdown");
-  let selectedIndex = dropdown.selectedIndex;
-  return dropdown.options[selectedIndex].value;
-}
-
 window.addEventListener("resize", function () {
   if (myChart != null && myChart != undefined) {
     myChart.resize();

static/js/feerate-percentile.js

@@ -1,18 +1,10 @@
 let dataArr = [];
 const myChart = echarts.init(document.getElementById("chart"));
-const filename = "final__feerate_percentiles.json";
 
-const periods = [
+async function fetchDataForChart() {
-  "all time",
-  "last 7 days",
-  "last 28 days",
-  "last 365 days",
-  "last 2 years",
-];
-
-async function fetchDataForChart(selectedValue) {
   try {
-    const apiEndpoint = `${apiURL}/get_json/${filename}?period=${selectedValue}`;
+    const apiEndpoint =
+      "https://api.baseddata.io/get_json/final__feerate_percentiles.json";
     const response = await fetch(apiEndpoint);
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
@@ -47,7 +39,7 @@ function initEchart(dataArr) {
       axisLine: axisLine,
     },
     grid: grid,
-    dataZoom: dataZoom(0),
+    dataZoom: dataZoom((start = 98)),
     series: [
       {
         type: "line",
@@ -113,15 +105,4 @@ function initEchart(dataArr) {
 
   myChart.setOption(option);
 }
-
+fetchDataForChart();
-document.addEventListener("DOMContentLoaded", function () {
-  let periodIndex = 2;
-  periodDropdown(periods, periodIndex);
-  fetchDataForChart(periods[periodIndex]);
-  const selectElement = document.getElementById("select-period-dropdown");
-
-  selectElement.addEventListener("change", function (event) {
-    const selectedValue = event.target.value;
-    fetchDataForChart(selectedValue);
-  });
-});

static/js/hashrate.js

@@ -1,17 +1,10 @@
 let dataArr = [];
 const myChart = echarts.init(document.getElementById("chart"));
-const filename = "final__hashrate.json";
-const periods = [
-  "all time",
-  "last 7 days",
-  "last 28 days",
-  "last 365 days",
-  "last 2 years",
-];
 
-async function fetchDataForChart(selectedValue) {
+async function fetchDataForChart() {
   try {
-    const apiEndpoint = `${apiURL}/get_json/${filename}?period=${selectedValue}`;
+    const apiEndpoint =
+      "https://api.baseddata.io/get_json/final__hashrate.json";
     const response = await fetch(apiEndpoint);
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
@@ -40,7 +33,7 @@ function initEchart(dataArr) {
       axisLine: axisLine,
     },
     grid: grid,
-    dataZoom: dataZoom(0),
+    dataZoom: dataZoom(),
     yAxis: [
       {
         type: "value",
@@ -113,15 +106,4 @@ function initEchart(dataArr) {
 
   myChart.setOption(option);
 }
-
+fetchDataForChart();
-document.addEventListener("DOMContentLoaded", function () {
-  let periodIndex = 2;
-  periodDropdown(periods, periodIndex);
-  fetchDataForChart(periods[periodIndex]);
-  const selectElement = document.getElementById("select-period-dropdown");
-
-  selectElement.addEventListener("change", function (event) {
-    const selectedValue = event.target.value;
-    fetchDataForChart(selectedValue);
-  });
-});

static/js/miner-rewards.js

@@ -1,17 +1,10 @@
 let dataArr = [];
 const myChart = echarts.init(document.getElementById("chart"));
-const filename = "final__miner_rewards.json";
-const periods = [
-  "all time",
-  "last 7 days",
-  "last 28 days",
-  "last 365 days",
-  "last 2 years",
-];
 
-async function fetchDataForChart(selectedValue) {
+async function fetchDataForChart() {
   try {
-    const apiEndpoint = `${apiURL}/get_json/${filename}?period=${selectedValue}`;
+    const apiEndpoint =
+      "https://api.baseddata.io/get_json/final__miner_rewards.json";
     const response = await fetch(apiEndpoint);
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
@@ -24,37 +17,9 @@ async function fetchDataForChart(selectedValue) {
 }
 
 function initEchart(dataArr) {
-  console.log(dataArr);
   const option = {
     backgroundColor: backgroundColor,
-    tooltip: {
+    tooltip: tooltip,
-      ...tooltip,
-      formatter: function (params) {
-        let colors = ["#ee6666", "#000000", "#b0da9d", "#8699d5"];
-        let colorSpan = (color) =>
-          '<span style="display:inline-block;margin-right:1px;border-radius:5px;width:9px;height:9px;background-color:' +
-          color +
-          '"></span>';
-        let tooltip = "<p>" + params[0].axisValue + "</p>";
-        params.reverse().forEach((item, index) => {
-          let color = colors[index % colors.length];
-          let labels =
-            "<p>" +
-            colorSpan(color) +
-            " " +
-            item.seriesName +
-            ": " +
-            nFormatter(item.data, 3);
-          ("</p>");
-          tooltip += labels;
-        });
-
-        return tooltip;
-      },
-      valueFormatter(value, index) {
-        return nFormatter(value, 3);
-      },
-    },
     toolbox: toolboxParams,
     xAxis: {
       data: dataArr.map((row) => row.date),
@@ -63,13 +28,13 @@ function initEchart(dataArr) {
       axisLine: axisLine,
     },
     grid: grid,
-    dataZoom: dataZoom(0),
+    dataZoom: dataZoom(97),
     yAxis: [
       {
         type: "value",
         name: "Rewards (USD)",
         nameLocation: "middle",
-        nameGap: 30,
+        nameGap: 35,
         nameTextStyle: textStyleMain,
         position: "left",
         alignTicks: true,
@@ -87,7 +52,7 @@ function initEchart(dataArr) {
       },
       {
         type: "value",
-        name: "Subsidy (BTC)",
+        name: "Block Subsidy (BTC)",
         nameLocation: "middle",
         nameGap: 20,
         nameTextStyle: {
@@ -110,7 +75,8 @@ function initEchart(dataArr) {
     series: [
       {
         type: "line",
-        name: "Subsidy (USD)",
+        name: "Daily Subsidy (USD)",
+        smooth: true,
         stack: "Total",
         areaStyle: {},
         symbol: "none",
@@ -121,7 +87,8 @@ function initEchart(dataArr) {
       },
       {
         type: "line",
-        name: "Fees (USD)",
+        name: "Daily Fees (USD)",
+        smooth: true,
         stack: "Total",
         areaStyle: {},
         symbol: "none",
@@ -132,7 +99,8 @@ function initEchart(dataArr) {
       },
       {
         type: "line",
-        name: "Total (USD)",
+        name: "Daily Total Reward (USD)",
+        smooth: true,
         symbol: "none",
         lineStyle: {
           width: 1,
@@ -156,14 +124,4 @@ function initEchart(dataArr) {
   myChart.setOption(option);
 }
 
-document.addEventListener("DOMContentLoaded", function () {
+fetchDataForChart();
-  let periodIndex = 2;
-  periodDropdown(periods, periodIndex);
-  fetchDataForChart(periods[periodIndex]);
-  const selectElement = document.getElementById("select-period-dropdown");
-
-  selectElement.addEventListener("change", function (event) {
-    const selectedValue = event.target.value;
-    fetchDataForChart(selectedValue);
-  });
-});