Okay, I can help you with that. We'll use R packages `sf` for reading the shapefile and `ggplot2` for plotting. Since we are in a browser-based environment, we will use WebR (R running in the browser via WebAssembly) to execute the R code. This setup will: 1. Initialize WebR. 2. Install the necessary R packages (`sf`, `ggplot2`) within the WebR environment. 3. Load a sample shapefile (North Carolina counties) included with the `sf` package. 4. Generate a plot of the shapefile using `ggplot2`. 5. Display the plot on the web page. { "name": "r-shapefile-plot", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "vite": "^5.2.0" } } R Shapefile Plot with WebR

Plotting a Shapefile with R (WebR)

Loading WebR, installing packages, reading a shapefile, and plotting...

Initializing...

Plot will appear here.

import { WebR } from 'https://webr.r-wasm.org/latest/webr.mjs'; const webR = new WebR(); globalThis.webR = webR; // Make it globally available for convenience const statusDiv = document.getElementById('status'); const plotOutputDiv = document.getElementById('plot-output'); function logStatus(message) { console.log(message); statusDiv.innerHTML += `
${message}`; // Append status messages } async function main() { plotOutputDiv.innerHTML = '

Initializing WebR...

'; statusDiv.textContent = 'Initializing WebR...'; try { await webR.init(); logStatus('WebR Initialized.'); plotOutputDiv.innerHTML = '

WebR Initialized. Preparing plot environment...

'; // Set up message handler for plots and messages await webR.messaging.setMessageHandler('canvas', async (msg) => { if (msg.type === 'plot') { logStatus('Plot received from R.'); plotOutputDiv.innerHTML = ''; // Clear previous content msg.data.values.forEach(svg => { const img = document.createElement('img'); img.src = `data:image/svg+xml;base64,${btoa(svg)}`; plotOutputDiv.appendChild(img); }); } else { console.log('Unknown message type from canvas:', msg); } webR.messaging.ack(msg.uuid); // Acknowledge message }); // Capture R console output (stdout and stderr) webR.FS.readFile('/dev/stdout', { encoding: 'utf8' }).then(console.log); webR.FS.readFile('/dev/stderr', { encoding: 'utf8' }).then(console.error); // Configure R to use the WebR plotting device logStatus('Configuring R plotting device...'); await webR.evalRVoid('options(device = webr::canvas)'); logStatus('Plotting device configured.'); // Fetch and execute the R script logStatus('Fetching R script...'); const rCode = await fetch('script.R').then(res => { if (!res.ok) { throw new Error(`Failed to fetch script.R: ${res.statusText}`); } return res.text(); }); logStatus('R script fetched. Executing...'); plotOutputDiv.innerHTML = '

Executing R script... (Package installation might take a moment)

'; // Execute the script using evalRVoid which doesn't return R object await webR.evalRVoid(rCode); logStatus('R script execution finished.'); // Check if plot div has been updated, otherwise show message if (plotOutputDiv.innerHTML.includes('Executing R script')) { plotOutputDiv.innerHTML = '

R script finished. If no plot appeared, check the browser console for R messages or errors.

'; } } catch (error) { console.error('Error during WebR execution:', error); logStatus(`Error: ${error.message}`); plotOutputDiv.innerHTML = `

An error occurred: ${error.message}. Check the browser console for details.

`; } } main(); # Function to print messages to the R console (which gets captured) log_message <- function(msg) { message(paste(Sys.time(), "-", msg)) } log_message("R script started.") # Install packages if not already available # Using a specific repo for WebAssembly binaries webr_repo <- "https://repo.r-wasm.org/" packages_to_install <- c("sf", "ggplot2") installed_pkgs <- rownames(installed.packages()) needs_install <- packages_to_install[!packages_to_install %in% installed_pkgs] if (length(needs_install) > 0) { log_message(paste("Installing packages:", paste(needs_install, collapse=", "))) tryCatch({ webr::install(needs_install, repos = webr_repo) log_message("Packages installed successfully.") }, error = function(e) { log_message(paste("Error installing packages:", e$message)) stop("Required packages could not be installed.") # Stop if essential packages fail }) } else { log_message("Required packages already installed.") } # Load libraries log_message("Loading libraries sf and ggplot2...") library(sf) library(ggplot2) log_message("Libraries loaded.") # Load the North Carolina shapefile included with the sf package nc_shapefile_path <- system.file("shape/nc.shp", package="sf") log_message(paste("Attempting to read shapefile:", nc_shapefile_path)) nc_shapefile <- NULL tryCatch({ nc_shapefile <- st_read(nc_shapefile_path, quiet = TRUE) log_message("Shapefile read successfully.") log_message(paste("Shapefile details:", capture.output(print(nc_shapefile))[1])) # Print first line of summary }, error = function(e) { log_message(paste("Error reading shapefile:", e$message)) stop("Could not read shapefile.") }) # Check if shapefile loaded and plot if (!is.null(nc_shapefile)) { log_message("Generating plot...") # Create the plot p <- ggplot() + geom_sf(data = nc_shapefile, aes(fill = AREA)) + # Fill by county area scale_fill_viridis_c() + # Use a nice color scale ggtitle("North Carolina Counties by Area") + theme_minimal() + theme(plot.title = element_text(hjust = 0.5)) # Center title # Print the plot to trigger the WebR canvas output print(p) log_message("Plot generated and sent to output.") } else { log_message("Skipping plot generation as shapefile failed to load.") } log_message("R script finished.") After running `npm install` and `npx vite`, a development server will start. Open the provided URL in your browser. The page will initialize R, install packages (this might take a minute or two the first time), load the sample North Carolina shapefile, and display a plot of the counties colored by area. Status messages will appear on the page and in the browser's developer console.