For the country data example, every instance of a country name is prepended with a small icon (for development purposes this is currently an obnoxious red X, but I plan to replace this with a neutral-coloured globe or something), and the name itself is wrapped in some custom style (currently boldface, but could be anything). Clicking on the icon places a container with the relevant data on the page, offset to the same location as the icon, (giving the illusion of the icon “expanding” to show the data). Clicking on the icon again, or away from the container, removes it.
In terms of extensibility, all the data is in a local JSON file, and the format of the data container is an HTML template that might eventually live in the same file. I’m also planning on having local image assets (maps and flags). This could all be swapped out for anything, or even obtained from a web service.
For the country data example, every instance of a country name is prepended with a small icon (for development purposes this is currently an obnoxious red X, but I plan to replace this with a neutral-coloured globe or something), and the name itself is wrapped in some custom style (currently boldface, but could be anything). Clicking on the icon places a container with the relevant data on the page, offset to the same location as the icon, (giving the illusion of the icon “expanding” to show the data). Clicking on the icon again, or away from the container, removes it.
In terms of extensibility, all the data is in a local JSON file, and the format of the data container is an HTML template that might eventually live in the same file. I’m also planning on having local image assets (maps and flags). This could all be swapped out for anything, or even obtained from a web service.
Yeah that seems like it would work pretty well for the case of country data. Let us know how development goes!