1"use strict";(globalThis.webpackChunkmydbr_docs=globalThis.webpackChunkmydbr_docs||[]).push([[6531],{52500(e,n,s){s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>i,default:()=>m,frontMatter:()=>d,metadata:()=>a,toc:()=>l});const a=JSON.parse('{"id":"extensions/d3","title":"D3 Extension","description":"d3 extension is a framework for the D3 JavaScript library.","source":"@site/docs/extensions/d3.md","sourceDirName":"extensions","slug":"/extensions/d3","permalink":"/doc/extensions/d3","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"D3 Extension"},"sidebar":"docs","previous":{"title":"eChart Extension","permalink":"/doc/extensions/echart"},"next":{"title":"SMS Extension","permalink":"/doc/extensions/sms"}}');var r=s(74848),t=s(28453);const d={title:"D3 Extension"},i=void 0,o={},l=[{value:"Commands",id:"commands",level:3},{value:"Syntax",id:"syntax",level:3},{value:"Usage",id:"usage",level:2},{value:"Sankey Diagram Example",id:"sankey-diagram-example",level:2},{value:"Chord Diagram",id:"chord-diagram",level:2},{value:"Chord Diagram Example",id:"chord-diagram-example",level:2}];function c(e){const n={a:"a",br:"br",code:"code",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",strong:"strong",...(0,t.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["d3 extension is a framework for the ",(0,r.jsx)(n.a,{href:"http://d3js.org/",children:"D3"})," JavaScript library."]}),"\n",(0,r.jsx)(n.h3,{id:"commands",children:"Commands"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{id:"dbr.d3"}),(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.code,{children:"dbr.d3"})})," - Creates a D3 object",(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.a,{id:"dbr.d3.sankey_format"}),(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.code,{children:"dbr.d3.sankey_format"})})," - Formats Sankey diagram tooltips",(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.a,{id:"dbr.d3.zoom"}),(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.code,{children:"dbr.d3.zoom"})})," - Adjusts the zoom level for Chord diagrams when labels are long"]}),"\n",(0,r.jsx)(n.h3,{id:"syntax",children:"Syntax"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sql",children:"select 'dbr.d3', 'chart_type'\nselect 'dbr.d3.sankey_format', 'd3_numeric_format', 'number_suffix'...\nselect 'dbr.d3.zoom', pixels\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.p,{children:"A Sankey diagram is a flow diagram where the width of the arrows is proportional to the flow quantity."}),"\n",(0,r.jsx)(n.p,{children:"Use one of the following data selection patterns. In the first example, nodes are identified by name; in the second, they are identified by ID."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sql",children:"select source, target, value\nfrom mydb.Data;\n\nselect source_id, source, target_id, target, value\nfrom mydb.Data;\n"})}),"\n",(0,r.jsx)(n.h2,{id:"sankey-diagram-example",children:"Sankey Diagram Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sql",children:"select 'dbr.d3', 'sankey', 'UK energy production and consumption in 2050',960, 500;\nselect 'dbr.d3.sankey_format', ',.0f', ' Twh';\n\nselect source, target, value\nfrom demo_uk_energy;\n"})}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{src:s(78924).A+"",width:"1112",height:"575"})}),"\n",(0,r.jsx)(n.h2,{id:"chord-diagram",children:"Chord Diagram"}),"\n",(0,r.jsx)(n.p,{children:"A Chord diagram visualizes the inter-relationships between data points in a matrix."}),"\n",(0,r.jsx)(n.p,{children:"The data consists of connected nodes and their associated values:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sql",children:"select `to`, `from`, value\nfrom mydb.Data;\n"})}),"\n",(0,r.jsx)(n.h2,{id:"chord-diagram-example",children:"Chord Diagram Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sql",children:"select 'dbr.d3', 'chord', 'Debt diagram';\n\n\nselect creditor, debtor, value\nfrom debts;\n"})}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{src:s(60577).A+"",width:"394",height:"464"})})]})}function m(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},60577(e,n,s){s.d(n,{A:()=>a});const a=s.p+"assets/images/chord-8f27d12181eeedae1820941e5277f66f.png"},78924(e,n,s){s.d(n,{A:()=>a});const a=s.p+"assets/images/sankey-cadf917daf44879ba9b32c148d31c56b.png"},28453(e,n,s){s.d(n,{R:()=>d,x:()=>i});var a=s(96540);const r={},t=a.createContext(r);function d(e){const n=a.useContext(t);return a.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:d(e.components),a.createElement(t.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.