सैंकी डायग्राम

खास जानकारी

सैंकी डायग्राम एक विज़ुअलाइज़ेशन है, जिसका इस्तेमाल वैल्यू के एक सेट से दूसरे सेट में फ़्लो को दिखाने के लिए किया जाता है. कनेक्ट की जा रही चीज़ों को नोड कहा जाता है और कनेक्शन को लिंक कहा जाता है. सैंकी का सबसे अच्छा इस्तेमाल तब होता है, जब आप दो डोमेन (उदाहरण के लिए, यूनिवर्सिटी और मेजर) के बीच की मेनी-टू-मेनी मैपिंग दिखाना चाहते हों या स्टेज के सेट के ज़रिए एक से ज़्यादा पाथ दिखाना चाहते हों (उदाहरण के लिए, Google Analytics, सैंकी का इस्तेमाल करके यह दिखाता है कि आपकी वेबसाइट के पेजों से दूसरे पेजों पर ट्रैफ़िक कैसे आता है).

जिज्ञासु लोगों के लिए, इनका नाम कैप्टन सैंकी के नाम पर रखा गया, जिन्होंने स्टीम इंजन की क्षमता का डायग्राम बनाया. इसमें तीरों का इस्तेमाल, जिनकी चौड़ाई के अनुपात में गर्मी के नुकसान के लिए किया जाता था.

ध्यान दें: हो सकता है कि आने वाले समय में Google चार्ट की रिलीज़ में, सैंकी चार्ट में अहम बदलाव किए जा रहे हों.

सैंकी डायग्राम, SVG या VML का इस्तेमाल करके ब्राउज़र में रेंडर किए जाते हैं. उपयोगकर्ता के ब्राउज़र के हिसाब से जो भी सही हो. Google का सैंकी लेआउट कोड, D3 के सैंकी लेआउट कोड से लिया गया है.

ध्यान दें: Google सैंकी चार्ट, Microsoft Internet Explorer 8 और इससे पहले के वर्शन में उपलब्ध नहीं हैं.

एक आसान उदाहरण

मान लें कि आपके पास दो कैटगरी A और B थीं, जो तीन अन्य कैटगरी X, Y, और Z से जुड़ी होती हैं. उनमें से कुछ कनेक्शन दूसरे कनेक्शन की तुलना में भारी होते हैं. उदाहरण के लिए, B का X से कमज़ोर कनेक्शन है और Y से काफ़ी मोटा कनेक्शन है.


कनेक्शन को हाइलाइट करने के लिए किसी एक लिंक पर कर्सर घुमाएं.

सैंकी चार्ट बनाने के लिए, पंक्तियों का एक सेट दें जिसमें हर एक कनेक्शन से जुड़ी जानकारी, जैसे कि से लेकर दूसरी तक, और वज़न के बारे में जानकारी मौजूद होनी चाहिए. इसके बाद, चार्ट शुरू करने के लिए, google.visualization.Sankey() तरीके का इस्तेमाल करें. इसके बाद, उसे रेंडर करने के लिए draw() तरीके का इस्तेमाल करें:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['sankey']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows([
          [ 'A', 'X', 5 ],
          [ 'A', 'Y', 7 ],
          [ 'A', 'Z', 6 ],
          [ 'B', 'X', 2 ],
          [ 'B', 'Y', 9 ],
          [ 'B', 'Z', 4 ]
        ]);

        // Sets chart options.
        var options = {
          width: 600,
        };

        // Instantiates and draws our chart, passing in some options.
        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="sankey_basic" style="width: 900px; height: 300px;"></div>
  </body>
</html>

ध्यान दें: अपने डेटा में साइकल शामिल न करें: अगर A खुद से लिंक होता है या B से लिंक होता है, जो C से लिंक होता है और A से लिंक होता है, तो आपका चार्ट रेंडर नहीं होगा.

मल्टीलेवल सैंकी

कनेक्शन के कई लेवल के साथ सैंकी चार्ट बनाया जा सकता है:

सैंकी चार्ट, ज़रूरत के हिसाब से अतिरिक्त लेवल जोड़ेंगे. ये लेवल अपने-आप तैयार होते हैं. यहां ऊपर दिए गए चार्ट का पूरा कोड दिया गया है:

<html>
<body>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>

<script type="text/javascript">
  google.charts.load("current", {packages:["sankey"]});
  google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
       [ 'Brazil', 'Portugal', 5 ],
       [ 'Brazil', 'France', 1 ],
       [ 'Brazil', 'Spain', 1 ],
       [ 'Brazil', 'England', 1 ],
       [ 'Canada', 'Portugal', 1 ],
       [ 'Canada', 'France', 5 ],
       [ 'Canada', 'England', 1 ],
       [ 'Mexico', 'Portugal', 1 ],
       [ 'Mexico', 'France', 1 ],
       [ 'Mexico', 'Spain', 5 ],
       [ 'Mexico', 'England', 1 ],
       [ 'USA', 'Portugal', 1 ],
       [ 'USA', 'France', 1 ],
       [ 'USA', 'Spain', 1 ],
       [ 'USA', 'England', 5 ],
       [ 'Portugal', 'Angola', 2 ],
       [ 'Portugal', 'Senegal', 1 ],
       [ 'Portugal', 'Morocco', 1 ],
       [ 'Portugal', 'South Africa', 3 ],
       [ 'France', 'Angola', 1 ],
       [ 'France', 'Senegal', 3 ],
       [ 'France', 'Mali', 3 ],
       [ 'France', 'Morocco', 3 ],
       [ 'France', 'South Africa', 1 ],
       [ 'Spain', 'Senegal', 1 ],
       [ 'Spain', 'Morocco', 3 ],
       [ 'Spain', 'South Africa', 1 ],
       [ 'England', 'Angola', 1 ],
       [ 'England', 'Senegal', 1 ],
       [ 'England', 'Morocco', 2 ],
       [ 'England', 'South Africa', 7 ],
       [ 'South Africa', 'China', 5 ],
       [ 'South Africa', 'India', 1 ],
       [ 'South Africa', 'Japan', 3 ],
       [ 'Angola', 'China', 5 ],
       [ 'Angola', 'India', 1 ],
       [ 'Angola', 'Japan', 3 ],
       [ 'Senegal', 'China', 5 ],
       [ 'Senegal', 'India', 1 ],
       [ 'Senegal', 'Japan', 3 ],
       [ 'Mali', 'China', 5 ],
       [ 'Mali', 'India', 1 ],
       [ 'Mali', 'Japan', 3 ],
       [ 'Morocco', 'China', 5 ],
       [ 'Morocco', 'India', 1 ],
       [ 'Morocco', 'Japan', 3 ]
    ]);

    // Set chart options
    var options = {
      width: 600,
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
    chart.draw(data, options);
   }
</script>
</body>
</html>

रंग कंट्रोल करना

सैंकी चार्ट में, नोड और लिंक के लिए पसंद के मुताबिक रंग सेट करने की सुविधा होती है. नोड और लिंक, दोनों को उनकी पसंद के हिसाब से रंग पटल दिए जा सकते हैं. इसके लिए, उनके colors विकल्पों (क्रम के हिसाब से sankey.node.colors और sankey.link.colors) का इस्तेमाल किया जा सकता है. colorMode विकल्प का इस्तेमाल करके, इन्हें अलग-अलग कलर मोड भी दिया जा सकता है.

अगर रंग पसंद के मुताबिक नहीं किए गए हैं, तो वे डिफ़ॉल्ट रूप से स्टैंडर्ड मटीरियल पैलेट का इस्तेमाल करते हैं.

    var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
                  '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];

    var options = {
      height: 400,
      sankey: {
        node: {
          colors: colors
        },
        link: {
          colorMode: 'gradient',
          colors: colors
        }
      }
    };

कॉन्फ़िगरेशन के विकल्पों की मदद से, लिंक, नोड, और लेबल के रंग कंट्रोल किए जा सकते हैं. यहां, हम समान रंग लेकिन अलग-अलग चमक वाले तीन विकल्पों को चुनते हैं:

यहां बताया गया है कि वे विकल्प कैसे दिखते हैं:

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae' } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

sankey.link.color.fillOpacity विकल्प का इस्तेमाल करके, लिंक की पारदर्शिता को भी कंट्रोल किया जा सकता है:

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

लिंक के चारों ओर बॉर्डर बनाने के लिए, sankey.link.color.stroke और sankey.link.color.strokeWidth विकल्प इस्तेमाल करें:

स्ट्रोक का रंग आरजीबी फ़ॉर्मैट में या अंग्रेज़ी में दिया जा सकता है.

    var options = {
      width: 750,
      height: 400,
      sankey: {
        node: { colors: [ '#a61d4c' ] },
        link: { color: { stroke: 'black', strokeWidth: 1 } },
      }
    };

लेबल को पसंद के मुताबिक बनाना

sankey.node.label.fontName और दोस्तों की मदद से, सैंकी चार्ट पर टेक्स्ट को पसंद के मुताबिक बनाया जा सकता है:

ऊपर दिए गए चार्ट के लिए छंद विकल्प यहां दिया गया है:

    var options = {
      width: 600,
      sankey: {
        node: { label: { fontName: 'Times-Roman',
                         fontSize: 14,
                         color: '#871b47',
                         bold: true,
                         italic: true } } },
    };

sankey.node.labelPadding विकल्प की मदद से, नोड के हिसाब से लेबल की जगह में बदलाव किया जा सकता है:

ऊपर दिए गए चार्ट में, हमने लेबल और नोड के बीच 30 पिक्सल की पैडिंग (जगह) जोड़ी है.

    var options = {
      width: 600,
      sankey: { node: { labelPadding: 30 } },
    };

नोड एडजस्ट करना

sankey.node.width की मदद से, नोड की चौड़ाई को कंट्रोल किया जा सकता है:

ऊपर, हमने नोड की चौड़ाई 2 पर सेट की है.

    var options = {
      width: 600,
      sankey: { node: { width: 2 } },
    };

sankey.node.nodePadding की मदद से, नोड के बीच की दूरी में बदलाव किया जा सकता है:

ऊपर दिए गए चार्ट में, हमने sankey.node.nodePadding को 80 पर सेट किया है.

    var options = {
      width: 900,
      sankey: { node: { nodePadding: 80 } },
    };

लोड हो रहा है

google.charts.load पैकेज का नाम "sankey" है:

  google.charts.load("current" {packages: ["sankey"]});

विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.Sankey है:

  var visualization = new google.visualization.Sankey(container);

डेटा फ़ॉर्मैट

पंक्तियां: टेबल की हर पंक्ति दो लेबल के बीच के कनेक्शन को दिखाती है. तीसरा कॉलम उस कनेक्शन की क्षमता को दिखाता है और लेबल के बीच पाथ की चौड़ाई में दिखेगा.

कॉलम:

  कॉलम 0 कॉलम 1 कॉलम 2 ... कॉलम N (ज़रूरी नहीं)
मकसद: सोर्स डेस्टिनेशन वैल्यू ... वैकल्पिक भूमिकाएं
डेटा टाइप: स्ट्रिंग स्ट्रिंग नंबर ...
भूमिका: डोमेन डोमेन डेटा ...
कॉलम की वैकल्पिक भूमिकाएं:

बिलकुल नहीं

बिलकुल नहीं

बिलकुल नहीं

...

 

कॉन्फ़िगरेशन के विकल्प

नाम
forceIFrame

चार्ट को किसी इनलाइन फ़्रेम के अंदर ड्रॉ करता है. ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है. सभी IE8 चार्ट, i-फ़्रेम में बनाए जाते हैं.

टाइप: बूलियन
डिफ़ॉल्ट: गलत
ऊंचाई

चार्ट की ऊंचाई, पिक्सल में.

टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की ऊंचाई
sankey.iterations

मल्टीलेवल सैंकी चार्ट में, कभी-कभी नोड को सही तरीके से समझने में मुश्किल होती है, ताकि उन्हें आसानी से पढ़ा जा सके. अलग-अलग नोड लेआउट के साथ D3 लेआउट इंजन के एक्सपेरिमेंट. ये एक्सपेरिमेंट, sankey.iterations कोशिशों के बाद रुक जाते हैं. यह संख्या जितनी बड़ी होगी, जटिल सैंकी चार्ट का लेआउट उतना ही आकर्षक होगा, लेकिन इसके लिए शुल्क चुकाना पड़ेगा: सैंकी को रेंडर होने में ज़्यादा समय लगेगा. इसके उलट, यह संख्या जितनी छोटी होगी, आपके चार्ट उतनी ही जल्दी रेंडर होंगे.

टाइप: पूर्णांक
डिफ़ॉल्ट: 32
sankey.link

यह नीति नोड के बीच के कनेक्शन के एट्रिब्यूट को कंट्रोल करती है. फ़िलहाल, सभी एट्रिब्यूट रंग से जुड़े हैं:

sankey: {
  link: {
    color: {
      fill: '#efd',     // Color of the link.
      fillOpacity: 0.8, // Transparency of the link.
      stroke: 'black',  // Color of the link border.
      strokeWidth: 1    // Thickness of the link border (default 0).
    },
    colors: [
      '#a6cee3',        // Custom color palette for sankey links.
      '#1f78b4',        // Nodes will cycle through this palette
      '#b2df8a',        // giving the links for that node the color.
      '#33a02c'
    ]
  }
}
      
Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
sankey.link.colorMode

नोड के बीच के लिंक के लिए कलरिंग मोड सेट करता है. जितनी तरह के साइटमैप हो सकते हैं उनकी जानकारी यहां दी गई है:

  • 'source' - सोर्स नोड के रंग का इस्तेमाल सभी टारगेट नोड के लिंक के लिए किया जाता है.
  • 'target' - टारगेट नोड के रंग का इस्तेमाल, उसके सोर्स नोड के लिंक के लिए किया जाता है.
  • 'gradient' - सोर्स और टारगेट नोड के बीच के लिंक को सोर्स नोड के रंग से टारगेट नोड के रंग तक ग्रेडिएंट के रूप में दिखाया जाता है.
  • 'none' - डिफ़ॉल्ट विकल्प; लिंक के रंग डिफ़ॉल्ट रूप से सेट किए जाएंगे (या कोई ऐसा रंग जो sankey.link.color.fill और sankey.link.color.fillOpacity विकल्पों में तय किया गया है).

यह विकल्प, sankey.link.color को बदल देता है.

Type: स्ट्रिंग
डिफ़ॉल्ट: 'कोई नहीं'
sankey.node

यह नीति नोड के एट्रिब्यूट को कंट्रोल करती है (लिंक के बीच वर्टिकल बार):

sankey: {
  node: {
    label: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: '#000',
      bold: true,
      italic: false
    },
    interactivity: true, // Allows you to select nodes.
    labelPadding: 6,     // Horizontal distance between the label and the node.
    nodePadding: 10,     // Vertical distance between nodes.
    width: 5,            // Thickness of the node.
    colors: [
      '#a6cee3',         // Custom color palette for sankey nodes.
      '#1f78b4',         // Nodes will cycle through this palette
      '#b2df8a',         // giving each node its own color.
      '#33a02c'
    ]
  }
}
      
Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
sankey.node.colorMode

सैंकी नोड के लिए कलरिंग मोड सेट करता है. जितनी तरह के साइटमैप हो सकते हैं उनकी जानकारी यहां दी गई है:

  • 'unique' - हर नोड को एक खास रंग मिलेगा.
Type: स्ट्रिंग
डिफ़ॉल्ट: 'यूनीक'
टूलटिप

एक ऑब्जेक्ट, जिसमें सदस्यों के साथ अलग-अलग टूलटिप एलिमेंट को कॉन्फ़िगर करने की सुविधा होती है. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
tooltip.isHtml

अगर इसे 'सही है' पर सेट किया जाता है, तो SVG के रेंडर किए गए टूलटिप के बजाय, एचटीएमएल के रेंडर किए गए टूलटिप का इस्तेमाल करें. ज़्यादा जानकारी के लिए, टूलटिप के कॉन्टेंट को पसंद के मुताबिक बनाना देखें.

ध्यान दें: टूलटिप कॉलम में डेटा की भूमिका के ज़रिए एचटीएमएल टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाने की सुविधा, बबल चार्ट विज़ुअलाइज़ेशन के साथ काम नहीं करती.

टाइप: बूलियन
डिफ़ॉल्ट: गलत
tooltip.textStyle

ऐसा ऑब्जेक्ट जो टूलटिप टेक्स्ट की स्टाइल के बारे में बताता है. ऑब्जेक्ट का प्रारूप ऐसा है:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color, एचटीएमएल की कोई भी कलर स्ट्रिंग हो सकती है, जैसे: 'red' या '#00cc00'. fontName और fontSize भी देखें.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
चौड़ाई

चार्ट की चौड़ाई, पिक्सल में.

टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की चौड़ाई

तरीके

तरीका
draw(data, options)

चार्ट बनाता है. ready इवेंट चालू होने के बाद ही, चार्ट में दूसरे तरीकों के कॉल स्वीकार किए जाते हैं. Extended description.

सामान लौटाने का तरीका: कोई नहीं
getBoundingBox(id)

चार्ट के एलिमेंट id की बाईं, ऊपर, चौड़ाई, और ऊंचाई वाला ऑब्जेक्ट दिखाता है. id के फ़ॉर्मैट को अभी तक दस्तावेज़ में नहीं रखा गया है (वे इवेंट हैंडलर की रिटर्न वैल्यू हैं), लेकिन यहां कुछ उदाहरण दिए गए हैं:

var cli = chart.getChartLayoutInterface();

चार्ट एरिया की ऊंचाई
cli.getBoundingBox('chartarea').height
बार या कॉलम चार्ट की पहली सीरीज़ में तीसरे बार की चौड़ाई
cli.getBoundingBox('bar#0#2').width
पाई चार्ट के पांचवें खूंटी (वेज) का बाउंड्री बॉक्स
cli.getBoundingBox('slice#4')
किसी वर्टिकल (जैसे, कॉलम) चार्ट के चार्ट डेटा का बाउंडिंग बॉक्स:
cli.getBoundingBox('vAxis#0#gridline')
किसी हॉरिज़ॉन्टल (जैसे, बार) चार्ट के चार्ट डेटा का बाउंडिंग बॉक्स:
cli.getBoundingBox('hAxis#0#gridline')

वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. चार्ट बनाने के बाद इसे कॉल करें.

रिटर्न टाइप: ऑब्जेक्ट
getSelection()

चुनी गई चार्ट इकाइयों का कलेक्शन दिखाता है. बार, लेजेंड एंट्री, और कैटगरी चुनी जा सकने वाली इकाइयां हैं. इस चार्ट के लिए, किसी भी समय सिर्फ़ एक इकाई चुनी जा सकती है. Extended description .

रिटर्न टाइप: चुने गए एलिमेंट की कलेक्शन
setSelection()

चार्ट में मौजूद, दी गई इकाइयों को चुनता है. चुने गए पिछले किसी भी आइटम को रद्द कर देगा. बार, लेजेंड एंट्री, और कैटगरी चुनी जा सकने वाली इकाइयां हैं. इस चार्ट के लिए, एक बार में सिर्फ़ एक इकाई चुनी जा सकती है. Extended description .

सामान लौटाने का तरीका: कोई नहीं
clearChart()

चार्ट को हटा देता है और इसके लिए असाइन किए गए सभी संसाधनों को रिलीज़ करता है.

सामान लौटाने का तरीका: कोई नहीं

इवेंट

नाम
error

यह तब ट्रिगर होता है, जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है.

प्रॉपर्टी: आईडी, मैसेज
onmouseover

यह तब ट्रिगर होता है, जब कोई उपयोगकर्ता किसी विज़ुअल इकाई पर माउस रखता है. इससे जुड़े डेटा टेबल एलिमेंट की पंक्ति और कॉलम के इंडेक्स को पास करता है. बार, डेटा टेबल में किसी सेल, कॉलम से लेजेंड एंट्री (पंक्ति का इंडेक्स खाली है), और कैटगरी को पंक्ति (कॉलम इंडेक्स शून्य है) से जुड़ा होता है.

प्रॉपर्टी: पंक्ति, कॉलम
onmouseout

यह तब ट्रिगर होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई से दूर होता है. इससे जुड़े डेटा टेबल एलिमेंट की पंक्ति और कॉलम के इंडेक्स को पास करता है. बार, डेटा टेबल में किसी सेल, कॉलम से लेजेंड एंट्री (पंक्ति का इंडेक्स खाली है), और कैटगरी को पंक्ति (कॉलम इंडेक्स शून्य है) से जुड़ा होता है.

प्रॉपर्टी: पंक्ति, कॉलम
ready

यह चार्ट, बाहरी तरीके से कॉल करने के लिए तैयार है. अगर आपको चार्ट के साथ इंटरैक्ट करने और कॉल के तरीकों को ड्रॉ करने के बाद, उन्हें ड्रॉ करना है, तो draw तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट ट्रिगर होने के बाद ही उन्हें कॉल करना चाहिए.

प्रॉपर्टी: कोई प्रॉपर्टी नहीं
select

तब ट्रिगर होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर क्लिक करता है. चुनी गई जानकारी के बारे में जानने के लिए, getSelection() पर कॉल करें.

प्रॉपर्टी: कोई प्रॉपर्टी नहीं

डेटा नीति

सभी कोड और डेटा को ब्राउज़र में प्रोसेस और रेंडर किया जाता है. किसी भी सर्वर पर कोई भी डेटा नहीं भेजा जाता.