Skip to content

Instantly share code, notes, and snippets.

@helgasoft
Last active May 26, 2022 15:19
Show Gist options
  • Select an option

  • Save helgasoft/a2d7b963e95b3c7ca5362cebe5d301b0 to your computer and use it in GitHub Desktop.

Select an option

Save helgasoft/a2d7b963e95b3c7ca5362cebe5d301b0 to your computer and use it in GitHub Desktop.
R | ECharts | map chart with tooltip percent formatter; map projection
cns <- countrycode::codelist$country.name.en
cns <- data.frame(
name = cns,
value = round(runif(length(cns), 1, 100), 2)
)
library(echarty)
p <- ec.init(load= 'world')
p$x$opts <- list(
series= list(list(
type= 'map', map= 'world', roam= TRUE,
data= ec.data(cns, 'names')
)),
visualMap= list(type= 'continuous', calculable= TRUE, max= max(cns$value)),
tooltip= list(formatter= '{b} {c}%')
)
p
@helgasoft

Copy link
Copy Markdown
Author

echarty map chart with data from @tyluRp.

@helgasoft

helgasoft commented May 25, 2022

Copy link
Copy Markdown
Author

map projection, inquiry by @XiangyunHuang
JS code partially (>90%) translated with demo(js2r) from ECharts source

state.data <- list(
	list(name='Alabama', value=4822023),
	list(name='Alaska', value=731449),
	list(name='Arizona', value=6553255),
	list(name='Arkansas', value=2949131),
	list(name='California', value=38041430),
	list(name='Colorado', value=5187582),
	list(name='Connecticut', value=3590347),
	list(name='Delaware', value=917092),
	list(name='District of Columbia', value=632323),
	list(name='Florida', value=19317568),
	list(name='Georgia', value=9919945),
	list(name='Hawaii', value=1392313),
	list(name='Idaho', value=1595728),
	list(name='Illinois', value=12875255),
	list(name='Indiana', value=6537334),
	list(name='Iowa', value=3074186),
	list(name='Kansas', value=2885905),
	list(name='Kentucky', value=4380415),
	list(name='Louisiana', value=4601893),
	list(name='Maine', value=1329192),
	list(name='Maryland', value=5884563),
	list(name='Massachusetts', value=6646144),
	list(name='Michigan', value=9883360),
	list(name='Minnesota', value=5379139),
	list(name='Mississippi', value=2984926),
	list(name='Missouri', value=6021988),
	list(name='Montana', value=1005141),
	list(name='Nebraska', value=1855525),
	list(name='Nevada', value=2758931),
	list(name='New Hampshire', value=1320718),
	list(name='New Jersey', value=8864590),
	list(name='New Mexico', value=2085538),
	list(name='New York', value=19570261),
	list(name='North Carolina', value=9752073),
	list(name='North Dakota', value=699628),
	list(name='Ohio', value=11544225),
	list(name='Oklahoma', value=3814820),
	list(name='Oregon', value=3899353),
	list(name='Pennsylvania', value=12763536),
	list(name='Rhode Island', value=1050292),
	list(name='South Carolina', value=4723723),
	list(name='South Dakota', value=833354),
	list(name='Tennessee', value=6456243),
	list(name='Texas', value=26059203),
	list(name='Utah', value=2855287),
	list(name='Vermont', value=626011),
	list(name='Virginia', value=8185867),
	list(name='Washington', value=6897012),
	list(name='West Virginia', value=1855413),
	list(name='Wisconsin', value=5726398),
	list(name='Wyoming', value=576412),
	list(name='Puerto Rico', value=3667084))

mapurl <- "https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/USA.json"
usaJson <- jsonlite::read_json(mapurl)

library(echarty)
p <- ec.init(js= 'projection = d3.geoAlbersUsa();') |>
	ec.plugjs('https://fastly.jsdelivr.net/npm/d3-array') |> 
	ec.plugjs('https://fastly.jsdelivr.net/npm/d3-geo')
p$x$registerMap <- list(list(mapName='USA', geoJSON= usaJson))
p$x$opts <- list(
	title= list(text= 'USA Population Estimates (2012)', 
		subtext= 'Data from www.census.gov', 
		sublink= 'http://www.census.gov/popest/data/datasets.html', left='right'),
	tooltip= list(trigger='item', showDelay=0, transitionDuration=0.2),
	visualMap= list(left= 'right', 
		min= 500000, max= 38000000, 
		inRange= list(color= list('#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026')), 
		text= list('High', 'Low'), calculable= TRUE),
	toolbox= list(show=TRUE, left='left', top='top',
		feature= list(dataView= list(readOnly=FALSE), restore= list(show=TRUE), saveAsImage= list(show=TRUE))),
	series= list(list(
		name= 'USA PopEstimates', type= 'map', map= 'USA', roam= TRUE,
		projection= list(
			project=   htmlwidgets::JS('function(point) {return projection(point);}'),
			unproject= htmlwidgets::JS('function(point) {return projection.invert(point);}')
		),
		#emphasis= list(label= list(show= TRUE)),
		data= state.data
		))
)
p

image

If you like this solution, please consider granting a Github star ⭐ to echarty.

@XiangyunHuang

Copy link
Copy Markdown

Yeah, I like it! Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment