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