How to use vega-embed - 10 common examples

To help you get started, we’ve selected a few vega-embed examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github TwoRavens / TwoRavens / assets / app / modes / explore.js View on Github external
}
        }

        let schema = schemaMap[plotType[0]];
        if (!schema) app.alertError("invalid plot type");
        // console.log(schema);
        let flip = plotflip(plotType);
        json.vars = nodeNames;
        facetSpecifications[i] = fillVegaSchema(schema, json, flip);
    }));

    let specification = facetSpecifications.length === 1
        ? facetSpecifications[0]
        : {vconcat: facetSpecifications, config: {axisY: {minExtent: 30}}}

    vegaEmbed('#plot', specification, {width: 800, height: 600});
}
github hslayers / hslayers-ng / components / sensors / sensors.service.js View on Github external
}
                },
                "mark": { "type": "line", "tooltip": { "content": "data" } },
                "selection": {
                    "selector016": {
                        "bind": "scales",
                        "encodings": [
                            "x",
                            "y"
                        ],
                        "type": "interval"
                    }
                }
            }
            try {
                vegaEmbed(document.querySelector('#chartplace'), chartData);
            } catch (ex) {
                console.warn('Could not create vega chart:', ex);
            }
        }
github chaoss / augur / frontend / src / components / charts / TickChart.vue View on Github external
reloadImage (config) {
      config.data = {"values": this.values}
      vegaEmbed('#' + this.source, config, {tooltip: {offsetY: -110}, mode: 'vega-lite',}) 
    }
  }
github Kanaries / Rath / packages / frontend / src / pages / notebook / subspaces.tsx View on Github external
useEffect(() => {
    if (spaceChart.current && subspaceList.length > 0) {
      embed(spaceChart.current, {
        data: {
          values
        },
        vconcat: [
          {
            mark: 'rect',
            selection: {
              dim: {
                type: 'single',
                on: 'click',
                encodings: ['y']
              }
            },
            encoding: {
              x: { field: 'measureName', type: 'nominal' },
              y: {
github tensorflow / tfjs-vis / tfjs-vis / src / render / confusion_matrix.ts View on Github external
'mark': {'type': 'text', 'baseline': 'middle'},
      'encoding': {
        'text': {
          'condition': {
            'test': 'datum["noFill"] == true',
            'field': 'diagCount',
            'type': 'nominal',
          },
          'field': 'count',
          'type': 'nominal',
        },
      }
    });
  }

  await embed(drawArea, spec, embedOpts);
  return Promise.resolve();
}
github TwoRavens / TwoRavens / assets / app / eventdata / canvases / CanvasResults.js View on Github external
processed = processed.filter(point => point['variable'] === eventdata.aggregationHeadersLabels['dyad'][0]);

                vegaSchema = {
                    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
                    "data": {"values": processed},
                    "mark": "line",
                    "encoding": {
                        "x": {"field": eventdata.aggregationHeadersLabels['date'][0], "type": "temporal", "axis": {"format": "%Y-%m-%d"}},
                        "y": {"field": preferences['melt'], "type": "quantitative"},
                        "color": {"field": "value", "type": "nominal"}
                    }
                };
            }
        }

        vegaEmbed('#plotResults', vegaSchema, {actions: false, width: width, height: height});
    }
}
github tensorflow / tfjs-vis / src / render / barchart.ts View on Github external
'text': {'fontSize': options.fontSize},
      'legend': {
        'labelFontSize': options.fontSize,
        'titleFontSize': options.fontSize,
      }
    },
    'data': {'values': values, 'name': 'values'},
    'mark': 'bar',
    'encoding': {
      'x': {'field': 'index', 'type': xType, 'axis': xAxis},
      'y': {'field': 'value', 'type': yType, 'axis': yAxis}
    }
  };

  await nextFrame();
  const embedRes = await embed(drawArea, spec, embedOpts);
  instances.set(drawArea, {
    view: embedRes.view,
    lastOptions: options,
  });
}
github belfz / tf-polynomial-regression / src / components / DataChart.js View on Github external
createDataChart () {
    const { testData, trainingData, predictions, showTestData } = this.props;
    const trainXs = trainingData.xs.dataSync();
    const trainYs = trainingData.ys.dataSync();
    const testXs = testData.xs.dataSync();
    const testYs = testData.ys.dataSync();
    const trainValues = Array.from(trainYs).map((y, i) => ({trainX: trainXs[i], trainY: trainYs[i], pred: predictions[i]}));
    const values = showTestData ?
      trainValues.concat(Array.from(testYs).map((y, i) => ({testX: testXs[i], testY: testYs[i]})))
      : trainValues;
 
    return renderChart(this.dataChart, createDataSpec(values, showTestData), { actions: false });
  }
github TwoRavens / TwoRavens / assets / app / eventdata / canvases / CanvasDiscover.js View on Github external
vegaEmbed('#plotMax' + plt + count, vegaSchema, {actions: false, width: width, height: height});
            }
        }
        for (var plt in eventdata.discoveryData[eventdata.selectedDataset]["data"]["min"]) {
            for (var count in eventdata.discoveryData[eventdata.selectedDataset]["data"]["min"][plt][0]) {
                let vegaSchema = {
                    "$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
                    "data": {"values": [...melt(eventdata.discoveryData[eventdata.selectedDataset]["data"]["min"][plt][0][count]["data"], ["date"])]},
                    "mark": "line",
                    "encoding": {
                        "x": {"field": "date", "type": "temporal", "axis": {"format": "%Y-%m-%d"}},
                        "y": {"field": "value", "type": "quantitative"},
                        "color": {"field": "variable", "type": "nominal"}
                    }
                };
                vegaEmbed('#plotMin' + plt + count, vegaSchema, {actions: false, width: width, height: height});
            }
        }
    }
}
github tensorflow / tfjs-examples / polynomial-regression-core / ui.js View on Github external
return {'x': xvals[i], 'y': yvals[i]};
   });

   const spec = {
     '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
     'width': 300,
     'height': 300,
     'data': {'values': values},
     'mark': 'point',
     'encoding': {
       'x': {'field': 'x', 'type': 'quantitative'},
       'y': {'field': 'y', 'type': 'quantitative'}
     }
   };

   return renderChart(container, spec, {actions: false});
 }

vega-embed

Publish Vega visualizations as embedded web components.

BSD-3-Clause
Latest version published 2 months ago

Package Health Score

86 / 100
Full package analysis

Popular JavaScript code snippets

Find secure code to use in your application or website