ग्लोब से एक द्वि-आयामी मानचित्र में संक्रमण का एनीमेशन

मैं अपने कार्टोग्राफिक प्रयोग को हैबर के साथ साझा करना चाहता हूं, जिसका अर्थ है ऑर्थोग्राफिक प्रोजेक्शन (ग्लोब) से इक्विडिस्टेंट (साधारण दो-आयामी नक्शों के अनुमानों में से एक) में संक्रमण का एनीमेशन। इसके अलावा, यह विधि किसी भी अन्य अनुमानों के लिए उपयुक्त है। प्रयोगों का परिणाम एक ऐसा एनीमेशन था:



पहले की तरह, हम d3.js लाइब्रेरी का उपयोग करेंगे, पहले की तरह, हम कई कार्यान्वयन करेंगे: एसवीजी और कैनवस। इंटरैक्टिव इन्फोग्राफिक्स के लिए दोनों विकल्पों का प्रभावी ढंग से उपयोग किया जा सकता है। अच्छा, चलो शुरू करें?

शुरुआत

मैंने एक बार टीवी पर (गज़प्रॉम की तरह) एक विज्ञापन देखा, जहां दुनिया बस घूमती है और फिर एक नक्शे में सामने आती है। सुंदर कार्टून, मुझे यह पसंद आया, ठीक है, मैंने कुछ ऐसा ही करने का फैसला किया, केवल इंटरैक्टिव और इंटरनेट के लिए। चुनौती स्वीकार की ।

सरल से जटिल तक

चूँकि हम पहले ही मानचित्रों के साथ काम कर चुके हैं ( इंटरेक्टिव एसवीजी मानचित्र d3.js का उपयोग करके ), और एक ग्लोब के साथ ( इंटरएक्टिव ग्लोब - एसवीजी बनाम कैनवस ), हम एक प्रक्षेपण से दूसरे में संक्रमण के तुरंत बाद शुरू करेंगे। पहली बात जो दिमाग में आती है, वह पुस्तकालय को सब कुछ देना है, क्योंकि संक्रमण एनीमेशन पहले से ही वहां लागू है: संक्रमण । तो मैंने किया। पहले उदाहरण का पूरा कोड GitHub : Globe to Map , bl.ocks.org पर महसूस करने के लिए देखा जा सकता है: ग्लोब टू मैप । हां, अगर bl.ocks.org पर आप ऊपरी बाएँ कोने में ब्लॉक नंबर पर क्लिक करते हैं, तो आप GitHub पर संबंधित गिस्ट में जाएंगे, इसलिए भविष्य में मैं केवल एक लिंक दूंगा।

तो, क्या है: focused देश पर ध्यान केंद्रित करने का सूचक है, ortho प्रक्षेपण का संकेतक है, speed रोटेशन की गति है, start रोटेशन की शुरुआत है, रोटेशन चरण को बचाने के लिए corr एक चर है।

endall(transition, callback) फ़ंक्शन उन तत्वों की संख्या को endall(transition, callback) जिन पर संक्रमण (एनीमेशन) लागू किया जाएगा, और जब सब कुछ समाप्त हो जाता है, तो यह इसे खिलाया गया फ़ंक्शन ( callback ) करता है। सिद्धांत रूप में, इसे SetTimeout बदला जा सकता है, लेकिन endall(transition, callback) का उपयोग करना बेहतर है।

 //Starter for function AFTER All transitions function endall(transition, callback) { var n = 0; transition .each(function() { ++n; }) .each("end", function() { if (!--n) callback.apply(this, arguments); }); } 

रोटेशन d3.timer का उपयोग करके कार्यान्वित किया जाता है और केवल ortho वर्ग के साथ path पर लागू होता है।

  //Globe rotating via timer d3.timer(function() { var λ = speed * (Date.now() - start), φ = -5; projection.rotate([λ + corr, φ]); g.selectAll(".ortho").attr("d", path); }); 

corr चर हमें दुनिया के रोटेशन के उसी कोण पर लौटने की अनुमति देता है जो प्रक्षेपण के परिवर्तन से पहले था। देशांतर लेख और अक्षांश के साथ, विकी लेख से निम्न चित्र भौगोलिक निर्देशांक आपको यह पता लगाने में मदद करेंगे:



ग्लोब से मानचित्र में परिवर्तन का एनीमेशन:

 //Transforming Globe to Map if (ortho === true) { corr = projection.rotate()[0]; // <- save last rotation angle g.selectAll(".ortho").classed("ortho", ortho = false); projection = projectionMap; path.projection(projection); g.selectAll("path").transition().duration(3000).attr("d", path); } 

यहां हम वर्तमान रोटेशन कोण को बचाते हैं, फिर ortho क्लास को हटाकर रोटेशन को रोकते हैं, प्रक्षेपण को बदलते हैं और अंतर्निहित संक्रमण एनीमेशन को चालू करते हैं।

रिवर्स ट्रांज़िशन को संक्रमण के अंत में सभी ortho लिए ortho क्लास को जोड़ने और ग्लोब के रोटेशन के कोण को रीसेट करने से अलग किया जाता है (टाइमर इस समय टिक गया है)।

 //Transforming Map to Globe projection = projectionGlobe; path.projection(projection); g.selectAll("path").transition() .duration(3000).attr("d", path) .call(endall, function() { g.selectAll("path").classed("ortho", ortho = true); start = Date.now(); // <- reset start for rotation }); 

बाकी सवालों के कोड, सिद्धांत रूप में, कारण नहीं होना चाहिए, खासकर यदि आप मेरे पिछले लेख पढ़ते हैं।

यदि आप थोड़ी देर के लिए पहले उदाहरण के साथ चारों ओर खेलते हैं, तो आपको ध्यान देना चाहिए कि हर बार नक्शा अलग दिखता है। यह इस तथ्य के कारण है कि हम ग्लोब ( λ ) के रोटेशन के विभिन्न कोणों पर संक्रमण शुरू करते हैं, इसलिए नक्शा देशांतर (मध्याह्न) के विभिन्न मूल्यों में कट जाता है। मानचित्र का सामान्य रूप (एंटी-मेरिडियन के साथ अनुभाग) प्राप्त करने के लिए, हमें संक्रमण से पहले ग्लोब को शून्य मेरिडियन में बदलना होगा। इसके अलावा, एक बदलाव के बजाय, आप दो-आयामी मानचित्र के प्रक्षेपण मापदंडों को बदल सकते हैं, लेकिन मैंने पहला विकल्प चुना। दूसरे उदाहरण में, एंटीमेरिडियन कटिंग को लागू किया जाता है, और ग्लोब को माउस (ड्रैग इवेंट) के साथ घुमाया जाता है। defaultRotate() फ़ंक्शन defaultRotate() लिए जिम्मेदार है:

 //Rotate to default before animation function defaultRotate() { d3.transition() .duration(1500) .tween("rotate", function() { var r = d3.interpolate(projection.rotate(), [0, 0]); return function(t) { projection.rotate(r(t)); g.selectAll("path").attr("d", path); }; }) }; 

मैंने पहले से ही इंटरएक्टिव ग्लोब - एसवीजी बनाम कैनवस लेख में एक समान फ़ंक्शन का वर्णन किया है, इसलिए मैंने इसे दोहराया नहीं। दूसरे उदाहरण के लिए कोड bl.ocks.org है : ग्लोब टू मैप II ।

यह एनीमेशन को जटिल करने का समय है, पहले दो उदाहरणों की कायापलट शांत दिखती है और अस्तित्व का अधिकार है, लेकिन मुझे कुछ और सौंदर्यवादी चाहिए।

अगर सुंदरता दुनिया को बचाएगी, तो उसे लगातार कुछ बलिदान की आवश्यकता क्यों है? ©

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

 //Unreelling transformation function animation(interProj) { defaultRotate(); g.transition() .duration(7500) .tween("projection", function() { return function(_) { interProj.alpha(_); g.selectAll("path").attr("d", path); }; }) } function interpolatedProjection(a, b) { var projection = d3.geo.projection(raw).scale(1), center = projection.center, translate = projection.translate, clip = projection.clipAngle, α; function raw(λ, φ) { var pa = a([λ *= 180 / Math.PI, φ *= 180 / Math.PI]), pb = b([λ, φ]); return [(1 - α) * pa[0] + α * pb[0], (α - 1) * pa[1] - α * pb[1]]; } projection.alpha = function(_) { if (!arguments.length) return α; α = +_; var ca = a.center(), cb = b.center(), ta = a.translate(), tb = b.translate(); center([(1 - α) * ca[0] + α * cb[0], (1 - α) * ca[1] + α * cb[1]]); translate([(1 - α) * ta[0] + α * tb[0], (1 - α) * ta[1] + α * tb[1]]); if (ortho === true) {clip(180 - α * 90);} return projection; }; delete projection.scale; delete projection.translate; delete projection.center; return projection.alpha(0); } 

पहली नज़र में यह जटिल लगता है, लेकिन वास्तव में ऐसा नहीं है। यहां क्या हो रहा है? हम interpolatedProjection(a, b) प्रोजेक्शन interpolatedProjection(a, b) दो अनुमानों को खिलाते हैं, वे सामान्यीकृत होते हैं (एक पैमाने, रेडियन में निर्देशांक), फिर एक संयुक्त प्रक्षेपण बनाया जाता है, जो गुणांक α (प्रक्षेप चरण) के साथ मूल अनुमानों के मापदंडों (केंद्र, ऑफसेट) का जोड़दार योग होता है। और प्रत्येक चरण पर हमें एक संयुक्त प्रक्षेपण दिया जाता है, जो α पर निर्भर करता है। बढ़ते कदम α , पहले प्रक्षेपण का वजन घटता है, और दूसरे का वजन बढ़ता है। इस प्रकार, हम एक सुंदर एनीमेशन प्राप्त करते हैं।
Bl.ocks.org पर अंतिम संस्करण: ग्लोब टू मैप III ।

अंत में, मैंने कैनवास का उपयोग करके एक संस्करण बनाने का भी फैसला किया। यह संस्करण अलग है कि सभी कार्य ready(error, world, countryData) अंदर चले गए, क्योंकि उन्हें सीधे जियोडाटा में हेरफेर करना होगा, अन्यथा कार्य का तर्क समान है। टिप्पणी करने के लिए कुछ विशेष नहीं है, इसलिए यहाँ bl.ocks.org पर कोड है: ग्लोब टू मैप IV ।

परिणाम

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

• अशुद्ध -3 डी छायांकित ग्लोब
• फ्लोटिंग लैंडमास
• ग्लोब के माध्यम से देखें

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

यहीं पर हमारा प्रयोग समाप्त होता है। अंत तक पढ़ने वालों को धन्यवाद। सभी को शुभकामनाएँ और दिलचस्प प्रोजेक्ट।