Why F2 Chooses JSX for Mobile Data Visualization: Benefits and Insights

From Graphic Grammar

Graphic grammar is the core theory of F2 data visualization, describing any statistical chart through an abstract syntax. The basic grammar components are:

DATA : Generate visual encoding from a dataset.

TRANS : Variable transformation (e.g., rank).

SCALE : Metric transformation (e.g., log).

COORD : Define coordinate system (e.g., polar).

ELEMENT : Graphic elements (e.g., point) and their aesthetic attributes (e.g., color).

GUIDE : Auxiliary elements (e.g., axis, legend).

Using a data structure, the grammar can be expressed as:

{
  data: [
    {"category": 1, "value": 4},
    {"category": 2, "value": 6},
    {"category": 3, "value": 10},
    {"category": 4, "value": 3},
    {"category": 5, "value": 7},
    {"category": 6, "value": 8}
  ],
  trans: { value: 'rank' },
  scale: { value: 'linear' },
  coord: 'polar',
  element: {
    "theta": {"field": "category"},
    "radius": {"field": "value"},
    "color": {"field": "category"}
  },
  guide: { axis: { value: {} } }
}

The imperative 3.x API for the same chart looks like:

chart.data([
  {"category": 1, "value": 4},
  {"category": 2, "value": 6},
  {"category": 3, "value": 10},
  {"category": 4, "value": 3},
  {"category": 5, "value": 7},
  {"category": 6, "value": 8}
]);
chart.scale({ value: 'linear' });
chart.coord('polar');
chart.interval('category*value').color('category');
chart.axis({ value: {} });
chart.render();

Although both approaches produce the same result, the imperative API offers greater flexibility because developers can embed custom logic during API calls, which is why F2 originally avoided a pure JSON declaration.

What Is JSX

JSX is not limited to React; it can be used to create data structures via a Babel transform and a custom runtime.

export function jsx(type, config, key) {
  return { key, type, ...config };
}

Example JSX for a chart:

<chart
  data={[{"category":1,"value":4},... ]}
  scale={{ value: 'linear' }}
  coord='polar'
>
  <interval position="x*y" />
  <axis field="x" />
</chart>

After transformation, the structure becomes:

{
  type: "chart",
  data: [],
  coord: "polar",
  children: [
    { type: "interval", position: "x*y" },
    { type: "axis", field: "x" }
  ]
}

Advantages of JSX

1. Programmability

JSX allows embedding expressions directly in the structure, something JSON cannot do.

<chart ...>
  <interval position="x*y" />
  { showAxis ? <axis field="x" formatter={v => v.toFixed(2)} /> : null }
</chart>

2. Strong Extensibility

Custom tags can be introduced without changing the runtime, enabling unlimited extensions.

import { Custom } from './custom';
<chart ...>
  <interval position="x*y" />
  <axis field="x" />
  <Custom ... />
</chart>

3. Stable Tree Structure

Regardless of external parameters, JSX always yields a consistent tree, which is essential for diff algorithms.

{ type: "chart", data: [], coord: "polar", children: [ { type: "interval", position: "x*y" }, { type: "axis", field: "x" } ] }
{ type: "chart", data: [], coord: "polar", children: [ { type: "interval", position: "x*y" }, null ] }

4. Complete Structural Description

JSX retains the JSON‑like description while adding programmability, making it easy to convert back to JSON for machine‑friendly scenarios.

5. Mature Tooling

Both Babel and TypeScript provide stable JSX compilation plugins.

6. Summary

JSX combines the clarity of a JSON description with greater flexibility and extensibility, though its structures are not directly serializable; this limitation can be addressed by higher‑level domain solutions.

JSON‑ification Under JSX

To achieve machine‑friendliness, JSX structures can be transformed into pure JSON by enumerating otherwise dynamic aspects such as formatters.

{
  type: "chart",
  data: [],
  coord: "polar",
  children: [
    { type: "interval", position: "x*y" },
    { type: "customAxis", field: "x", visible: true, formatter: 'toFixed' }
  ]
}

Domain Solutions

For specialized fields like finance, custom formatters and color rules can be encapsulated in domain‑specific components, simplifying repetitive logic.

Future work will extend these ideas to F2, F6, and a new mobile visualization library called FCharts.

Conclusion

Choosing JSX for F2 is driven by its programmability, extensibility, complete structural description, and mature tooling, which together support both current complex business needs and future machine‑friendly scenarios.