🙍🏾 🔨 🏂🏽 इंटरएक्टिव एसवीजी मानचित्र d3.js का उपयोग कर ✋🏻 👭 ⛸️

अभिवादन, हब्रोज़िटेल! आज मैं आपको बताऊंगा कि सामान्य रूप से इस जावास्क्रिप्ट लाइब्रेरी की संभावनाओं के बारे में d3js.org का उपयोग करके एक इंटरैक्टिव एसवीजी मानचित्र कैसे बनाया जाए, और यह भी पता लगाना है कि वेब के लिए भू-सूचनाओं को कैसे संग्रहीत करना बेहतर है। फाइनल में, हमें निम्नलिखित मिलते हैं:

कार्टोग्राम

आप इस आकर्षक यात्रा को कट के नीचे से शुरू कर सकते हैं।

कार्टोग्राफिक मामले।

सिद्धांत रूप में, इस खंड को छोड़ दिया जा सकता है, अगर दिलचस्पी नहीं है, तो अनुभाग के बहुत अंत में वांछित फ़ाइल का लिंक। कौन परवाह करता है, हम आगे समझते हैं। एक नक्शा क्या है, वास्तव में, यह निर्देशांक के संदर्भ में एक निश्चित वस्तु की ज्यामिति के बारे में जानकारी है। जीआईएस सिस्टम आमतौर पर इन उद्देश्यों के लिए शेपफाइल्स का उपयोग करते हैं। हम रूस का एक नक्शा बनाएंगे, सबसे अधिक संभावना है कि खोज आपको जीआईएस-लैब पर मेरे जैसे ही स्थान पर ले जाएगी। मैंने अल्बर्स-साइबेरिया प्रक्षेपण को चुना। डाउनलोड करें। सबसे पहले, हमें अपनी आकृति को डब्ल्यूजीएस 84 मानक (उर्फ ईपीएसजी: 4326) में बदलने की आवश्यकता है। ऐसा करने के लिए, एक प्रक्षेपण फ़ाइल बनाएं, उदाहरण के लिए, निम्न सामग्री के साथ Albers_Siberia.prj :

 +proj=aea +lat_1=52 +lat_2=64 +lat_0=0 +lon_0=105 +x_0=18500000 +y_0=0 +ellps=krass +units=m +towgs84=28,-130,-95,0,0,0,0 +no_defs

फिर, GDAL या इसके OGR पुस्तकालयों में से एक का उपयोग करके, हम रूपांतरण करते हैं। इन जरूरतों के लिए, मैंने क्वांटम जीआईएस डाउनलोड किया, जिसमें पहले से ही आपकी जरूरत की हर चीज शामिल है और इससे भी ज्यादा। स्थापना के बाद, आपको कई शॉर्टकट दिखाई देंगे, उनमें से OSGeo4W , उस पर क्लिक करें, हमारी फाइलों के साथ डायरेक्टरी पर जाएं और निम्न फॉर्म की कमांड दर्ज करें:

  ogr2ogr -f 'ESRI Shapefile' -s_srs Albers_Siberia.prj -t_srs EPSG:4326 input-fixed.shp input.shp

इस प्रकार, हमें वह शेपफाइल मिला जिसकी हमें आवश्यकता थी, हालाँकि आवश्यकतानुसार, यह हमें वेब के लिए बिल्कुल भी सूट नहीं करता है, इसलिए अब हम अपने डेटा के आधार पर एक जेजेन्सन फ़ाइल उत्पन्न करेंगे। फिर जियोसन से हम TopoJSON उत्पन्न करते हैं , जो कि हमें अपने कार्टोग्राम के लिए आवश्यक है। ये चीजें हैं, लेकिन परेशान न हों, जियोसन भी एक उपयोगी चीज है, यह काम आ सकती है। इसलिए, हम कंसोल पर वापस जाते हैं और कुछ इस तरह लिखते हैं:

  ogr2ogr -f GeoJSON output.json input.shp

हमें हमारी जियोसन फ़ाइल मिलती है, इसे खोलें और जीआईएस-लैब से एक आश्चर्य देखें।

जीआईएस-लैब एन्क्रिप्शन

सामान्यतया, यह सुविधा मूल रूप से आकृति में मौजूद थी, लेकिन मैंने इस "सुखद" आश्चर्य को केवल इस स्तर पर देखा। विशेषता यह है कि सभी क्षेत्रों के नाम मातृभूमि के दुश्मनों से एन्क्रिप्ट किए गए हैं और पटाखे द्वारा प्रदर्शित किए गए हैं। लेकिन हमारे आदमी को पता है कि क्रिप्टोग्राफिक किताब की तलाश कहाँ है। लेकिन वहाँ यह था। एक भी सिरिलिक एन्कोडिंग नहीं आया (DOS-866 पर सार्थक नाम थे, लेकिन अक्षरों का हिस्सा अलग-अलग वर्गों में प्रदर्शित किया गया था), फिर मैं विचारशील हो गया और इंटरनेट पर सच्चाई की खोज करने के लिए चला गया, शायद मैंने बुरी तरह से खोज की, लेकिन जीआईएस-लैब मंचों पर, और अन्य जगहों पर। इस कार्ड पर krakozyabr के बारे में कुछ भी नहीं था (और 2010 से कार्ड, जैसा कि मैं इसे समझता हूं) यहां मैं पूरी तरह से हताश था, एडिटपैड को फिर से खोला (वहां, मेरी राय में, सबसे एन्कोडिंग प्रस्तुत किए गए हैं, और वास्तव में इसके साथ काम करने के लिए बहुत सुविधाजनक है) पाठ और नियमित) और एक पंक्ति में सभी एन्कोडिंग के माध्यम से सॉर्ट करना शुरू किया, और, लो और निहारना, जब आप अयस्क MIK एन्कोडिंग: (!?) बल्गेरियाई मैं लगभग क्या चाहता था, अर्थात् क्षेत्रों के नाम हो गया। सच है, नामों में सभी अक्षरों को डॉस प्रतीक by द्वारा अलग किया गया था, ठीक है, एक साधारण नियमित सीजन ने इस समस्या को काफी जल्दी हल किया। यद्यपि समस्या क्यों है, यह एक सिफर है, और हमने एक दोस्त-या-किसी का परीक्षण किया =)। वैसे, इस फ़ाइल में एक और विशेषता है कि जीआईएस-लैब पर सच्चाई का तुरंत उल्लेख किया गया है, अर्थात्: चेचन और इंगुश गणराज्यों के नक्शे पर कोई सीमा नहीं है, क्योंकि उनके (अच्छी तरह से) रोसरेस्टर डेटा की कमी के कारण, वे वहां व्यापार यात्रा पर नहीं जाना चाहते हैं, और यह ह) है। ठीक है, हाँ, सिद्धांत रूप में, यह डरावना नहीं है (हालांकि किससे), लेकिन एक अप्रिय अवक्षेप बना रहा।

अब हम TopoJSON की पीढ़ी पर चलते हैं, यह हमें फ़ाइल का आकार कम करने की अनुमति देगा। सामान्य तौर पर, TopoJSON टोपोलॉजी के संदर्भ में GeoJSON का एक अनुकूलन है; यह अनावश्यक जानकारी को हटाता है, उदाहरण के लिए, पड़ोसी क्षेत्रों से सामान्य सीमाओं के दोहराव को हटाता है। लेकिन हम ज्यामिति को सरल बनाकर फ़ाइल का आकार और भी कम कर सकते हैं। तो चलिए शुरू करते है! हम Node.js कमांड लाइन लॉन्च करते हैं (इसे TopoJSON को लागू करने की आवश्यकता है ) और निम्नलिखित लिखें:

  topojson -o output_topo.json -p -s 1e-7 -- name=input_geo.json

यहाँ, -p पैरामीटर feature properties को संरक्षित करने के लिए जिम्मेदार है, और -s 1e-7 ज्यामिति को सरल बनाने के लिए, 1e-7 स्टेरेडियन में दहलीज है , जितना छोटा सटीक ज्यामिति है: 1e-3 दुनिया के नक्शे के सापेक्ष स्विट्जरलैंड है, और 1e-9 फुटबॉल मैदान है। यह क्यों आवश्यक हो सकता है - यदि आप अपने नक्शे पर ज़ूम सुविधा बनाना चाहते हैं। एक विभाजक आउटपुट और इनपुट फ़ाइलों -- सिर्फ एक विभाजक (आपका K.O) है, और रसिया उपसर्ग ऑब्जेक्ट का नाम सेट करता है, यदि आप इसे निर्दिष्ट नहीं करते हैं, तो इनपुट फ़ाइल का नाम एक नाम के रूप में उपयोग किया जाएगा, जो हमेशा सुविधाजनक नहीं होता है (यह भारी हो सकता है)। परिणामी फ़ाइल में, मैंने आईएसओ 3166-2: RU के अनुसार कोड वाले क्षेत्रों के नाम बदल दिए। वह सब है। फ़ाइल को GitHub पर लिया जा सकता है ।

एक कार्ट्रिज ड्रा करें

क्या हम एक नक्शा तैयार करेंगे या क्या? अब हमारे पास d3.js. का उपयोग करके मानचित्र तैयार करने के लिए आवश्यक सब कुछ है निम्नलिखित टेम्पलेट की प्रतिलिपि बनाएँ और आरंभ करें:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Accidents on the Road - Choropleth</title> <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script> <script type="text/javascript" src="http://d3js.org/topojson.v0.min.js"></script> <!-- <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script> --> </head> <style> your awesome CSS </style> <body> <h1>Cool Header</h1> <script type="text/javascript"> Your awesome d3.js code </script> </body> </html>

पहले हम अपने एसवीजी मानचित्र के आयाम निर्धारित करते हैं।

  var width = 960, height = 500;

हम कार्टोग्राम के लिए रंग डोमेन, लेजेंड के लिए डोमेन और लेजेंड सिग्नेचर सेट करते हैं।

  var color_domain = [50, 150, 350, 750, 1500] var ext_color_domain = [0, 50, 150, 350, 750, 1500] var legend_labels = ["< 50", "50+", "150+", "350+", "750+", "> 1500"] var color = d3.scale.threshold() .domain(color_domain) .range(["#adfcad", "#ffcb40", "#ffba00", "#ff7d73", "#ff4e40", "#ff1300"]);

दस्तावेज़ में एक तत्व और एक टूलटिप वर्ग जोड़ें।

  var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0);

आकार विशेषताओं के साथ एसवीजी जोड़ें।

  var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height);

प्रक्षेपण पैरामीटर सेट करें (लेख की शुरुआत से Albers_Siberia.prj याद रखें / देखें):

  var projection = d3.geo.albers() .rotate([-105, 0]) .center([-10, 65]) .parallels([52, 64]) .scale(700) .translate([width / 2, height / 2]); var path = d3.geo.path().projection(projection);

डेटा पढ़ें।

  queue() .defer(d3.json, "/d/5685937/russia_1e-7sr.json") .defer(d3.csv, "Accidents.csv") .await(ready);

हम ड्राइंग शुरू करते हैं। युगल : - लिए ऑब्जेक्ट बनाएं : - और : ।

  function ready(error, map, data) { var rateById = {}; var nameById = {}; data.forEach(function(d) { rateById[d.RegionCode] = +d.Deaths; nameById[d.RegionCode] = d.RegionName; });

ड्राइंग और रंग कार्टोग्राम।

  svg.append("g") .attr("class", "region") .selectAll("path") .data(topojson.object(map, map.objects.russia).geometries) //.data(topojson.feature(map, map.objects.russia).features) <-- in case topojson.v1.js .enter().append("path") .attr("d", path) .style("fill", function(d) { return color(rateById[d.properties.region]); }) .style("opacity", 0.8)

हम घटनाओं की प्रक्रिया करते हैं: क्षेत्र की चमक (हाइलाइटिंग के लिए) और टूलटिप में क्षेत्र का नाम और सटीक संख्यात्मक मान प्रदर्शित करें।

  .on("mouseover", function(d) { d3.select(this).transition().duration(300).style("opacity", 1); div.transition().duration(300) .style("opacity", 1) div.text(nameById[d.properties.region] + " : " + rateById[d.properties.region]) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY -30) + "px"); }) .on("mouseout", function() { d3.select(this) .transition().duration(300) .style("opacity", 0.8); div.transition().duration(300) .style("opacity", 0); })

अब मैं यह जानना चाहूंगा कि इस नक्शे में कुछ कैसे जोड़ा जाए, मैंने रूस के दस लाख से अधिक शहरों को जोड़ने का फैसला किया है, इसके लिए हमें वास्तव में शहर और उसके निर्देशांक (दशमलव डिग्री में अक्षांश और देशांतर) की आवश्यकता है, दुर्भाग्य से इस gpsvisualizer.com/ की तरह एक जियोसिटी का पता लगाएं। जियोकोडर , ताकि वह रूसी को समझ सके, मैं नहीं कर सकता (किसी को भी पता चल सकता है?), लेकिन मैं Yandex.Map एपीआई में नहीं जाना चाहता, खासकर जब से सूची छोटी है। यह अच्छा होगा यदि वे खुद इस तरह के एक जादूगर हैं, लेकिन ओह ठीक है, मैं विचलित था। परिणामस्वरूप, हमें निम्न प्रकार की एक सूची मिली:

 City lat lon  55.7522200 37.6155600 - 59.8944400 30.2641700

ठीक है, वास्तव में, और उन्हें एक समूह में जोड़ें: - ।

  d3.tsv("cities.tsv", function(error, data) { var city = svg.selectAll("g.city") .data(data) .enter() .append("g") .attr("class", "city") .attr("transform", function(d) { return "translate(" + projection([d.lon, d.lat]) + ")"; }); city.append("circle") .attr("r", 3) .style("fill", "lime") .style("opacity", 0.75); city.append("text") .attr("x", 5) .text(function(d) { return d.City; }); }); };

यहाँ मैं जोड़ना चाहूंगा कि अंकों के बजाय, आप जोड़ सकते हैं, उदाहरण के लिए, एक पाई / रिंग आरेख, जिससे हमारे कार्टोग्राम पर सूचना लोड बढ़ रहा है। सामान्य तौर पर, बहुत सारी संभावनाएं होती हैं, सब कुछ आपके कार्यों, कल्पना और समीचीनता द्वारा यूआई / यूएक्स के दृष्टिकोण से सीमित होता है।

खैर, अंत में हम अपने कार्टोग्राम के साथ किंवदंती को जोड़ते हैं:

  var legend = svg.selectAll("g.legend") .data(ext_color_domain) .enter().append("g") .attr("class", "legend"); var ls_w = 20, ls_h = 20; legend.append("rect") .attr("x", 20) .attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;}) .attr("width", ls_w) .attr("height", ls_h) .style("fill", function(d, i) { return color(d); }) .style("opacity", 0.8); legend.append("text") .attr("x", 50) .attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;}) .text(function(d, i){ return legend_labels[i]; });

यह मूल रूप से यह है, मैंने एक साधारण उदाहरण के साथ मुख्य बिंदुओं को दिखाने की कोशिश की, मुझे आशा है कि मैं सफल रहा। कोड निश्चित रूप से सही नहीं है (कुछ भी सही नहीं है), लेकिन लक्ष्य, मैं दोहराता हूं, यह समझने योग्य था, और सुपर सार्वभौमिक / कुशल नहीं था। सूत्र GitHub पर पाए जा सकते हैं, और आप bl.ocks.org सेवा के माध्यम से परिणाम महसूस कर सकते हैं। हां, हमने यहां CSS पर विचार नहीं किया, लेकिन वहां सब कुछ तुच्छ है।

परिणाम। आगे क्या है?

ठीक है, यहाँ हमने एक सरल कार्टोग्राम बनाया है, बिना निकटता, जटिल एनीमेशन और अन्य घंटियाँ और सीटी की संभावना के बिना, लेकिन अगर आप उन्हें यहाँ जोड़ना चाहते हैं तो यह मुश्किल नहीं होगा। सामान्य तौर पर, इस लाइब्रेरी में हर चीज और हर चीज की कल्पना करने की व्यापक संभावनाएं हैं: रेखांकन, चार्ट, कार्टोग्राम, पेड़, ग्राफ, चार्ट, हीट मैप ... यह डेटाविज़ हारवेस्टर है, जिसकी आपको ज़रूरत है d3js.org वेबसाइट के माध्यम से। माइक बॉस्कोक सक्रिय रूप से परियोजना का विकास कर रहा है, लगभग हर दिन नए उदाहरण अपलोड करता है (एक माइनस, लगभग सभी टिप्पणियों के बिना), बहुत सी चीजें हैं जो स्टैकओवरफ्लो को तुरंत जवाब देती हैं, जिसमें स्वयं माइक भी शामिल है। तो आगे बढ़ें, आईएमएचओ यह लाइब्रेरी, जो अनिवार्य रूप से पहाड़ी के पीछे मुख्य दृश्य उपकरण है, हमारे ध्यान से गलत तरीके से वंचित है। खैर, मैं, अगर यह हब्बर-समुदाय के लिए दिलचस्प होगा, तो समय-समय पर दिलचस्प उदाहरणों का विश्लेषण करेगा। वास्तव में सब कुछ, टिप्पणियों, प्रश्नों और सुझावों का स्वागत है।

पुनश्च मैं लगभग सबसे महत्वपूर्ण बात भूल गया, सड़कों पर सावधान रहें, खासकर यदि आप चुकोटका से नहीं हैं, तो हमारे पास सभी प्रकार की शैतानियाँ हैं और रजिस्ट्रारों से बहुत सारे वीडियो इसकी पुष्टि करते हैं! सामान्य तौर पर, यह दुखद है, प्रति वर्ष लगभग 28 हजार मौतें, डरावनी सरल है (डेटा यातायात पुलिस की वेबसाइट से लिया गया था)।

इंटरएक्टिव एसवीजी मानचित्र d3.js का उपयोग कर

कार्टोग्राफिक मामले।

एक कार्ट्रिज ड्रा करें

परिणाम। आगे क्या है?

More articles: