Instanced arrow (cone) glyphs placed at grid positions showing direction and magnitude of 2D or 3D vector data. Arrow color maps to magnitude via a configurable color scale, and arrow length scales proportionally. Uses cylinder geometry rendered via instanced drawing for high performance with thousands of arrows.

Subtype

▾

Live Preview

x	y
0	0
0.5	0
1	0
1.5	0
2	0
0	0.5
0.5	0.5
1	0.5
1.5	0.5
2	0.5

{
  "data": [
    {
      "x": 0,
      "y": 0,
      "u": 0.3,
      "v": 0
    },
    {
      "x": 0.5,
      "y": 0,
      "u": 0.2632747685671118,
      "v": 0.1438276615812609
    },
    {
      "x": 1,
      "y": 0,
      "u": 0.1620906917604419,
      "v": 0.25244129544236893
    },
    {
      "x": 1.5,
      "y": 0,
      "u": 0.021221160500310872,
      "v": 0.29924849598121633
    },
    {
      "x": 2,
      "y": 0,
      "u": -0.12484405096414272,
      "v": 0.2727892280477045
    },
    {
      "x": 0,
      "y": 0.5,
      "u": -0.2403430846640801,
      "v": 0.17954164323118693
    },
    {
      "x": 0.5,
      "y": 0.5,
      "u": -0.2969977489801336,
      "v": 0.042336002417960164
    },
    {
      "x": 1,
      "y": 0.5,
      "u": -0.2809370061872389,
      "v": -0.10523496830688595
    },
    {
      "x": 1.5,
      "y": 0.5,
      "u": -0.1960930862590836,
      "v": -0.22704074859237844
    },
    {
      "x": 2,
      "y": 0.5,
      "u": -0.0632387398292339,
      "v": -0.29325903529952907
    },
    {
      "x": 0,
      "y": 1,
      "u": 0.08509865563896787,
      "v": -0.2876772823989415
    },
    {
      "x": 0.5,
      "y": 1,
      "u": 0.212600932287378,
      "v": -0.21166209767111757
    },
    {
      "x": 1,
      "y": 1,
      "u": 0.2880510859951098,
      "v": -0.08382464945967776
    },
    {
      "x": 1.5,
      "y": 1,
      "u": 0.29297628771840706,
      "v": 0.06453599642634465
    },
    {
      "x": 2,
      "y": 1,
      "u": 0.22617067630299137,
      "v": 0.1970959796156367
    },
    {
      "x": 0,
      "y": 1.5,
      "u": 0.10399059535050774,
      "v": 0.28139999303242164
    },
    {
      "x": 0.5,
      "y": 1.5,
      "u": -0.04365001014258406,
      "v": 0.2968074739870145
    },
    {
      "x": 1,
      "y": 1.5,
      "u": -0.1806035708054471,
      "v": 0.23954613378704706
    },
    {
      "x": 1.5,
      "y": 1.5,
      "u": -0.27333907856540307,
      "v": 0.12363554557252697
    },
    {
      "x": 2,
      "y": 1.5,
      "u": -0.29915164685891354,
      "v": -0.02254533613854279
    },
    {
      "x": 0,
      "y": 2,
      "u": -0.2517214587229357,
      "v": -0.16320633326681092
    },
    {
      "x": 0.5,
      "y": 2,
      "u": -0.14266107839879777,
      "v": -0.263908727991501
    },
    {
      "x": 1,
      "y": 2,
      "u": 0.0013277093964152355,
      "v": -0.29999706196521103
    },
    {
      "x": 1.5,
      "y": 2,
      "u": 0.14499142762590175,
      "v": -0.26263565240652853
    },
    {
      "x": 2,
      "y": 2,
      "u": 0.2531561876197476,
      "v": -0.16097187540013047
    }
  ],
  "series": [
    {
      "type": "vectorfield3d",
      "xKey": "x",
      "yKey": "y",
      "uKey": "u",
      "vKey": "v"
    }
  ],
  "title": {
    "text": "3D Vector Field — 2D Grid"
  }
}

Edit JSON above · auto-previews after 0.9 s

Arrow glyphs on a regular 2D grid showing direction and magnitude.

Was this article helpful?