क्या वहां कोई जावास्क्रिप्ट पुस्तकालय है जो आपको <canvas> या एसवीजी जैसे ब्राउज़र ग्राफिक प्रतिपादन सुविधाओं का उपयोग करके हीटमैप बनाने की अनुमति देता है?<canvas> तत्व का उपयोग कर heatmaps बनाना?
मुझे HeatMapAPI.com के बारे में पता है, लेकिन उनके गर्मी के नक्शे सर्वर पक्ष पर उत्पन्न होते हैं। मुझे लगता है कि <canvas> तत्व के युग में हमें अब और आवश्यकता नहीं है!
यदि ऐसा कुछ भी नहीं है, तो ऐसे उपकरण बनाने में भाग लेने के लिए कोई स्वयंसेवक हैं?
मैं <canvas> तत्व और जावास्क्रिप्ट के साथ एक वास्तविक समय हीटमैप सहित एक डेमो बनाया। मैंने हीटमैप नमूने के बगल में प्रलेखित कोड भी जोड़ा। हीटमैप पीढ़ी की प्रक्रिया कैनवास तत्व में अल्फा मानचित्र पर आधारित है जो उपयोगकर्ताओं के माउस आंदोलन पर निर्भर करती है। आप यहां मेरे डेमो को देख सकते हैं: http://www.patrick-wied.at/static/heatmap/
उस डेमो के लिए धन्यवाद, बहुत उपयोगी +1 –
हे पैट्रिक। क्या एक अलग थ्रेड (वेब-वर्कर्स का उपयोग करके) में काम करने के लिए heatmap.js को अद्यतन करना संभव है, इसलिए यदि बहुत सारे डेटा खींचे जाने के लिए आप केवल कार्यकर्ता को ऑफ-स्क्रीन कैनवास की गणना करने और आपको कैनवास भेजते समय बताते हैं हॊ गया? – Cristy
अरे क्रिस्टी। दुर्भाग्य से कैनवास तत्व और वेब श्रमिकों के साथ तंग युग्मन के कारण यह संभव नहीं है कैनवास का समर्थन नहीं करता है। यदि आप अधिक डेटापॉइंट्स प्रदर्शित करने की तलाश में हैं तो मेरे पास अच्छी खबर है: मैं वर्तमान में heatmap.js v2 पर काम कर रहा हूं और कुछ प्रमुख प्रदर्शन अनुकूलन किया है। v2 में आप किसी भी प्रदर्शन हानि को ध्यान में रखे कम से कम 20k डेटापॉइंट्स को देख सकते हैं –
मैंने कुछ साल पहले हीटमैप के साथ खेला था। http://www.urbigene.com/treemapphp/ देखें, एल्गोरिदम यहां से आया: http://www.cs.umd.edu/hcil/treemap-history/
वह हीटमैप्स के बारे में बात कर रहा है, और ट्रेमैप्स नहीं :) –
hopps :-) मेरे जैसा ही दिखता है :-) – Pierre
मैंने Google विज़ुअलाइज़ेशन API [http://code.google.com/apis/visualization/documentation/] की सहायता से एक हिट मैप बनाया। यह एसवीजी & वीएमएल का उपयोग करता है, और ब्राउजर संगत पार भी करता है। उम्मीद है कि यह मदद करेगा।
क्या आप साझा कर सकते हैं कि आपने किस विज़ुअलाइजेशन का उपयोग किया था? मुझे विज़ुअलाइज़ेशन गैलरी में http://mid.google.com/apis/visualization/documentation/gallery.html) मुझे Google मानचित्र पर एक हीटमैप लगाने के लिए क्या करना है। मुझे पता है कि मैं इसका उपयोग कर सकता हूं: http://code.google.com/p/gheat/, लेकिन GHeat
मेरे पास कुछ जेएस/कैनवास/वेब वर्कर कोड here है हालांकि इसके साथ बहुत सारे काम किए जा सकते हैं। यह http://heatmapthing.heroku.com/ पर भी ऑनलाइन धक्का दिया जाता है। आपके ब्राउज़र को इसके लिए वेब श्रमिकों का समर्थन करने की आवश्यकता है।
यदि आप इसे बेहतर करते हैं तो कृपया पुल अनुरोध भेजें। छद्म-गाऊशियन स्मूथिंग अभी भी नरक के रूप में slooooooooow है।
मैंने इसे भी एक प्रयास दिया, लेकिन गाऊसियन को अपने स्वयं को चिकनाई किए बिना, मैंने कैनवास को मेरे लिए ऐसा करने दिया। असल में मैं ग्रे स्केल में हर बिंदु के लिए एक रेडियल ग्रेडियेंट खींचता हूं और फिर इस ग्रे स्केल छवि को रंगीन करता हूं (विस्तृत स्पष्टीकरण के लिए "Creating Heat Maps with .NET 2.0 (C#)" देखें, मेरा कार्यान्वयन थोड़ा अलग है)।
परिणाम इस प्रकार है:
प्रतिपादन समय है कि क्रोम/क्रोमियम पर बुरा नहीं है। मुझे लगता है कि सबसे अधिक समय लेने वाला हिस्सा रंगीन है, क्योंकि मैं हर पिक्सेल पर लूपिंग कर रहा हूं।
आप यहाँ कोड पा सकते हैं: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js
हीटकेनवास काफी अच्छा दिखता है। यह भी openstreetmaps https://github.com/sunng87/heatcanvas
यह कुछ अंक (< 200) या इतने पर बहुत अच्छी तरह से चलाता है के शीर्ष पर चलने के लिए एक पत्रक एक्सटेंशन है, लेकिन थोड़ा अंकों की कई हजारों पर धीमी गति से हो जाता है। मुझे लगता है कि यह पैन और ज़ूम के बाद आवश्यक से अधिक बार फिर से गणना कर सकता है, और मुझे फ्लाई पर हीटमैप बदलने के साथ कुछ समस्याएं थीं (जावास्क्रिप्ट का उपयोग करके दूसरे के साथ हीटमैप को बदलना), अनुमान है कि मुझे इसके साथ थोड़ा और प्रयोग करने की ज़रूरत है, या संपर्क करें लेखक
आईई 8 और नीचे कोई कैनवास समर्थन नहीं है। –
हां, लेकिन एक्सप्लोरर कैनवास (एक्सकैनवास) के लिए धन्यवाद, आईई के पास कैनवास टैग –
सच के लिए आंशिक समर्थन है, लेकिन यह एक साथ एक त्वरित थप्पड़ है। –