3D & GPU

3D map

Use a 3D map when a spinnable globe or extruded region heights are the story — a choropleth whose regions rise with their values, drawn over a registered map asset. For a flat regional comparison, the 2D choropleth map is cheaper and easier to read. One trap: the map name binds at the series level (series[].map), not only on the coordinate system. WebGL-rendered via echarts-gl and non-portable — a spec using it classifies as dvt Full.

Illustrative 2D stand-in — chart:map3d extrudes region heights on a WebGL globe or region in dvt itself; color stands in for elevation here.

Minimal dvt spec

The panel body for a 3d map. Add an id and title of your own; the sample data is inline, so it renders the moment you paste it into a dvt dashboard. GL series are author-passthrough: the inline series[].data in the spec is what renders — dvt does not bind warehouse query rows into GL series yet, so keep the data inline.

chart:map3d is an ECharts GL type: it renders via WebGL in the browser and requires the echarts-gl module, so the spec is not portable to plain-ECharts environments and classifies as dvt Full — the spec-portability profile, not a separate product edition. GL series have no upstream Apache-core option doc, so dvt passes GL options through validation as-is, and headless render and export (PNG posters, scheduled exports) are unverified for this family.

View spec
{
  "type": "chart:map3d",
  "spec": {
    "series": [
      {
        "type": "map3D",
        "map": "world",
        "data": [
          {
            "name": "United States",
            "value": 82
          },
          {
            "name": "Germany",
            "value": 61
          },
          {
            "name": "Japan",
            "value": 71
          },
          {
            "name": "Brazil",
            "value": 47
          }
        ]
      }
    ]
  }
}

Customize

Every control in dvt's edit tray writes a field of this spec, and the reference below lists every control and ChartSpec field this type accepts.

chart:map3d has no edit-tray controls. dvt passes its ECharts option through as authored, so anything the ECharts option surface accepts can be set under spec.

Chart spec fields

FieldWhat it does
xAxisOne axis, or an array of axes, via AxisSpec: type, name, min, max, scale, log, and label formatting.
yAxisSame shape as xAxis, for the value axis: type, name, min, max, scale, log, and label formatting.
seriesPer-series overrides: type, dataField, name, stack, smooth, itemStyle, lineStyle, areaStyle, label.
legendShow or hide the legend, set its position, and format an aggregated value shown next to each entry.
tooltipChoose which fields appear, a totals row, field order, a custom template, and crosshair behavior.
gridA raw ECharts grid box (left, right, top, bottom, containLabel), passed through unmodified.
funnelRateShow a conversion-rate label on a funnel: step, overall, total, or none, with a precision.
labelData labels: show, position, format, a derived value (percent of total, delta), rotation, size, color.
gridlinesToggle and style gridlines per axis: show, dashed or solid style, width, and color.
bandingAlternating background bands along one axis, to make long rows or columns easier to scan.
plotAreaSet the plot area's background fill and border color.
gridPaddingExplicit left, right, top, and bottom padding around the plot area, each a number or a string.
densityOverall plot density: comfortable (default spacing) or compact (tighter margins).
paletteName a registered color scheme to apply to the series, instead of the default categorical colors.
categoryColorsMap specific category values to explicit colors, overriding the palette for just those categories.
colorRulesApply a color to a data point the first time one of its ordered when conditions matches.
colorScaleA continuous color scale (sequential, diverging, or piecewise) with a scheme, domain, and buckets.
annotationsFixed or computed reference lines, bands, points, or text, placed at an axis value or a stat of a field.
trendlineOverlay a fitted trend line: true for a default linear fit, or an object naming the method and order.
footnotesUp to 50 footnote entries, each a marker plus explanatory text, rendered below the chart.
sourceNoteA single line of source-attribution text rendered below the chart.

Build it in dvt

Every chart type on this site is a few lines of the same declarative JSON spec. Read the full spec format, or connect an AI agent to your warehouse and build one live in the quickstart.

Follow the build

dvt is in founding research. Leave your email and we'll reach out when there's something to see — no newsletters, no noise.

No spam. We use this to reach out directly, nothing else.