{
let div = html`<div id="map_div"><iframe id="map1" width="100%" height="650" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://gjrichter.github.io/ixmaps/ui/dispatch.htm?name=map1&ui=embed&basemap=ll&legend=1&scrollsafe=1&footer=1&sync=false"></iframe></div><button onclick="ixmaps.map('map1').changeThemeStyle(null,'type:SUBTRACTIVE','toggle')">SUBTRACTIVE on|off</button><br><br>`;
yield div
}
america = d3.csv("https://s3.eu-west-1.amazonaws.com/data.ixmaps.com/Atlas%20of%20Rural%20and%20Small%20Town%20America/chr_measures_CSV_2018-csv.csv.gz")
Inputs.Table(america)
health_risk = () => {
return {
"layer": "COUNTIES|COUNTIES-s",
"field": "measure_9_value|measure_11_value|measure_49_value",
"field100": "",
"style": {
"type": "CHOROPLETH|COMPOSECOLOR|SUBTRACTIVE|HARMONIZE|SIMPLELEGEND",
"colorscheme": [
"RGB(0,255,255)",
"RGB(255,0,255)",
"RGB(255,255,0)"],
"opacity":"auto",
"dbtable": "themeDataObj_chr",
"dbtableUrl":"https://s3.eu-west-1.amazonaws.com/data.ixmaps.com/Atlas%20of%20Rural%20and%20Small%20Town%20America/chr_measures_CSV_2018-csv.csv.gz",
"dbtableType":"csv",
"datacache": "true",
"lookupfield": "FIPSTXT",
"label": [
"smoke",
"eat",
"drink"],
"scale": "1",
"valuescale": "1",
"title": "Health Risk 2018",
"snippet": "from"
}
}
}
{
ixmaps.waitForMap('map1',map => map
// set the base map
// -----------------
.setView([38.324420427006544,-97.25097656250001],5)
.setMapTypeId("CartoDB - Positron")
// load geometries for the choroplethe theme
// -----------------------------------------
.loadMap("https://s3.eu-central-1.amazonaws.com/maps.ixmaps.com/Atlas%20of%20Rural%20and%20Small%20Town%20America/Atlas_of_Rural_and_Small_Town_America.svgz")
// make the choropleth theme
// ---------------------------
.newTheme("title",health_risk())
);
return ixmaps;
}
ixmaps = require('https://gjrichter.github.io/ixmaps/ui/js/htmlgui_api.js')
Inputs = require("@observablehq/inputs@0.7.21/dist/inputs.umd.min.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
