Switching from Mercator Projection to Longlat projection for Maps in HTML -


i trying construct world map using html, want change projection style "mercator" "longlat" or "robinson." (since mercator distorts areas) know how can html? code below have far , works works mercator projection. appreciated!

<!doctype html> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width">   <title>world map ... project</title>   <style> #container1 { border:1px dotted blue; width: 700px; height: 475px; position: relative; }   </style> </head> <body>   <h1>world map</h1>   <div id="container1"></div>    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>    <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.js"></script>  <script> // example data server var series = [     ["blr",75],["blz",43],["rus",50],["rwa",88],["srb",21],["tls",43],     ["reu",21],["tkm",19],["tjk",60],["rou",4],["tkl",44],["gnb",38],     ["gum",67],["gtm",2],["sgs",95],["grc",60],["gnq",57],["glp",53],     ["jpn",59],["guy",24],["ggy",4],["guf",21],["geo",42],["grd",65],     ["gbr",14],["gab",47],["slv",15],["gin",19],["gmb",63],["grl",56],     ["eri",57],["mne",93],["mda",39],["mdg",71],["maf",16],["mar",8],     ["mco",25],["uzb",81],["mmr",21],["mli",95],["mac",33],["mng",93],     ["mhl",15],["mkd",52],["mus",19],["mlt",69],["mwi",37],["mdv",44],     ["mtq",13],["mnp",21],["msr",89],["mrt",20],["imn",72],["uga",59],     ["tza",62],["mys",75],["mex",80],["isr",77],["fra",54],["iot",56],     ["shn",91],["fin",51],["fji",22],["flk",4],["fsm",69],["fro",70],     ["nic",66],["nld",53],["nor",7],["nam",63],["vut",15],["ncl",66],     ["ner",34],["nfk",33],["nga",45],["nzl",96],["npl",21],["nru",13],     ["niu",6],["cok",19],["xkx",32],["civ",27],["che",65],["col",64],     ["chn",16],["cmr",70],["chl",15],["cck",85],["can",76],["cog",20],     ["caf",93],["cod",36],["cze",77],["cyp",65],["cxr",14],["cri",31],     ["cuw",67],["cpv",63],["cub",40],["swz",58],["syr",96],["sxm",31],["tur",131]];   // datamaps expect data in format: // { "usa": { "fillcolor": "#42a844", numberofwhatever: 75}, //   "fra": { "fillcolor": "#8dc386", numberofwhatever: 43 } } var dataset = {};  // need colorize every country based on "numberofwhatever" // colors should uniq every value. // purpose create palette(using min/max series-value) var onlyvalues = series.map(function(obj){ return obj[1]; }); var minvalue = math.min.apply(null, onlyvalues),         maxvalue = math.max.apply(null, onlyvalues);  // create color palette function // color can whatever wish var palettescale = d3.scale.linear()         .domain([minvalue,maxvalue])         .range(["#efefff","#02386f"]); // blue color  // fill dataset in appropriate format series.foreach(function(item){ //     // item example value ["usa", 70]     var iso = item[0],             value = item[1];     dataset[iso] = { numberofthings: value, fillcolor: palettescale(value) }; });  // render map new datamap({     element: document.getelementbyid('container1'),     projection: 'mercator', // big world map     // countries don't listed in dataset painted color     fills: { defaultfill: '#f5f5f5' },     data: dataset,     geographyconfig: {         bordercolor: '#dedede',         highlightborderwidth: 5,         // don't change color on mouse hover         highlightfillcolor: function(geo) {             return geo['fillcolor'] || '#f5f5f5';         },         // change border         highlightbordercolor: '#b7b7b7',         // show desired information in tooltip         popuptemplate: function(geo, data) {             // don't show tooltip if country don't present in dataset             if (!data) { return ; }             // tooltip content             return ['<div class="hoverinfo">',                 'country: <strong>', geo.properties.name, '</strong>',                 '<br>number of events: <strong>', data.numberofthings, '</strong>',                 '</div>'].join('');         }     } }); </script>  </body> </html>


Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more