Render Function

The most flexible way to visualize data is to create a Render Function.

A render function is written in a superset of Javascript named JSX, which is kind of like a mix of HTML and Javascript. You can read Javascript and JSX tutorials online for a thorough explanation of syntax.

A render function looks like this:

Import data

In this context we are referring to aggregated result data – the results you have already calculated.

Data will come from a compute context, which may be a Pipeline. Your syntax will look something like this:

const data = result?.data; // pulls data from context (more on this later)

But instead, for this demo, we'll use this sample result:

label	seg1	seg2
Touchpoint 1	0.946413	0.999127
Touchpoint 2	0.910542	0.575348
Touchpoint 3	0.983554	0.140352
Touchpoint 4	0.411184	0.091235
Touchpoint 5	0.571217	0.468007
Touchpoint 6	0.423919	0.612313
Touchpoint 7	0.698175	0.070229

We are going to hard-code the above data as JSON:

// in real life, we would pull this from aggregation pipeline insead of hard-coding
let data = [
    { label: "Touchpoint 1", seg1: 0.946413, seg2: 0.999127 },
    { label: "Touchpoint 2", seg1: 0.910542, seg2: 0.575348 },
    { label: "Touchpoint 3", seg1: 0.983554, seg2: 0.140352 },
    { label: "Touchpoint 4", seg1: 0.411184, seg2: 0.091235 },
    { label: "Touchpoint 5", seg1: 0.571217, seg2: 0.468007 },
    { label: "Touchpoint 6", seg1: 0.423919, seg2: 0.612313 },
    { label: "Touchpoint 7", seg1: 0.698175, seg2: 0.070229 },
]

Tweak (post-process) the data if you really need to.

Ideally the result output is already perfect. But if you really want to hack it, you can, in Javascript.

// nullify a data point
data.find(row => row.label === "Touchpoint 4").seg1 = null;

// relabel Touchpoint 7
data.find(row => row.label === "Touchpoint 7").label = "Hi Mom!";

Click here to learn more about post-processing.

Import a visualization library

In this example we'll use ReCharts (recharts.org).

// import the components we want from ReCharts
const { 
    BarChart, 
    Bar, 
    XAxis, 
    YAxis, 
    Tooltip, 
    Legend
} = lib.ReCharts;

Render the visualization

Here we will return a ReCharts BarChart:

// note: see ReCharts documentation for an in-depth explanation of this visualizer
return (
    <BarChart
        width={500}
        height={300}
        data={data}
        barGap={0}
        margin={{ top: 5, right: 30, left: 20, bottom: 50 }}
    >
        <Legend verticalAlign="top" height={30} />
        <XAxis 
            dataKey="label" 
            angle={-45}
            textAnchor="end"
            interval={0}
        />
        <YAxis />
        <Tooltip />
        <Bar name="Segment 1" dataKey="seg1" fill={"#81afb8"} />
        <Bar name="Segment 2" dataKey="seg2" fill={"#1c6d7d"} />
    </BarChart>
)

Here's the result! Try hovering to see the toolip. A crapload of formatting options are available on the ReCharts website.

• Segment 1
• Segment 2

Summary:

Render Functions are a great way to create totally custom visualizations. An author can pull from third-party javascript libraries, or just write in HTML (including SVG) from scratch. Happy coding.

Next steps!

• Build one yerself
• Learn how Export works