import{font} from '@mbrickmaps/fonts'
font
import {Mapa, myfeatures} from '@mbrickmaps/make-a-map'
import {Search, Table} from "@observablehq/inputs"
//counties to higlight
family1 = [15933, 15899, 16481, 15899, 9983, 4303, 3665, 1441, 6042, 12154, 5774, 15403, 6821, 8345]
family2 = [6449, 6451, 5325, 5117, 5791, 5774]
routes = [family1,family2]
new Mapa(900, 650, 'geoStereographic',{
extent: 'custom',
margin: 80,
include: ['Missouri','Louisiana','Virginia']
}, 95, {'geo':test_features,'iso':'ADM0_A3','name':'NAME'}, null,{
show:true, // this section is for highlighting state(s), or country(ries), disputed regions, marine regions, or land mass regions, also adding a custom graticule or lines at specific x, y. set to true to toggle
addCustom:{ show:false,
geom:null,
style:{
fill:'red',
stroke:'blue',
'stroke-width':0.5
},
type:'polyline'
},
//draw paths between these ids, label, color are optional
//only for US Historic Counties dataset
genRoutes:{
show:true,
extent:['Missouri', 'Louisiana','Virginia'],
labels:['Family1','Family2'],
ids: routes,
//overrides color
// colors of routes
colors: ['blue', 'red'],
//colors: null
//default style
style:{
fill: 'none',
stroke: 'red'
},
label: true
},
//highlighting counties
histRegionName:{
name: counties,
style:{
fill: 'pink',
stroke: 'red'
},
label: true
},
adminRegionName:{
name: states,
style:{
fill: 'none',
stroke: swatch[1]
},
label: false
},
adminRegionCountry:{
name: [null],
style:{
fill: 'none',
stroke: 'white',
'stroke-width': 0.5,
opacity: 1
},
label: false
},
marineRegionName:{
name: [null],
style:
{
fill: 'none',
stroke: ' blue',
'stroke-width': 1,
opacity: 0.2
},
label: true
},
landRegionName:{
name: ['Appalachian Mountains'],
style: {
fill:'tan',
opacity:0.15
},
label: true
},
addDisputed:{
show: false,
style:
{
'stroke-width': 1,
stroke: 'SteelBlue',
'stroke-dash-array': '4 4'
}
},
graticule:{
// add 'straight lines at specifc intervals as listed in the array for horizontal or vertical and a specific style'
show:false,h:[38,36],v:[],east:0,west:-361,style:{stroke:'red' ,'stroke-width':1, 'stroke-dasharray':'none'}
},
},
{
land: swatch[2],
water: swatch[4],
border: swatch[0],
highlight: '#8CB574',
country:
{
USA: swatch[3]
}
},
{
show: true,
topValue: 200,
topUnit: 'mi',
bottomValue: 200,
bottomUnit: 'km',
offset: [830, 50]
},
{
extent: ['USA'],
render: ['USA'],
clip: true,
clipBuffer: 0
},
{
show: true,
data: places
},
{
method: 'polylabel',
show: true,
country: []
}).style
d3.select('input').attr('autocomplete','off')
counties = [].concat(family1).concat(family2)
places = [
{name: "1979", lat: "-89.56", lng: "37.225", type: 'city1', dir: "E", color:"crimson", size:3}
]
//nation outline, state outline, nation land fill, state land fill, water fill
swatch = ['#777', '#ccc', 'white', 'white', '#ccc']
//swatch = ['#774f38', '#e08e79', '#f1d4af', '#ece5ce', '#c5e0dc']
test = FileAttachment("ne10m.json").json()
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.