"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", div: "div", em: "em", h1: "h1", h2: "h2", h3: "h3", h4: "h4", hr: "hr", li: "li", ol: "ol", p: "p", path: "path", pre: "pre", span: "span", strong: "strong", svg: "svg", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { id: "views-research", children: [_jsx(_components.a, { className: "heading-link", href: "#views-research", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Views Research"] }), "\n", _jsxs(_components.h2, { id: "simple-views---faq", children: [_jsx(_components.a, { className: "heading-link", href: "#simple-views---faq", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Simple Views - FAQ"] }), "\n", _jsxs(_components.h3, { id: "why-not-vega-lite", children: [_jsx(_components.a, { className: "heading-link", href: "#why-not-vega-lite", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Why not vega-lite?"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "vega-lite multiple lines approach is a bit weird and counter-intuitive. This matters as this is very common." }), "\n", _jsx(_components.li, { children: "overall vega-lite retains too much complexity." }), "\n"] }), "\n", _jsx(_components.p, { children: "Vega-lite line example:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"mark\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"line\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"encoding\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"field\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Date\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"temporal\"" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"field\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"VIXClose\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"quantitative\"" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "why-not-this-alternative-series-notation", children: [_jsx(_components.a, { className: "heading-link", href: "#why-not-this-alternative-series-notation", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Why not this alternative series notation:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-auto code-highlight", children: _jsx(_components.span, { className: "code-line", children: " series: [[\"x\", \"y\"], [\"x\", \"z\"]]\n" }) }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "pros: explicit about the series …" }), "\n", _jsx(_components.li, { children: "pros: you can plot two different series with different x values (as long as they have some commonality … )" }), "\n", _jsx(_components.li, { children: "cons: more verbose." }), "\n", _jsx(_components.li, { children: "cons: 2nd multiple x values point is actually confusing for most users … (?)" }), "\n"] }), "\n", _jsx(_components.p, { children: "Simplicity is crucial here so those cons outweight the pros." }), "\n", _jsxs(_components.h2, { id: "recline-views", children: [_jsx(_components.a, { className: "heading-link", href: "#recline-views", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Recline Views"] }), "\n", _jsxs(_components.p, { children: ["To specify a Recline view, it must have ", _jsx(_components.code, { className: "language-auto", children: "type" }), " and ", _jsx(_components.code, { className: "language-auto", children: "state" }), " attributes."] }), "\n", _jsxs(_components.h3, { id: "type-attribute", children: [_jsx(_components.a, { className: "heading-link", href: "#type-attribute", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), _jsx(_components.code, { className: "language-auto", children: "\"type\"" }), " attribute"] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["We used to use this attribute to identify what graph type we need: plotyl or vega-lite. I suppose it should be used for something else. Right now, if ", _jsx(_components.code, { className: "language-auto", children: "\"type\"" }), " attribute is set to ", _jsx(_components.code, { className: "language-auto", children: "vega-lite" }), ", we render vega-lite chart. In all other cases we render plotly chart."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "state-attribute", children: [_jsx(_components.a, { className: "heading-link", href: "#state-attribute", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), _jsx(_components.code, { className: "language-auto", children: "\"state\"" }), " attribute"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "\"state\"" }), " attribute must be an object and have ", _jsx(_components.code, { className: "language-auto", children: "\"graphType\"" }), ", ", _jsx(_components.code, { className: "language-auto", children: "\"group\"" }), " and ", _jsx(_components.code, { className: "language-auto", children: "\"series\"" }), " attributes."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "\"graphType\"" }), " indicates type of the chart - line chart, bar chart, etc. Value must be a string."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "\"group\"" }), " is used to specify base axis - right now it is used as abscissa. It must be a string that is usually a primary key in a resource."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "\"series\"" }), " is used to specify ordinate - it must be an array of string elements. Each element represents a field name."] }), "\n", _jsxs(_components.h3, { id: "example-of-the-views-attribute", children: [_jsx(_components.a, { className: "heading-link", href: "#example-of-the-views-attribute", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Example of the ", _jsx(_components.code, { className: "language-auto", children: "views" }), " attribute:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-auto code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "\"views\": [\n" }), _jsx(_components.span, { className: "code-line", children: " {\n" }), _jsx(_components.span, { className: "code-line", children: " \"type\": \"Graph\",\n" }), _jsx(_components.span, { className: "code-line", children: " \"state\": {\n" }), _jsx(_components.span, { className: "code-line", children: " \"graphType\": \"lines\",\n" }), _jsx(_components.span, { className: "code-line", children: " \"group\": \"date\",\n" }), _jsx(_components.span, { className: "code-line", children: " \"series\": [ \"autumn\" ]\n" }), _jsx(_components.span, { className: "code-line", children: " }\n" }), _jsx(_components.span, { className: "code-line", children: " }\n" }), _jsx(_components.span, { className: "code-line", children: " ]\n" })] }) }), "\n", _jsxs(_components.h2, { id: "analysis-of-vis-libraries-graph-specs", children: [_jsx(_components.a, { className: "heading-link", href: "#analysis-of-vis-libraries-graph-specs", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Analysis of Vis libraries Graph Specs"] }), "\n", _jsx(_components.p, { children: "TODO. Plotly partially covered below." }), "\n", _jsxs(_components.h2, { id: "analysis-of-vis-libraries-data-objects", children: [_jsx(_components.a, { className: "heading-link", href: "#analysis-of-vis-libraries-data-objects", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Analysis of Vis libraries data objects"] }), "\n", _jsx(_components.p, { children: "Focus on \"inline\" data structure - i.e. data structure in memory." }), "\n", _jsx(_components.p, { children: "Motivation for this: need to generate this data structure." }), "\n", _jsxs(_components.h3, { id: "vega", children: [_jsx(_components.a, { className: "heading-link", href: "#vega", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Vega"] }), "\n", _jsxs(_components.p, { children: ["See: ", _jsx(_components.a, { href: "https://github.com/vega/vega/wiki/Data#examples", target: "_blank", rel: "noopener noreferrer", children: "https://github.com/vega/vega/wiki/Data#examples" })] }), "\n", _jsx(_components.p, { children: "Data structure is standard \"array of objects\":" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// note in Vega docs it is put as ..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Also supports simple array of values ", _jsx(_components.code, { className: "language-auto", children: "[1,2,3]" }), " which is implicitly mapped to:"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"data\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"data\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"data\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "3" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Note that internally vega adds ", _jsx(_components.code, { className: "language-auto", children: "_id" }), " to all rows as a unique identifier (cf pandas)."] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// this input" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// internally becomes" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"_id\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"_id\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["You can also add a ", _jsx(_components.code, { className: "language-auto", children: "name" }), " attribute to name the data table and then the data is put in ", _jsx(_components.code, { className: "language-auto", children: "values" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-auto code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "{\n" }), _jsx(_components.span, { className: "code-line", children: " \"name\": \"table\",\n" }), _jsx(_components.span, { className: "code-line", children: " \"values\": [12, 23, 47, 6, 52, 19]\n" }), _jsx(_components.span, { className: "code-line", children: "}\n" })] }) }), "\n", _jsxs(_components.p, { children: ["Finally, inside the overall vega spec you put the data inside a ", _jsx(_components.code, { className: "language-auto", children: "data" }), " property:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-auto code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "{\n" }), _jsx(_components.span, { className: "code-line", children: " \"width\": 400,\n" }), _jsx(_components.span, { className: "code-line", children: " \"height\": 200,\n" }), _jsx(_components.span, { className: "code-line", children: " \"padding\": {\"top\": 10, \"left\": 30, \"bottom\": 30, \"right\": 10},\n" }), _jsx(_components.span, { className: "code-line", children: " \"data\": [\n" }), _jsx(_components.span, { className: "code-line", children: " {\n" }), _jsx(_components.span, { className: "code-line", children: " \"name\": \"table\",\n" }), _jsx(_components.span, { className: "code-line", children: " \"values\": [\n" }), _jsx(_components.span, { className: "code-line", children: " {\"x\": 1, \"y\": 28}, {\"x\": 2, \"y\": 55},\n" }), _jsx(_components.span, { className: "code-line", children: "\t\t\t\t...\n" })] }) }), "\n", _jsxs(_components.p, { children: ["See ", _jsx(_components.a, { href: "https://vega.github.io/vega-editor/?mode=vega", target: "_blank", rel: "noopener noreferrer", children: "https://vega.github.io/vega-editor/?mode=vega" })] }), "\n", _jsxs(_components.h4, { id: "remote-data", children: [_jsx(_components.a, { className: "heading-link", href: "#remote-data", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Remote Data"] }), "\n", _jsx(_components.p, { children: "Looks like a lot like Resource. Assume that data is mapped to inline structure" }), "\n", _jsxs(_components.h3, { id: "vega-lite", children: [_jsx(_components.a, { className: "heading-link", href: "#vega-lite", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Vega-Lite"] }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://vega.github.io/vega-lite/docs/data.html", target: "_blank", rel: "noopener noreferrer", children: "https://vega.github.io/vega-lite/docs/data.html" }) }), "\n", _jsx(_components.p, { children: "Same as Vega except that:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "data" }), " is an object not an array – only one data source allowed", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Will be given the name ", _jsx(_components.code, { className: "language-auto", children: "source" }), " when converting to Vega"] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["Only one property allowed: ", _jsx(_components.code, { className: "language-auto", children: "values" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["And for remote data: ", _jsx(_components.code, { className: "language-auto", children: "url" }), " and ", _jsx(_components.code, { className: "language-auto", children: "format" })] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "plotly", children: [_jsx(_components.a, { className: "heading-link", href: "#plotly", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Plotly"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "http://help.plot.ly/json-chart-schema/", target: "_blank", rel: "noopener noreferrer", children: "http://help.plot.ly/json-chart-schema/" }), "\n", _jsx(_components.a, { href: "https://plot.ly/javascript/reference/", target: "_blank", rel: "noopener noreferrer", children: "https://plot.ly/javascript/reference/" })] }), "\n", _jsx(_components.p, { children: "The Plotly model does not separate the data out quite as cleanly as vega does. The structure for Plotly json specs is as follows:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Oriented around \"series\"" }), "\n", _jsxs(_components.li, { children: ["Each series includes its data ", _jsx(_components.strong, { children: "plus" }), " the spec for the graph", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["The data is stored in two attributes ", _jsx(_components.code, { className: "language-auto", children: "x" }), " and ", _jsx(_components.code, { className: "language-auto", children: "y" })] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["Separate ", _jsx(_components.code, { className: "language-auto", children: "layout" }), " property giving overall layout (e.g. margins, titles etc)"] }), "\n"] }), "\n", _jsx(_components.p, { children: "To give a sense of how it works this is the JS for creating a Plotly graph:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsx(_components.code, { className: "language-javascript code-highlight", children: _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "Plotly" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "plot" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'graphDiv'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " data", _jsx(_components.span, { className: "token punctuation", children: "," }), " layout", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), "\n", _jsxs(_components.h4, { id: "examples", children: [_jsx(_components.a, { className: "heading-link", href: "#examples", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Examples"] }), "\n", _jsxs(_components.p, { children: ["From ", _jsx(_components.a, { href: "http://help.plot.ly/json-chart-schema/", target: "_blank", rel: "noopener noreferrer", children: "http://help.plot.ly/json-chart-schema/" }), " and links therein:"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t", _jsx(_components.span, { className: "token string-property property", children: "\"data\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t", _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t\t", _jsx(_components.span, { className: "token string", children: "\"giraffes\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t\t", _jsx(_components.span, { className: "token string", children: "\"orangutans\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t\t", _jsx(_components.span, { className: "token string", children: "\"monkeys\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t\t", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t\t", _jsx(_components.span, { className: "token number", children: "14" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t\t", _jsx(_components.span, { className: "token number", children: "23" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t\t", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"bar\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t\t", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"name\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"SF Zoo\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"marker\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"color\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"rgba(55, 128, 191, 0.6)\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"line\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"color\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"rgba(55, 128, 191, 1.0)\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"width\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"giraffes\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"orangutans\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"monkeys\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token number", children: "14" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token number", children: "23" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"bar\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"orientation\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"h\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"uid\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"a4a45d\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"name\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"LA Zoo\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"marker\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"color\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"rgba(255, 153, 51, 0.6)\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"line\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"color\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"rgba(255, 153, 51, 1.0)\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"width\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"giraffes\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"orangutans\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"monkeys\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token number", children: "18" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token number", children: "29" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"bar\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"orientation\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"h\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"uid\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"d912bc\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] })] }) }), "\n", _jsxs(_components.h2, { id: "appendix-plotly-graph-spec-research", children: [_jsx(_components.a, { className: "heading-link", href: "#appendix-plotly-graph-spec-research", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Appendix: Plotly Graph spec research"] }), "\n", _jsx(_components.p, { children: "We would like users to be able to use Plotly JSON chart schema in their Data Package Views specs so they can take full advantage of Plotly's capabilities." }), "\n", _jsxs(_components.p, { children: ["Here's an example - ", _jsx(_components.a, { href: "https://plot.ly/~Dreamshot/8259/", target: "_blank", rel: "noopener noreferrer", children: "https://plot.ly/~Dreamshot/8259/" })] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"data\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"name\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Col2\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"uid\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"babced\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"fillcolor\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"rgb(224, 102, 102)\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"17087182\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"29354370\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"38760373\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"40912332\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"2000-01-01\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"2001-01-01\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"2002-01-01\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"2003-01-01\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"fill\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tonexty\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"scatter\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"mode\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"none\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"layout\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"autosize\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"yaxis\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"range\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token number", children: "1124750578.9473684" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"linear\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"autorange\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"title\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"title\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Total Number of Websites\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"height\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "500" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"width\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "800" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"xaxis\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"tickformat\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"%Y\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"title\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"...\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"showgrid\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"range\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token number", children: "946702800000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token number", children: "1451624400000" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"date\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"autorange\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "So, the major requirement will be link the plotly data structure with an external data resources in the Data Package View." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Key point: Plotly data is of form:" }) }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token literal-property property", children: "data" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"name\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "x" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token spread operator", children: "..." }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "y" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token spread operator", children: "..." }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "z" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token spread operator", children: "..." }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token comment", children: "// optional" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "We just need a way to bind these …" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token literal-property property", children: "data" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token comment", children: "// by convention this must match the resource - if that is not possible use resource" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "resource" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token spread operator", children: "..." }), _jsx(_components.span, { className: "token punctuation", children: "." }), " ", _jsx(_components.span, { className: "token comment", children: "// only if name cannot match resource" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "x" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"field name ...\"" }), " ", _jsx(_components.span, { className: "token comment", children: "// if this is a string not an array then look it up in the resource ..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "y" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"field name ...\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "z" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"field name ...\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.em, { children: "Using this approach we would support most of Basic, Statistical and 3D charts of Plotly library. We would not support pie chart (labels, values), maps …" }) }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Data manipulations – not supported" }) }), "\n", _jsx(_components.p, { children: "In some examples of Plotly there are manipulations (e.g. filtering) on the raw data. As this is done in Javascript outside of Plotly JSON language we would not be able to support this." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["In the ", _jsx(_components.code, { className: "language-auto", children: "plotlyToPlotly" }), " function:"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "plotlyToPlotly" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "view" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " plotlySpec ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Object" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "assign" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " view", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "spec" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "for" }), " trace ", _jsx(_components.span, { className: "token keyword", children: "in" }), " plotlySpec", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "data" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "resource" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " resource ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "findResourceByNameOrIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "view", _jsx(_components.span, { className: "token punctuation", children: "," }), " trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "resource" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " rowsAsObjects ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " rows ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "getResourceCachedValues" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "resource", _jsx(_components.span, { className: "token punctuation", children: "," }), " rowsAsObjects", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "xField" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "x" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " rows", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "row" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " row", _jsx(_components.span, { className: "token punctuation", children: "[" }), "trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "xField" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "delete" }), " trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "xField" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "yField" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "y" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " rows", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "row" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " row", _jsx(_components.span, { className: "token punctuation", children: "[" }), "trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "yField" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "delete" }), " trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "yField" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "zField" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "z" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " rows", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "row" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " row", _jsx(_components.span, { className: "token punctuation", children: "[" }), "trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "zField" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "delete" }), " trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "zField" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "delete" }), " trace", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "resource" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " plotlySpec\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.h2, { id: "data-transform-research", children: [_jsx(_components.a, { className: "heading-link", href: "#data-transform-research", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Data Transform Research"] }), "\n", _jsxs(_components.h3, { id: "plotly-transforms", children: [_jsx(_components.a, { className: "heading-link", href: "#plotly-transforms", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Plotly Transforms"] }), "\n", _jsx(_components.p, { children: "No libraries for data transform have been found." }), "\n", _jsxs(_components.h3, { id: "vega-transforms", children: [_jsx(_components.a, { className: "heading-link", href: "#vega-transforms", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Vega Transforms"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://github.com/vega/vega/wiki/Data-Transforms", target: "_blank", rel: "noopener noreferrer", children: "https://github.com/vega/vega/wiki/Data-Transforms" }), " - v2"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://vega.github.io/vega/docs/transforms/", target: "_blank", rel: "noopener noreferrer", children: "https://vega.github.io/vega/docs/transforms/" }), " - v3"] }), "\n", _jsx(_components.p, { children: "Vega provided Data Transforms can be used to manipulate datasets before rendering a visualisation. E.g., one may need to perform transformations such as aggregation or filtering (there many types, see link above) of a dataset and display the graph only after that. Another situation would be creating a new dataset by applying various calculations on an old one." }), "\n", _jsxs(_components.p, { children: ["Usually transforms are defined in ", _jsx(_components.code, { className: "language-auto", children: "transform" }), " array inside ", _jsx(_components.code, { className: "language-auto", children: "data" }), " property."] }), "\n", _jsx(_components.p, { children: "\"Transforms that do not filter or generate new data objects can be used within the transform array of a mark definition to specify post-encoding transforms.\"" }), "\n", _jsx(_components.p, { children: "Examples:" }), "\n", _jsxs(_components.h4, { id: "filtering", children: [_jsx(_components.a, { className: "heading-link", href: "#filtering", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Filtering"] }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://vega.github.io/vega-editor/?mode=vega&spec=parallel_coords", target: "_blank", rel: "noopener noreferrer", children: "https://vega.github.io/vega-editor/?mode=vega&spec=parallel_coords" }) }), "\n", _jsxs(_components.p, { children: ["This example filters rows that have both ", _jsx(_components.code, { className: "language-auto", children: "Horsepower" }), " and ", _jsx(_components.code, { className: "language-auto", children: "Miles_per_Gallon" }), " fields."] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"data\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"name\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"cars\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"data/cars.json\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"transform\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"filter\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"test\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"datum.Horsepower && datum.Miles_per_Gallon\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.h4, { id: "geopath-aggregate-lookup-filter-sort-voronoi-and-linkpath", children: [_jsx(_components.a, { className: "heading-link", href: "#geopath-aggregate-lookup-filter-sort-voronoi-and-linkpath", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Geopath, aggregate, lookup, filter, sort, voronoi and linkpath"] }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://vega.github.io/vega-editor/?mode=vega&spec=airports", target: "_blank", rel: "noopener noreferrer", children: "https://vega.github.io/vega-editor/?mode=vega&spec=airports" }) }), "\n", _jsx(_components.p, { children: "This example has a lot of transforms - in some cases there is only transform applied to a dataset, in other cases there are sequence of transforms." }), "\n", _jsxs(_components.p, { children: ["In the first dataset, it applies ", _jsx(_components.code, { className: "language-auto", children: "geopath" }), " transform which maps GeoJSON features to SVG path strings. It uses ", _jsx(_components.code, { className: "language-auto", children: "alberUsa" }), " projection type (", _jsx(_components.a, { href: "https://vega.github.io/vega/docs/projections/", target: "_blank", rel: "noopener noreferrer", children: "more about projection" }), ")."] }), "\n", _jsx(_components.p, { children: "In the second dataset, it applies sum operation on \"count\" field and outputs it as \"flights\" fields." }), "\n", _jsx(_components.p, { children: "In the third dataset:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "it compares its \"iata\" field against \"origin\" field of \"traffic\" dataset. Matching values are outputed as \"traffic\" field." }), "\n", _jsx(_components.li, { children: "Next, it filters out all values that are null." }), "\n", _jsxs(_components.li, { children: ["After that, it applies ", _jsx(_components.code, { className: "language-auto", children: "geo" }), " transform as in the first dataset above."] }), "\n", _jsx(_components.li, { children: "Next, it filters out layout_x and layout_y values that are null." }), "\n", _jsx(_components.li, { children: "Then, it sorts dataset by traffic.flights field in descending order." }), "\n", _jsxs(_components.li, { children: ["After that, it applies ", _jsx(_components.code, { className: "language-auto", children: "voronoi" }), " transform to compute voronoi diagram based on \"layout_x\" and \"layout_y\" fields."] }), "\n"] }), "\n", _jsx(_components.p, { children: "In the last dataset:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "First, it filters values on which there is a signal called \"hover\" (specified in the Vega spec's \"signals\" property) with \"iata\" attribute that matches to the dataset's \"origin\" field." }), "\n", _jsx(_components.li, { children: "Next, it looks up matching values of \"airports\" dataset's \"iata\" field against its \"origin\" and \"destination\" fields. Output fields are saved as \"_source\" and \"_target\"." }), "\n", _jsx(_components.li, { children: "Filters \"_source\" and \"_target\" values that are truthy (not null)." }), "\n", _jsxs(_components.li, { children: ["Finally, linkpath transform creates visual links between nodes (", _jsx(_components.a, { href: "https://vega.github.io/vega/docs/transforms/linkpath/", target: "_blank", rel: "noopener noreferrer", children: "more about linkpath" }), ")."] }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"data\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"name\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"states\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"data/us-10m.json\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"format\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"topojson\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"feature\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"states\"" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"transform\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"geopath\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"projection\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"albersUsa\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"scale\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1200" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"translate\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "450" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "280" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"name\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"traffic\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"data/flights-airport.csv\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"format\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"csv\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"parse\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"auto\"" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"transform\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"aggregate\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"groupby\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"origin\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"summarize\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"field\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"count\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"ops\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"sum\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"as\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"flights\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"name\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"airports\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"data/airports.csv\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"format\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"csv\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"parse\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"auto\"" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"transform\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"lookup\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"on\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"traffic\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"onKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"origin\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"keys\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"iata\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"as\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"traffic\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"filter\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"test\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"datum.traffic != null\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"geo\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"projection\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"albersUsa\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"scale\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1200" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"translate\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "450" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "280" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"lon\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"longitude\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"lat\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"latitude\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"filter\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"test\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"datum.layout_x != null && datum.layout_y != null\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"sort\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"by\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"-traffic.flights\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"voronoi\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"x\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"layout_x\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"y\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"layout_y\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"name\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"routes\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"data/flights-airport.csv\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"format\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"csv\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"parse\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"auto\"" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"transform\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"filter\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"test\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"hover && hover.iata == datum.origin\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"lookup\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"on\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"airports\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"onKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"iata\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"keys\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"origin\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "\"destination\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"as\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"_source\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "\"_target\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"filter\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"test\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"datum._source && datum._target\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token string-property property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"linkpath\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.h4, { id: "further-research-on-vega-transforms", children: [_jsx(_components.a, { className: "heading-link", href: "#further-research-on-vega-transforms", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Further research on Vega transforms"] }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://github.com/vega/vega-dataflow-examples/", target: "_blank", rel: "noopener noreferrer", children: "https://github.com/vega/vega-dataflow-examples/" }) }), "\n", _jsx(_components.p, { children: "It is quite difficult to me to read the code as there is not enough documentation. I have included here the simplest example:" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "vega-dataflow.js" }), " contains Dataflow, all transforms and vega's utilities."] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token doctype", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "html"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "head"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Dataflow CountPattern", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "../../build/vega-dataflow.js", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "style"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token style", children: _jsx(_components.span, { className: "token language-css", children: "\n" }) })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: "body" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token property", children: "margin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token property", children: "font-family" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " Helvetica Neue", _jsx(_components.span, { className: "token punctuation", children: "," }), " Arial", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "14" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: "textarea" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token property", children: "width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "800" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token property", children: "height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "200" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: "pre" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token property", children: "font-family" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " Monaco", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token style", children: _jsx(_components.span, { className: "token language-css", children: " " }) }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "textarea"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "br"] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "input"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "slider", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "range", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "min" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "2", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "max" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "10", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "value" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "4", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" Frequency Threshold", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "br"] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "pre"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "output", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "df" }), " is a Dataflow instance where we register (.add) functions and parameters - as below on line 36-38. The same with adding transforms - lines 40-44. We can pass different parameters to the transforms depending on requirements of each of them. Event handlers can added by using ", _jsx(_components.code, { className: "language-auto", children: ".on" }), " method of the Dataflow instance - lines 46-48."] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " tx ", _jsx(_components.span, { className: "token operator", children: "=" }), " vega", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "transforms" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// all transforms " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " out ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "querySelector" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'#output'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " area ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "querySelector" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'#text'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["area", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"Despite myriad tools for visualizing data, there remains a gap between the notational efficiency of high-level visualization systems and the expressiveness and accessibility of low-level graphical systems.\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "join" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'\\n\\n'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " stopwords ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "\"(i|me|my|myself|we|us|our|ours|ourselves|you|your|yours|yourself|yourselves|he|him|his)\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " get ", _jsx(_components.span, { className: "token operator", children: "=" }), " vega", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "field" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'data'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "readText" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["_", _jsx(_components.span, { className: "token punctuation", children: "," }), " pulse"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " pulse", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "rem" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " pulse", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "source" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " pulse", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "add" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "vega", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "ingest" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "area", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "threshold" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "_" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "var" }), " freq ", _jsx(_components.span, { className: "token operator", children: "=" }), " _", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "freq" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function-variable function", children: "f" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "t" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " t", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), " ", _jsx(_components.span, { className: "token operator", children: ">=" }), " freq", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "f", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "fields" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'count'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " f", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "updatePage" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" out", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerText" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " c1", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "slice" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "sort" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "function" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["a", _jsx(_components.span, { className: "token punctuation", children: "," }), "b"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "b", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " a", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "b", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "text" }), " ", _jsx(_components.span, { className: "token operator", children: ">" }), " a", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "text" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " a", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "text" }), " ", _jsx(_components.span, { className: "token operator", children: ">" }), " b", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "text" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "function" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "t" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " t", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "text" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token string", children: "': '" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " t", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "join" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'\\n'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " df ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["vega", _jsx(_components.span, { className: "token punctuation", children: "." }), "Dataflow"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// create a new Dataflow instance" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// then add various operators into Dataflow instance:" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ft ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "4" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// word frequency threshold" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ff ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "threshold", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "freq" }), _jsx(_components.span, { className: "token operator", children: ":" }), "ft", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" rt ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "readText", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// add a transforms (tx):" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" cp ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "CountPattern" }) }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "field" }), _jsx(_components.span, { className: "token operator", children: ":" }), "get", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "case" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token string", children: "'lower'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "pattern" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token string", children: "'[\\\\w\\']{2,}'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "stopwords" }), _jsx(_components.span, { className: "token operator", children: ":" }), "stopwords", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "pulse" }), _jsx(_components.span, { className: "token operator", children: ":" }), "rt", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" cc ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Collect" }) }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "pulse" }), _jsx(_components.span, { className: "token operator", children: ":" }), "cp", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" fc ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Filter" }) }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "expr" }), _jsx(_components.span, { className: "token operator", children: ":" }), "ff", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "pulse" }), _jsx(_components.span, { className: "token operator", children: ":" }), "cc", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" c1 ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Collect" }) }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "pulse" }), _jsx(_components.span, { className: "token operator", children: ":" }), "fc", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" up ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "updatePage", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "pulse" }), _jsx(_components.span, { className: "token operator", children: ":" }), " c1", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "on" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "events" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "area", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'keyup'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "debounce" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "250" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " rt", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "on" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "events" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'#slider'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'input'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ft", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["_", _jsx(_components.span, { className: "token punctuation", children: "," }), " e"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "run" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "#### Old analysis" }), "\n", _jsxs(_components.p, { children: ["There are number of transforms and they are located in different libraries. Basics are here ", _jsx(_components.a, { href: "https://github.com/vega/vega-dataflow/tree/master/src/transforms", target: "_blank", rel: "noopener noreferrer", children: "https://github.com/vega/vega-dataflow/tree/master/src/transforms" })] }), "\n", _jsxs(_components.p, { children: ["Generally, all data flow happens in the ", _jsx(_components.a, { href: "https://github.com/vega/vega-dataflow", target: "_blank", rel: "noopener noreferrer", children: "vega-dataflow module" }), ". There are lots of complicated operations performed to data input and parameters. Some of transform functions are inherited from another functions/classes which makes difficult to separate them:"] }), "\n", _jsx(_components.p, { children: "Filter function:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Filter" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "params" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Transform" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "call" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function", children: "fastmap" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " params", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " prototype ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "inherits" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Filter" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Transform" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// more code for prototype" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "and Transform is:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Operator" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./Operator'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "inherits", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'vega-util'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token doc-comment comment", children: "/**\n" }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token doc-comment comment", children: " * Abstract class for operators that process data tuples.\n" }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * Subclasses must provide a ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token keyword", children: "@link" }), " transform", _jsx(_components.span, { className: "token punctuation", children: "}" }), " method for operator processing.\n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * ", _jsx(_components.span, { className: "token keyword", children: "@constructor" }), "\n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * ", _jsx(_components.span, { className: "token keyword", children: "@param" }), " ", _jsxs(_components.span, { className: "token class-name", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token operator", children: "*" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsxs(_components.span, { className: "token optional-parameter", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token parameter", children: "init" }), _jsx(_components.span, { className: "token punctuation", children: "]" })] }), " - The initial value for this operator.\n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * ", _jsx(_components.span, { className: "token keyword", children: "@param" }), " ", _jsxs(_components.span, { className: "token class-name", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "object", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsxs(_components.span, { className: "token optional-parameter", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token parameter", children: "params" }), _jsx(_components.span, { className: "token punctuation", children: "]" })] }), " - The parameters for this operator.\n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * ", _jsx(_components.span, { className: "token keyword", children: "@param" }), " ", _jsxs(_components.span, { className: "token class-name", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "Operator", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsxs(_components.span, { className: "token optional-parameter", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token parameter", children: "source" }), _jsx(_components.span, { className: "token punctuation", children: "]" })] }), " - The operator from which to receive pulses.\n"] }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token doc-comment comment", children: " */" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Transform" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["init", _jsx(_components.span, { className: "token punctuation", children: "," }), " params"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Operator" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "call" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " init", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " params", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " prototype ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "inherits" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Transform" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Operator" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token doc-comment comment", children: "/**\n" }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * Overrides ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token keyword", children: "@link" }), " Operator.evaluate", _jsx(_components.span, { className: "token punctuation", children: "}" }), " for transform operators.\n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * Marshalls parameter values and then invokes ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token keyword", children: "@link" }), " transform", _jsx(_components.span, { className: "token punctuation", children: "}" }), ".\n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * ", _jsx(_components.span, { className: "token keyword", children: "@param" }), " ", _jsxs(_components.span, { className: "token class-name", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "Pulse", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token parameter", children: "pulse" }), " - the current dataflow pulse.\n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * ", _jsx(_components.span, { className: "token keyword", children: "@return" }), " ", _jsxs(_components.span, { className: "token class-name", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "Pulse", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " The output pulse (or StopPropagation). A falsy return\n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token doc-comment comment", children: " value (including undefined) will let the input pulse pass through.\n" }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token doc-comment comment", children: " */" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["prototype", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method-variable function-variable method function property-access", children: "evaluate" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "pulse" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "var" }), " params ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "marshall" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "pulse", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "stamp" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" out ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "params", _jsx(_components.span, { className: "token punctuation", children: "," }), " pulse", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" params", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "clear" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " out", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token doc-comment comment", children: "/**\n" }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token doc-comment comment", children: " * Process incoming pulses.\n" }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token doc-comment comment", children: " * Subclasses should override this method to implement transforms.\n" }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * ", _jsx(_components.span, { className: "token keyword", children: "@param" }), " ", _jsxs(_components.span, { className: "token class-name", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "Parameters", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token parameter", children: "_" }), " - The operator parameter values.\n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * ", _jsx(_components.span, { className: "token keyword", children: "@param" }), " ", _jsxs(_components.span, { className: "token class-name", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "Pulse", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token parameter", children: "pulse" }), " - The current dataflow pulse.\n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { className: "token doc-comment comment", children: [" * ", _jsx(_components.span, { className: "token keyword", children: "@return" }), " ", _jsxs(_components.span, { className: "token class-name", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "Pulse", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " The output pulse (or StopPropagation). A falsy return\n"] }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token doc-comment comment", children: " * value (including undefined) will let the input pulse pass through.\n" }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token doc-comment comment", children: " */" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["prototype", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method-variable function-variable method function property-access", children: "transform" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "and as we can see Transform inherits from Operator and so on." }), "\n", _jsx(_components.p, { children: "But some of the transform functions looks independent:" }), "\n", _jsx(_components.p, { children: "Getting cross product:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// filter is an optional function for selectively including tuples in the cross product." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "cross" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["input", _jsx(_components.span, { className: "token punctuation", children: "," }), " a", _jsx(_components.span, { className: "token punctuation", children: "," }), " b", _jsx(_components.span, { className: "token punctuation", children: "," }), " filter"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "var" }), " data ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" t ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" n ", _jsx(_components.span, { className: "token operator", children: "=" }), " input", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" i ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" j", _jsx(_components.span, { className: "token punctuation", children: "," }), " left", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "for" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " i", _jsx(_components.span, { className: "token operator", children: "<" }), "n", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token operator", children: "++" }), "i", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" t", _jsx(_components.span, { className: "token punctuation", children: "[" }), "a", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " left ", _jsx(_components.span, { className: "token operator", children: "=" }), " input", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "for" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "j", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " j", _jsx(_components.span, { className: "token operator", children: "<" }), "n", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token operator", children: "++" }), "j", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" t", _jsx(_components.span, { className: "token punctuation", children: "[" }), "b", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " input", _jsx(_components.span, { className: "token punctuation", children: "[" }), "j", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token function", children: "filter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "t", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" data", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "push" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token function", children: "ingest" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "t", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" t ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" t", _jsx(_components.span, { className: "token punctuation", children: "[" }), "a", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " left", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " data", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Other transforms:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Linkpath ", _jsx(_components.a, { href: "https://github.com/vega/vega-encode", target: "_blank", rel: "noopener noreferrer", children: "https://github.com/vega/vega-encode" })] }), "\n", _jsxs(_components.li, { children: ["Geo ", _jsx(_components.a, { href: "https://github.com/vega/vega-geo", target: "_blank", rel: "noopener noreferrer", children: "https://github.com/vega/vega-geo" })] }), "\n", _jsxs(_components.li, { children: ["Hierarchical ", _jsx(_components.a, { href: "https://github.com/vega/vega-hierarchy/tree/master/definitions", target: "_blank", rel: "noopener noreferrer", children: "https://github.com/vega/vega-hierarchy/tree/master/definitions" })] }), "\n", _jsxs(_components.li, { children: ["voronoi ", _jsx(_components.a, { href: "https://github.com/vega/vega-voronoi", target: "_blank", rel: "noopener noreferrer", children: "https://github.com/vega/vega-voronoi" })] }), "\n", _jsxs(_components.li, { children: ["crossfilter ", _jsx(_components.a, { href: "https://github.com/vega/vega-crossfilter", target: "_blank", rel: "noopener noreferrer", children: "https://github.com/vega/vega-crossfilter" })] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "dp-pipelines-transforms", children: [_jsx(_components.a, { className: "heading-link", href: "#dp-pipelines-transforms", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "DP Pipelines transforms"] }), "\n", _jsx(_components.p, { children: "DPP provides number of transforms that can be applied to a dataset. However, those transforms cannot be processed inside browsers as the library requires Python scripts to run." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Below is a copy-paste from DPP docs:" }) }), "\n", _jsxs(_components.h4, { id: "concatenate", children: [_jsx(_components.a, { className: "heading-link", href: "#concatenate", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), _jsx(_components.em, { children: _jsx(_components.strong, { children: _jsx(_components.code, { className: "language-auto", children: "concatenate" }) }) })] }), "\n", _jsx(_components.p, { children: "Concatenates a number of streamed resources and converts them to a single resource." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.em, { children: "Parameters" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "sources" }), " - Which resources to concatenate. Same semantics as ", _jsx(_components.code, { className: "language-auto", children: "resources" }), " in ", _jsx(_components.code, { className: "language-auto", children: "stream_remote_resources" }), "."] }), "\n", _jsx(_components.p, { children: "If omitted, all resources in datapackage are concatenated." }), "\n", _jsx(_components.p, { children: "Resources to concatenate must appear in consecutive order within the data-package." }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "target" }), " - Target resource to hold the concatenated data. Should define at least the following properties:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "name" }), " - name of the resource"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "path" }), " - path in the data-package for this file."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["If omitted, the target resource will receive the name ", _jsx(_components.code, { className: "language-auto", children: "concat" }), " and will be saved at ", _jsx(_components.code, { className: "language-auto", children: "data/concat.csv" }), " in the datapackage."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "fields" }), " - Mapping of fields between the sources and the target, so that the keys are the ", _jsx(_components.em, { children: "target" }), " field names, and values are lists of ", _jsx(_components.em, { children: "source" }), " field names."] }), "\n", _jsx(_components.p, { children: "This mapping is used to create the target resources schema." }), "\n", _jsxs(_components.p, { children: ["Note that the target field name is ", _jsx(_components.em, { children: "always" }), " assumed to be mapped to itself."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.em, { children: "Example" }), ":"] }), "\n", _jsx(_components.pre, { className: "language-yaml", children: _jsxs(_components.code, { className: "language-yaml code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "-" }), " ", _jsx(_components.span, { className: "token key atrule", children: "run" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " concatenate\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "parameters" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " multi", _jsx(_components.span, { className: "token punctuation", children: "-" }), "year", _jsx(_components.span, { className: "token punctuation", children: "-" }), "report\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "path" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " data/multi", _jsx(_components.span, { className: "token punctuation", children: "-" }), "year", _jsx(_components.span, { className: "token punctuation", children: "-" }), "report.csv\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "sources" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'report-year-20[0-9]{2}'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "fields" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "activity" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "amount" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'2009_amount'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'Amount'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'AMOUNT [USD]'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'$$$'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " \n"] })] }) }), "\n", _jsxs(_components.p, { children: ["In this example we concatenate all resources that look like ", _jsx(_components.code, { className: "language-auto", children: "report-year-" }), ", and output them to the ", _jsx(_components.code, { className: "language-auto", children: "multi-year-report" }), " resource."] }), "\n", _jsx(_components.p, { children: "The output contains two fields:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "activity" }), " , which is called ", _jsx(_components.code, { className: "language-auto", children: "activity" }), " in all sources"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "amount" }), ", which has varying names in different resources (e.g. ", _jsx(_components.code, { className: "language-auto", children: "Amount" }), ", ", _jsx(_components.code, { className: "language-auto", children: "2009_amount" }), ", ", _jsx(_components.code, { className: "language-auto", children: "amount" }), " etc.)"] }), "\n"] }), "\n", _jsxs(_components.h4, { id: "join", children: [_jsx(_components.a, { className: "heading-link", href: "#join", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), _jsx(_components.em, { children: _jsx(_components.strong, { children: _jsx(_components.code, { className: "language-auto", children: "join" }) }) })] }), "\n", _jsx(_components.p, { children: "Joins two streamed resources." }), "\n", _jsxs(_components.p, { children: ["\"Joining\" in our case means taking the ", _jsx(_components.em, { children: "target" }), " resource, and adding fields to each of its rows by looking up data in the ", _jsx(_components.em, { children: "source" }), " resource."] }), "\n", _jsxs(_components.p, { children: ["A special case for the join operation is when there is no target stream, and all unique rows from the source are used to create it.\nThis mode is called ", _jsx(_components.em, { children: "deduplication" }), " mode - The target resource will be created and deduplicated rows from the source will be added to it."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.em, { children: "Parameters" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "source" }), " - information regarding the ", _jsx(_components.em, { children: "source" }), " resource"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "name" }), " - name of the resource"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "key" }), " - One of", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "List of field names which should be used as the lookup key" }), "\n", _jsxs(_components.li, { children: ["String, which would be interpreted as a Python format string used to form the key (e.g. ", _jsx(_components.code, { className: "language-auto", children: "{}:{field_name_2}" }), ")"] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "delete" }), " - delete from data-package after joining (", _jsx(_components.code, { className: "language-auto", children: "False" }), " by default)"] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "target" }), " - Target resource to hold the joined data. Should define at least the following properties:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "name" }), " - as in ", _jsx(_components.code, { className: "language-auto", children: "source" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "key" }), " - as in ", _jsx(_components.code, { className: "language-auto", children: "source" }), ", or ", _jsx(_components.code, { className: "language-auto", children: "null" }), " for creating the target resource and performing ", _jsx(_components.em, { children: "deduplication" }), "."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "fields" }), " - mapping of fields from the source resource to the target resource.\nKeys should be field names in the target resource.\nValues can define two attributes:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "name" }), " - field name in the source (by default is the same as the target field name)"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "aggregate" }), " - aggregation strategy (how to handle multiple ", _jsx(_components.em, { children: "source" }), " rows with the same key). Can take the following options:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "sum" }), " - summarise aggregated values.\nFor numeric values it's the arithmetic sum, for strings the concatenation of strings and for other types will error."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "avg" }), " - calculate the average of aggregated values."] }), "\n", _jsx(_components.p, { children: "For numeric values it's the arithmetic average and for other types will err." }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "max" }), " - calculate the maximum of aggregated values."] }), "\n", _jsx(_components.p, { children: "For numeric values it's the arithmetic maximum, for strings the dictionary maximum and for other types will error." }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "min" }), " - calculate the minimum of aggregated values."] }), "\n", _jsx(_components.p, { children: "For numeric values it's the arithmetic minimum, for strings the dictionary minimum and for other types will error." }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "first" }), " - take the first value encountered"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "last" }), " - take the last value encountered"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "count" }), " - count the number of occurrences of a specific key\nFor this method, specifying ", _jsx(_components.code, { className: "language-auto", children: "name" }), " is not required. In case it is specified, ", _jsx(_components.code, { className: "language-auto", children: "count" }), " will count the number of non-null values for that source field."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "set" }), " - collect all distinct values of the aggregated field, unordered"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "array" }), " - collect all values of the aggregated field, in order of appearance"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "any" }), " - pick any value."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["By default, ", _jsx(_components.code, { className: "language-auto", children: "aggregate" }), " takes the ", _jsx(_components.code, { className: "language-auto", children: "any" }), " value."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["If neither ", _jsx(_components.code, { className: "language-auto", children: "name" }), " or ", _jsx(_components.code, { className: "language-auto", children: "aggregate" }), " need to be specified, the mapping can map to the empty object ", _jsx(_components.code, { className: "language-auto", children: "{}" }), " or to ", _jsx(_components.code, { className: "language-auto", children: "null" }), "."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "full" }), " - Boolean,"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["If ", _jsx(_components.code, { className: "language-auto", children: "True" }), " (the default), failed lookups in the source will result in \"null\" values at the source."] }), "\n", _jsxs(_components.li, { children: ["if ", _jsx(_components.code, { className: "language-auto", children: "False" }), ", failed lookups in the source will result in dropping the row from the target."] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsxs(_components.em, { children: ["Important: the \"source\" resource ", _jsx(_components.strong, { children: "must" }), " appear before the \"target\" resource in the data-package."] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.em, { children: "Examples" }), ":"] }), "\n", _jsx(_components.pre, { className: "language-yaml", children: _jsxs(_components.code, { className: "language-yaml code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "-" }), " ", _jsx(_components.span, { className: "token key atrule", children: "run" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " join\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "parameters" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "source" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " world_population\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "key" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"country_code\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "delete" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " yes\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " country_gdp_2015\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "key" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"CC\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "fields" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "population" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"census_2015\"" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "full" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token boolean important", children: "true" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "The above example aims to create a package containing the GDP and Population of each country in the world." }), "\n", _jsxs(_components.p, { children: ["We have one resource (", _jsx(_components.code, { className: "language-auto", children: "world_population" }), ") with data that looks like:"] }), "\n", _jsx(_components.div, { className: "overflow-x-auto", children: _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "country_code" }), _jsx(_components.th, { children: "country_name" }), _jsx(_components.th, { children: "census_2000" }), _jsx(_components.th, { children: "census_2015" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "UK" }), _jsx(_components.td, { children: "United Kingdom" }), _jsx(_components.td, { children: "58857004" }), _jsx(_components.td, { children: "64715810" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "…" }), _jsx(_components.td, {}), _jsx(_components.td, {}), _jsx(_components.td, {})] })] })] }) }), "\n", _jsxs(_components.p, { children: ["And another resource (", _jsx(_components.code, { className: "language-auto", children: "country_gdp_2015" }), ") with data that looks like:"] }), "\n", _jsx(_components.div, { className: "overflow-x-auto", children: _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "CC" }), _jsx(_components.th, { children: "GDP (£m)" }), _jsx(_components.th, { children: "Net Debt (£m)" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "UK" }), _jsx(_components.td, { children: "1832318" }), _jsx(_components.td, { children: "1606600" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "…" }), _jsx(_components.td, {}), _jsx(_components.td, {})] })] })] }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { className: "language-auto", children: "join" }), " command will match rows in both datasets based on the ", _jsx(_components.code, { className: "language-auto", children: "country_code" }), " / ", _jsx(_components.code, { className: "language-auto", children: "CC" }), " fields, and then copying the value in the ", _jsx(_components.code, { className: "language-auto", children: "census_2015" }), " field into a new ", _jsx(_components.code, { className: "language-auto", children: "population" }), " field."] }), "\n", _jsxs(_components.p, { children: ["The resulting data package will have the ", _jsx(_components.code, { className: "language-auto", children: "world_population" }), " resource removed and the ", _jsx(_components.code, { className: "language-auto", children: "country_gdp_2015" }), " resource looking like:"] }), "\n", _jsx(_components.div, { className: "overflow-x-auto", children: _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "CC" }), _jsx(_components.th, { children: "GDP (£m)" }), _jsx(_components.th, { children: "Net Debt (£m)" }), _jsx(_components.th, { children: "population" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "UK" }), _jsx(_components.td, { children: "1832318" }), _jsx(_components.td, { children: "1606600" }), _jsx(_components.td, { children: "64715810" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "…" }), _jsx(_components.td, {}), _jsx(_components.td, {}), _jsx(_components.td, {})] })] })] }) }), "\n", _jsx(_components.p, { children: "A more complex example:" }), "\n", _jsx(_components.pre, { className: "language-yaml", children: _jsxs(_components.code, { className: "language-yaml code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "-" }), " ", _jsx(_components.span, { className: "token key atrule", children: "run" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " join\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "parameters" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "source" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " screen_actor_salaries\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "key" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"{production} ({year})\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " mgm_movies\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "key" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"{title}\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "fields" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "num_actors" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "aggregate" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'count'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "average_salary" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " salary\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "aggregate" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'avg'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "total_salaries" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " salary\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "aggregate" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'sum'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token key atrule", children: "full" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token boolean important", children: "false" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "This example aims to analyse salaries for screen actors in the MGM studios." }), "\n", _jsxs(_components.p, { children: ["Once more, we have one resource (", _jsx(_components.code, { className: "language-auto", children: "screen_actor_salaries" }), ") with data that looks like:"] }), "\n", _jsx(_components.div, { className: "overflow-x-auto", children: _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "year" }), _jsx(_components.th, { children: "production" }), _jsx(_components.th, { children: "actor" }), _jsx(_components.th, { children: "salary" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "2016" }), _jsx(_components.td, { children: "Vertigo 2" }), _jsx(_components.td, { children: "Mr. T" }), _jsx(_components.td, { children: "15000000" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "2016" }), _jsx(_components.td, { children: "Vertigo 2" }), _jsx(_components.td, { children: "Robert Downey Jr." }), _jsx(_components.td, { children: "7000000" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "2015" }), _jsx(_components.td, { children: "The Fall - Resurrection" }), _jsx(_components.td, { children: "Jeniffer Lawrence" }), _jsx(_components.td, { children: "18000000" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "2015" }), _jsx(_components.td, { children: "Alf - The Return to Melmack" }), _jsx(_components.td, { children: "The Rock" }), _jsx(_components.td, { children: "12000000" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "…" }), _jsx(_components.td, {}), _jsx(_components.td, {}), _jsx(_components.td, {})] })] })] }) }), "\n", _jsxs(_components.p, { children: ["And another resource (", _jsx(_components.code, { className: "language-auto", children: "mgm_movies" }), ") with data that looks like:"] }), "\n", _jsx(_components.div, { className: "overflow-x-auto", children: _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "title" }), _jsx(_components.th, { children: "director" }), _jsx(_components.th, { children: "producer" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Vertigo 2 (2016)" }), _jsx(_components.td, { children: "Lindsay Lohan" }), _jsx(_components.td, { children: "Lee Ka Shing" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "iRobot - The Movie (2018)" }), _jsx(_components.td, { children: "Mr. T" }), _jsx(_components.td, { children: "Mr. T" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "…" }), _jsx(_components.td, {}), _jsx(_components.td, {})] })] })] }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { className: "language-auto", children: "join" }), " command will match rows in both datasets based on the movie name and production year. Notice how we overcome incompatible fields by using different key patterns."] }), "\n", _jsx(_components.p, { children: "The resulting dataset could look like:" }), "\n", _jsx(_components.div, { className: "overflow-x-auto", children: _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "title" }), _jsx(_components.th, { children: "director" }), _jsx(_components.th, { children: "producer" }), _jsx(_components.th, { children: "num_actors" }), _jsx(_components.th, { children: "average_salary" }), _jsx(_components.th, { children: "total_salaries" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Vertigo 2 (2016)" }), _jsx(_components.td, { children: "Lindsay Lohan" }), _jsx(_components.td, { children: "Lee Ka Shing" }), _jsx(_components.td, { children: "2" }), _jsx(_components.td, { children: "11000000" }), _jsx(_components.td, { children: "22000000" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "…" }), _jsx(_components.td, {}), _jsx(_components.td, {}), _jsx(_components.td, {}), _jsx(_components.td, {}), _jsx(_components.td, {})] })] })] }) }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h3, { id: "vega-dataflow-usage-for-dp-views", children: [_jsx(_components.a, { className: "heading-link", href: "#vega-dataflow-usage-for-dp-views", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Vega Dataflow usage for DP views"] }), "\n", _jsx(_components.p, { children: "Vega has quite a lot of data transform functions available, however, most of them require complicated JSON descriptor to use. Although we may implement them in the future, at the moment we could start with the most basic and essential ones:" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "List of transforms that we could use:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Aggregate" }), "\n", _jsx(_components.li, { children: "Filter" }), "\n", _jsx(_components.li, { children: "Formula (applies given formula to dataset)" }), "\n", _jsx(_components.li, { children: "Sample" }), "\n"] }), "\n", _jsxs(_components.h4, { id: "aggregate-example", children: [_jsx(_components.a, { className: "heading-link", href: "#aggregate-example", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Aggregate example"] }), "\n", _jsx(_components.p, { children: "We have dataset with 4 fields - a, b, c and d. Lets apply different aggregation methods on them - count, sum, min and max:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " vegadataflow ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "require" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'./build/vega-dataflow.js'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " tx ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "transforms" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" changeset ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "changeset" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " data ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.76" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.14" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.05" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.79" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.19" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "21.29" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.19" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.92" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.33" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "22.9" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.52" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "21.12" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.15" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.72" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.04" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.31" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.93" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "18.09" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16.99" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.01" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " a ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "field" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'a'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" b ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "field" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'b'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" c ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "field" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'c'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" d ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "field" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'d'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " df ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), "Dataflow"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" col ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Collect" }) }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" agg ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Aggregate" }) }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "fields" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "a", _jsx(_components.span, { className: "token punctuation", children: "," }), " b", _jsx(_components.span, { className: "token punctuation", children: "," }), " c", _jsx(_components.span, { className: "token punctuation", children: "," }), " d", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "ops" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'count'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'sum'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'min'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'max'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "pulse" }), _jsx(_components.span, { className: "token operator", children: ":" }), " col\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" out ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Collect" }) }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "pulse" }), _jsx(_components.span, { className: "token operator", children: ":" }), " agg", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: ["df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "pulse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "col", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function", children: "changeset" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "insert" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "run" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "dir" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "out", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Output:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "_id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "7" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "count_a" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "sum_b" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "103.14" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "min_c" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16.99" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "max_d" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "21.12" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] })] }) }), "\n", _jsxs(_components.h4, { id: "filter-example", children: [_jsx(_components.a, { className: "heading-link", href: "#filter-example", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Filter example"] }), "\n", _jsxs(_components.p, { children: ["Using the dataset from example above, lets filter values of field ", _jsx(_components.code, { className: "language-auto", children: "a" }), " that are not greater than 19:"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " vegadataflow ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "require" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'./build/vega-dataflow.js'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " tx ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "transforms" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" changeset ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "changeset" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " data ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.76" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.14" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.05" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.79" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.19" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "21.29" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.19" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.92" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.33" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "22.9" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.52" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "21.12" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.15" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.72" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.04" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.31" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.93" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "18.09" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16.99" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.01" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " a ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "field" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'a'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " filter1 ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "accessor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "d" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " d", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "a" }), " ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "19" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'a'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " df ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), "Dataflow"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ex ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" col ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Collect" }) }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" fil ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Filter" }) }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "expr" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ex", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "pulse" }), _jsx(_components.span, { className: "token operator", children: ":" }), " col", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" out ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Collect" }) }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "pulse" }), _jsx(_components.span, { className: "token operator", children: ":" }), " fil", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: ["df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "pulse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "col", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function", children: "changeset" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "insert" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "update" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "ex", _jsx(_components.span, { className: "token punctuation", children: "," }), " filter1", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "run" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "out", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" })] }) }), "\n", _jsx(_components.p, { children: "Output:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "a" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.19" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "b" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "21.29" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "c" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.19" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "d" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.92" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "_id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "3" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "a" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.33" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "b" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "22.9" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "c" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.52" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "d" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "21.12" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "_id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "4" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "a" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.15" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "b" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.72" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "c" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.04" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "d" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.31" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "_id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "5" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] })] }) }), "\n", _jsxs(_components.h4, { id: "formula-example", children: [_jsx(_components.a, { className: "heading-link", href: "#formula-example", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Formula example"] }), "\n", _jsx(_components.p, { children: "Using the same dataset, lets apply mapping on a field:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " vegadataflow ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "require" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'./build/vega-dataflow.js'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " tx ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "transforms" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" changeset ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "changeset" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " data ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.76" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.14" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.05" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.79" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.19" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "21.29" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.19" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.92" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.33" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "22.9" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.52" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "21.12" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.15" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20.72" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.04" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "19.31" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"a\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.93" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"b\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "18.09" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"c\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "16.99" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"d\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "17.01" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " df ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), "Dataflow"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" e ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "field" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'e'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" f ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "field" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'f'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" formula1 ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "accessor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "d" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " d", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "a" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'a'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" formula2 ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "accessor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "d" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " d", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "b" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'b'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" col ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Collect" }) }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" fa ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Formula" }) }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "expr" }), _jsx(_components.span, { className: "token operator", children: ":" }), " formula1", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword module", children: "as" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'e'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "pulse" }), _jsx(_components.span, { className: "token operator", children: ":" }), " col", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" fb ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Formula" }) }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "expr" }), _jsx(_components.span, { className: "token operator", children: ":" }), " formula2", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword module", children: "as" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'f'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "pulse" }), _jsx(_components.span, { className: "token operator", children: ":" }), " fa", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: ["df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "pulse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "col", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function", children: "changeset" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "insert" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "run" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "col", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "col", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "f", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Output:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-auto code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "[ 177.60000000000002, 191.9, 203.29999999999998, 201.5, 179.3 ]\n" }), _jsx(_components.span, { className: "code-line", children: "[ 2.0140000000000002, 2.129, 2.29, 2.072, 1.809 ]\n" })] }) }), "\n", _jsxs(_components.h4, { id: "sample-example", children: [_jsx(_components.a, { className: "heading-link", href: "#sample-example", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Sample example"] }), "\n", _jsx(_components.p, { children: "Lets create a dataset with 100 rows and take a sample of 10 from it:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " vegadataflow ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "require" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'./build/vega-dataflow.js'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " tx ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "transforms" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" changeset ", _jsx(_components.span, { className: "token operator", children: "=" }), " vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "changeset" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " n ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" sampleSize ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" data ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Array" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "n", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" i", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword control-flow", children: "for" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "i", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " i", _jsx(_components.span, { className: "token operator", children: "<" }), "n", _jsx(_components.span, { className: "token punctuation", children: ";" }), " i", _jsx(_components.span, { className: "token operator", children: "++" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " data", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "v" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "random" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " df ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["vegadataflow", _jsx(_components.span, { className: "token punctuation", children: "." }), "Dataflow"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" s ", _jsx(_components.span, { className: "token operator", children: "=" }), " df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Sample" }) }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "size" }), _jsx(_components.span, { className: "token operator", children: ":" }), " sampleSize", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: ["df", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "pulse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "s", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function", children: "changeset" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "insert" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "run" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "s", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Output:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-auto code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "[ \n" }), _jsx(_components.span, { className: "code-line", children: " { v: 0.3332451883830292, _id: 69 },\n" }), _jsx(_components.span, { className: "code-line", children: " { v: 0.2874480689159735, _id: 3 },\n" }), _jsx(_components.span, { className: "code-line", children: " { v: 0.18009915754527817, _id: 41 },\n" }), _jsx(_components.span, { className: "code-line", children: " { v: 0.10513776386462825, _id: 27 },\n" }), _jsx(_components.span, { className: "code-line", children: " { v: 0.4972760501252764, _id: 35 },\n" }), _jsx(_components.span, { className: "code-line", children: " { v: 0.757859721485594, _id: 67 },\n" }), _jsx(_components.span, { className: "code-line", children: " { v: 0.248170225498199, _id: 64 },\n" }), _jsx(_components.span, { className: "code-line", children: " { v: 0.431513510601889, _id: 28 },\n" }), _jsx(_components.span, { className: "code-line", children: " { v: 0.07281378713091247, _id: 37 },\n" }), _jsx(_components.span, { className: "code-line", children: " { v: 0.9543216903991236, _id: 33 } \n" }), _jsx(_components.span, { className: "code-line", children: "]\n" })] }) }), "\n", _jsxs(_components.h3, { id: "suggestion-on-usage-from-datapackagejson", children: [_jsx(_components.a, { className: "heading-link", href: "#suggestion-on-usage-from-datapackagejson", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Suggestion on usage from datapackage.json"] }), "\n", _jsx(_components.p, { children: "Our current simple view layout:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'sample'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "resource" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "specType" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'simple'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "spec" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'line'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "group" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'a'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "series" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'b'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'c'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["We could add ", _jsx(_components.code, { className: "language-auto", children: "transform" }), " property that would be a specification for transforms to be applied. Each transform would have slightly different properties:"] }), "\n", _jsxs(_components.h4, { id: "aggregate", children: [_jsx(_components.a, { className: "heading-link", href: "#aggregate", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Aggregate"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "transform" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'aggregate'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "fields" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'a'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'b'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "operations" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'sum'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'min'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["For ", _jsx(_components.code, { className: "language-auto", children: "aggregate" }), " transform, a publisher should pass a field name and an operation to be applied. Operations should be one of ", _jsx(_components.a, { href: "https://vega.github.io/vega/docs/transforms/aggregate/", target: "_blank", rel: "noopener noreferrer", children: "https://vega.github.io/vega/docs/transforms/aggregate/" })] }), "\n", _jsxs(_components.h4, { id: "filter", children: [_jsx(_components.a, { className: "heading-link", href: "#filter", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Filter"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "transform" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'filter'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "expr" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'data.fieldName > 10'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["For ", _jsx(_components.code, { className: "language-auto", children: "filter" }), " type expression should evaluate to true or false so only truthy values will be kept."] }), "\n", _jsxs(_components.h4, { id: "formula", children: [_jsx(_components.a, { className: "heading-link", href: "#formula", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Formula"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "transform" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'formula'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "expr" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'data.fieldName * 2'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'data.fieldName + 10'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "as" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'x'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'y'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["For ", _jsx(_components.code, { className: "language-auto", children: "formula" }), " type, a field will be mapped with given expression and output will be stored in new fields that are specified in ", _jsx(_components.code, { className: "language-auto", children: "as" }), " property."] }), "\n", _jsxs(_components.h4, { id: "sample", children: [_jsx(_components.a, { className: "heading-link", href: "#sample", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Sample"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "transform" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'sample'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "size" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'some integer'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["In ", _jsx(_components.code, { className: "language-auto", children: "sample" }), " type, only size of a sample is needed."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };