How to use the plottable.Dataset function in plottable

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

github devinit / datahub / src / components / organisms / Charts / components / TreeMap / TreeMap.tsx View on Github external
private updatePlotFromData(treeData: TreeMapData) {
    const data: TreeMapData[] = this.getNodeDescendants(treeData).slice().map(dat => ({ ...dat }));
    data[0].parentId = ''; // make parent node
    const root: HierarchyNode<TreeMapData> = this.createHierarchy(data);
    this.plot.datasets([ new Dataset(this.layout(root).children) ]);
    this.resetDomain(this.props);
  }
github timwis / vizwit / src / components / VizwitBar.js View on Github external
const yScale = new Plottable.Scales.Linear()
    const colorScale = new Plottable.Scales.InterpolatedColor()
      .range(['#5279C7', '#BDCEF0'])

    this.plot = new Plottable.Plots.Bar()
      .addDataset(this.totaledRowsDataset)
      .addDataset(this.filteredRowsDataset)
      .attr('fill', (datum, index, dataset) => dataset.metadata().colorBucket, colorScale)
      .x((datum) => datum.label, xScale)
      .y((datum) => datum.value, yScale)
      .animated(true)
      // .labelsEnabled(true)

    const selectedData = (selected) ? [selected.value] : []
    this.selectedDataset = new Plottable.Dataset(selectedData)
    const rectangle = new Plottable.Plots.Rectangle()
      .addDataset(this.selectedDataset)
      .x((datum) => datum, xScale)
      .y(0)
      .y2((datum) => rectangle.height())
      .attr('fill', '#f99300')
      .attr('opacity', 0.3)

    xScale.innerPadding(0.4) // See https://github.com/palantir/plottable/issues/3426

    const group = new Plottable.Components.Group([ this.plot, rectangle ])

    if (onSelect) {
      const interaction = new Plottable.Interactions.Click()
      interaction.onClick(this.onClickPlot.bind(this))
      interaction.attachTo(this.plot)
github signmeup / signmeup / imports / ui / components / settings-courses / courses-analytics / analytics-graphs / analytics-graphs.js View on Github external
return {
          x: hour,
          y: weekday,
          val: (ticketsByHour[hour] || []).length,
        };
      });
    });

    const xScale = new Plottable.Scales.Category();
    const yScale = new Plottable.Scales.Category();
    const colorScale = new Plottable.Scales.InterpolatedColor();
    colorScale.range(['#eee', '#5279C7']);
    const data = _.flatten(groupedTickets);

    const plot = new Plottable.Plots.Rectangle()
      .addDataset(new Plottable.Dataset(data))
      .x((d) => d.x, xScale)
      .y((d) => d.y, yScale)
      .attr('fill', (d) => d.val, colorScale)
      .attr('stroke', '#fff')
      .attr('stroke-width', 2)
      .renderTo('#week');

    // Initializing tooltip anchor
    const tooltipAnchorSelection = plot.foreground().append('circle');
    tooltipAnchorSelection.attr({
      r: 3,
      opacity: 0,
    });
    const tooltipAnchor = $(tooltipAnchorSelection.node());
    tooltipAnchor.tooltip({
      animation: false,
github devinit / datahub / src / components / organisms / Charts / components / TreeMap / TreeMap.tsx View on Github external
private processData(props: TreeMapProps) {
    if (props.data && props.data.length) {
      this.layout = treemap<TreeMapData>()
        .size([ props.width, props.height ])
        .tile(treemapResquarify);
      this.rootNode = this.createHierarchy(props.data);
      const children = this.layout(this.rootNode).children;

      if (props.config && props.config.labels) {
        this.plot.labelsEnabled(!!props.config.labels.show);
        (this.plot as any)._drawLabels = this.createLabels(this.plot, props);
      }
      this.plot
        .addDataset(new Dataset(children))
        .x(d => d[`x0`], this.xScale)
        .y(d => d[`y0`], this.yScale)
        .x2(d => d[`x1`])
        .y2(d => d[`y1`])
        .attr('fill', d => d.data.fill || '#1F77B4')
        .attr('stroke', '#fff')
        .attr('stroke-width', 1)
        .attr('style', 'fill-opacity: 1;shape-rendering: crispedges')
        .label(d => d.data.label)
        .animated(true);
    }
  }
github devinit / datahub / src / components / organisms / Charts / components / LineChart / LineChart.tsx View on Github external
    seriesNames.forEach(series => plot.addDataset(new Dataset(groupedBySeries[series])));
github devinit / datahub / src / components / organisms / Charts / components / BarChart / BarChart.tsx View on Github external
    seriesNames.forEach(series => plot.addDataset(new Dataset(groupedData[series])));
github timwis / vizwit / src / components / VizwitBar.js View on Github external
componentDidMount () {
    const { totaledRows, filteredRows, onSelect, selected } = this.props

    this.totaledRowsDataset = new Plottable.Dataset(totaledRows)
      .metadata({ colorBucket: 5 })
    this.filteredRowsDataset = new Plottable.Dataset(filteredRows)
      .metadata({ colorBucket: 3 })

    const xScale = new Plottable.Scales.Category()
    const xAxis = new Plottable.Axes.Category(xScale, 'bottom')

    const yScale = new Plottable.Scales.Linear()
    const colorScale = new Plottable.Scales.InterpolatedColor()
      .range(['#5279C7', '#BDCEF0'])

    this.plot = new Plottable.Plots.Bar()
      .addDataset(this.totaledRowsDataset)
      .addDataset(this.filteredRowsDataset)
      .attr('fill', (datum, index, dataset) => dataset.metadata().colorBucket, colorScale)
      .x((datum) => datum.label, xScale)
      .y((datum) => datum.value, yScale)
      .animated(true)
github timwis / vizwit / src / components / VizwitDateTime.js View on Github external
const yScale = new Plottable.Scales.Linear()
    const colorScale = new Plottable.Scales.InterpolatedColor()
      .range(['#5279C7', '#BDCEF0'])

    this.plot = new Plottable.Plots.Area()
      .addDataset(this.totaledRowsDataset)
      .addDataset(this.filteredRowsDataset)
      .attr('fill', (datum, index, dataset) => dataset.metadata().colorBucket, colorScale)
      .x((datum) => new Date(datum.label), xScale)
      .y((datum) => datum.value, yScale)
      .animated(true)
    plotGroupItems.push(this.plot)

    const selectedData = (selected) ? [selected.value] : []
    this.selectedDataset = new Plottable.Dataset(selectedData)
    const rectangle = new Plottable.Plots.Rectangle()
      .addDataset(this.selectedDataset)
      .x((datum) => new Date(datum[0].value), xScale)
      .x2((datum) => new Date(datum[1].value))
      .y(0)
      .y2((datum) => rectangle.height())
      .attr('fill', '#f99300')
      .attr('opacity', 0.3)
    plotGroupItems.push(rectangle)

    if (onSelect) {
      const dragbox = new Plottable.Components.XDragBoxLayer()
      dragbox.onDragEnd(this.onDragEnd.bind(this))
      plotGroupItems.push(dragbox)
    }