This is the repo for a blog post which is part of the Communicating the findings of long-term care research series for the Data Science Interest Group of the Global Observatory of Long Term Care. The actual blog post can be viewed here.
This blog post is created using public data and can reproduced. You will need Quarto, R and the renv package. This will ensure you have the required version of the R packages contained in the renv.lock file.
To reproduce the blog post from the original data, git clone this repo and run the R file ./1__create_html_from_qmd.R. This will:
- Ensure that you have
renvand the required version of the R packages installed. - Recreate the US election map and cartogram at the start of the blog post. These are the only maps which are not created within the html file, as generating a population-weighted Dorling cartogram of all US counties takes about 15 minutes.
- Generate the html file from
GoLTC-maps-cartograms-blog-post.qmd, using the versions of the R packages set out inrenv.lock. Therenv.lockcontains the R dependencies and versions. The Quarto version is1.4.268.
The output will be:
GoLTC--maps-cartograms-blog-post.html. This is the actual html file../GoLTC-maps-cartograms-blog-post_files/. The folder with the javascript dependencies.
The html file generated by Quarto hardcodes the data in it, meaning it is quite large (10.7mb). To mitigate this, I have also included a Python script, 3__remove_hardcoded_data.py, which generates an alternative, much smaller html file GoLTC--maps-cartograms-blog-post_min.html. This moves the hard-coded json data out of the html file and into a subdirectory and dynamically loads it. To create this file, simply run 3__remove_hardcoded_data.py (this requires Python bs4).
The additional output will be:
GoLTC--maps-cartograms-blog-post_min.html. A much smaller html file (166kb rather than 10mb)../GoLTC-maps-cartograms-blog-post_files/libs/. Additional JS scripts which were hardcoded into the html../GoLTC-maps-cartograms-blog-post_files/data/. A new folder with the json data which was previously hardcoded.
This will not change the original GoLTC--maps-cartograms-blog-post.html.
For information, the steps that this script automates are:
- Remove all the
<script src = "*.js">tags from the<head>of the html, storing the URLs to be loaded after the data in step 4 (to avoid the issue on load where there is no data to parse). - Find the JS in
<script>tags hardcoded into the body of the html and move the code to separate *.js files to be loaded in step 4 (to prevent errors caused by loading them before the scripts which had been loaded in the<head>). - Remove the hardcoded map (and any other
htmlwidgets) json data from within the<script type="application/json">tags and save to separate json files in a./GoLTC-maps-cartograms-blog-post_files/data/folder. - Insert a JS script into the
<head>which uses Promises with chained.then()statements to do the following (in this order):- Inject the relevant data from each json file back into the html.
- Dynamically load the scripts that were in the
<head>. - Dynamically load the scripts that were in the
<body>. - Render all elements with
HTMLWidgets.staticRender()andmermaid.init().
To view the file as it appears on the web, move the html file and the ./GoLTC-maps-cartograms-blog-post_files/ and ./img/ subfolders to a public or local web server (e.g. Node live server or Python SimpleHttpServer). Your web server should have the following file structure:
- root
GoLTC--maps-cartograms-blog-post.html
GoLTC-maps-cartograms-blog-post_files/
libs/
Leaflet.Sync-0.0.5/
Proj4Leaflet-1.0.1/
bootstrap/
clipboard/
crosstalk-1.2.0/
d3-3.5.5/
d3-hexjson-3.5.5/
datatables-binding-0.27/
datatables-css-0.0.0/
dt-core-1.12.1/
echarts-gl-1.1.2/
echarts4r-4.8.0/
echarts4r-binding-0.4.4/
hexjsonwidget-binding-0.0.1/
highchart-binding-0.9.4/
highcharts-9.3.1/
htmlwidgets-1.6.2/
jquery-3.6.0/
leaflet-1.3.1/
leaflet-binding-2.1.1/
leaflet-providers-1.9.0/
leaflet-providers-plugin-2.1.1/
leafletfix-1.0.0/
proj4-2.6.2/
proj4js-2.3.15/
quarto-diagram/
quarto-html/
rstudio_leaflet-1.3.1
img/
hexmap_simple.png
If you do the additional step of creating a minimal html file, use GoLTC--maps-cartograms-blog-post_min.html. There will also be some additional JS scripts in libs/. The data for the maps and plots is stored in libs/data.
- root
GoLTC--maps-cartograms-blog-post_min.html
GoLTC-maps-cartograms-blog-post_files/
libs/
Leaflet.Sync-0.0.5
Proj4Leaflet-1.0.1
body_script_0.js
body_script_22.js
body_script_7.js
body_script_8.js
bootstrap
clipboard
crosstalk-1.2.0
d3-3.5.5
d3-hexjson-3.5.5
datatables-binding-0.27
datatables-css-0.0.0
dt-core-1.12.1
echarts-gl-1.1.2
echarts4r-4.8.0
echarts4r-binding-0.4.4
hexjsonwidget-binding-0.0.1
highchart-binding-0.9.4
highcharts-9.3.1
htmlwidgets-1.6.2
jquery-3.6.0
leaflet-1.3.1
leaflet-binding-2.1.1
leaflet-providers-1.9.0
leaflet-providers-plugin-2.1.1
leafletfix-1.0.0
proj4-2.6.2
proj4js-2.3.15
quarto-diagram
quarto-html
quarto-html-after-body.js
rstudio_leaflet-1.3.1
data/
cart_dorling.json
eng_hex.json
htmlwidget-1221.json
htmlwidget-1362.json
htmlwidget-2d8285741add3f8eefcb.json
htmlwidget-3015.json
htmlwidget-3246.json
htmlwidget-381d05ac1add2aa4e872.json
htmlwidget-3927.json
htmlwidget-4255.json
htmlwidget-5703bbc8ee2887e83d10.json
htmlwidget-7442.json
htmlwidget-76dc5aad5e2079b3771a.json
htmlwidget-9552.json
htmlwidget-9627.json
htmlwidget-cd8ebe18a04efbadcb87.json
leafletBlackCont.json
leafletBlackDorling.json
leafletBlackNcont.json
leafletStandardMap.json
us_polygons.json
img/
hexmap_simple.png