मैं this example जैसा विज़ुअलाइज़ेशन पर काम कर रहा हूं, जो डीसीजेएस लाइब्रेरी उदाहरण होमपेज से जुड़ा हुआ है। पृष्ठ पर जाने के लिए कुछ सभ्य उदाहरण स्टार्टर कोड है, हालांकि मेरे पास मानचित्र पर एक बबल चार्ट बनाने के बारे में एक विशेष प्रश्न है।मानचित्र पर बबल चार्ट ओवरले के साथ डीसी डैशबोर्ड का निर्माण - बेहतर उदाहरण?
उपरोक्त उदाहरण में, ऐसा लगता है कि लेखक मैन्युअल रूप से कनाडाई प्रांत के आकार को प्रदर्शित करने के लिए पथ निर्दिष्ट करता है। कोड तब bubbleOverlay चार्ट को caChart नामक चर के लिए असाइन करता है, जिसमें कनाडाई मानचित्र पर विशिष्ट निर्देशांक पर खींचे गए बुलबुले होंगे। हालांकि, आगे कोड में नीचे यह लग रहा है कोड की तरह मैन्युअल रूप प्रदान करती है (एक्स, वाई) वेब पेज पर निर्देशांक के लिए प्रत्येक बुलबुला प्रोग्राम के रूप में अपने स्थानों को देने की बजाय पर तैयार हो (टिप्पणी देखें):
caChart.width(600)
.height(450)
.dimension(cities)
.group(totalCrimeRateByCity)
.radiusValueAccessor(function(p) {
return p.value.avgTotalCrimeRate;
})
.r(d3.scale.linear().domain([0, 200000]))
.colors(["#ff7373","#ff4040","#ff0000","#bf3030","#a60000"])
.colorDomain([13, 30])
.colorAccessor(function(p) {
return p.value.violentCrimeRatio;
})
.title(function(d) {
return "City: " + d.key
+ "\nTotal crime per 100k population: " + numberFormat(d.value.avgTotalCrimeRate)
+ "\nViolent crime per 100k population: " + numberFormat(d.value.avgViolentCrimeRate)
+ "\nViolent/Total crime ratio: " + numberFormat(d.value.violentCrimeRatio) + "%";
})
// These points appear to be assigned manually
.point("Toronto", 364, 400)
.point("Ottawa", 395.5, 383)
.point("Vancouver", 40.5, 316)
.point("Montreal", 417, 370)
.point("Edmonton", 120, 299)
.point("Saskatoon", 163, 322)
.point("Winnipeg", 229, 345)
.point("Calgary", 119, 329)
.point("Quebec", 431, 351)
.point("Halifax", 496, 367)
.point("St. John's", 553, 323)
.point("Yukon", 44, 176)
.point("Northwest Territories", 125, 195)
.point("Nunavut", 273, 188);
मेरे पास है लैट-लम्बा निर्देशांक पर समय-मुद्रित डेटा जो मैं संयुक्त राज्य के समान मानचित्र पर साजिश करना चाहता हूं। डेटा मोटे तौर पर कुछ इस तरह दिखाई:
device_id, timestamp, lat, lon
1, 2014-7-21, 40.7127837, -74.00594130000002
2, 2014-7-22, 40.8516701, -93.2599318
वहाँ एक crossfilter आयाम करने के लिए इन निर्देशांक पढ़ा है, और प्रोग्राम के रूप में उन्हें मैन्युअल रूप से आवंटित करने के लिए बिना एक समान अंतर्निहित नक्शा छवि पर इन निर्देशांक प्लॉट करने के लिए कोई तरीका है? यहां कोई मदद (काम करने वाले उदाहरणों के लिए पॉइंटर्स समेत) की सराहना की जाएगी।
हाँ, बुलबुला ओवरले चार्ट विशेष रूप से कम विकसित है । क्या आपके पास एक नक्शा छवि है जिसका आप उपयोग करना चाहते हैं, और यदि हां, तो क्या आप प्रक्षेपण को समझ सकते हैं? यदि नहीं, तो क्या एक लिखित पुस्तिका चार्ट काम करेगा? – Gordon
@ गॉर्डन: एक पत्रक चार्ट काम कर सकता है। अमेरिका की अंतर्निहित छवि इस डी 3 उदाहरण (http://bost.ocks.org/mike/bubble-map/) से उधार ली गई है, और मेरा मानना है कि अल्बर्स यूएस प्रोजेक्शन का उपयोग करके अनुमान लगाया गया है। मैं जिस दूसरे विकल्प के बारे में सोच रहा था वह यूएस चार्ट को डी 3 के साथ बनाना था और फ़ीड को क्रॉसफिल्टर आयाम और समूह को चार्ट करना था। हालांकि, मैं इस बारे में अनिश्चित हूं कि इसके बारे में कैसे जाना है। पढ़ने के लिए धन्यवाद। – kylerthecreator
तो, यदि आप सीधे उस मानचित्र का उपयोग कर रहे हैं, तो यह [निर्दिष्ट करता है] (https://gist.github.com/mbostock/9943478#file-makefile-L22-L24) कि प्रक्षेपण 'd3.geo.albersUsa है ()। स्केल (1280)। ट्रांसस्लेट ([चौड़ाई/2, ऊंचाई/2]) '- कुछ काम करने का सबसे तेज़ तरीका आपके अंक पर लागू होना होगा। यह अच्छा होगा अगर बबल ओवरले चार्ट ने अनुमानों का समर्थन किया, लेकिन मुझे लगता है कि इसका उपयोग गैर-मानचित्रों के साथ भी किया जा सकता है, इसलिए शायद यही कारण है। – Gordon