Genealogy migration map
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()
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.
