{
  "marktype": "bar",
  "enc": {
    "x": {"name": "Cost__Total_$","type": "Q","aggr": "sum"},
    "y": {"name": "Effect__Amount_of_damage","type": "O"},
    "row": {"name": "Wildlife__Size","type": "O"},
    "col": {"name": "When__Phase_of_flight","type": "O"}
  },
  "cfg": {"dataUrl": "data/birdstrikes.json"}
}

there is no offset property …. we might need to create a group for this.

For some datasets it is more useful to have the origin somewhere else.

It would be nice if we could change the vega JSON and see the result in the visualization. I imagine that a suer would use vegalite to get started and then she would refine the visualization.

throw error when

• unsupported encoding is assigned to a particular mark type
• we cannot load data #43
• throw error if a variable field is not found.
• throw error if timeUnit is used with non-T type.

{
  "marktype": "point",
  "enc": {
    "x": {"name": "Cost__Total_$","type": "Q"},
    "y": {"name": "Cost__Repair","type": "O","bin": true},
    "color": {"name": "Effect__Amount_of_damage","type": "O"}
  },
  "cfg": {"dataUrl": "data/birdstrikes.json"}
}

——
Debugging Notes

Root cause is in setSize

So they don't overlap.

Shorthand: square.x-bin_acc-Q.y-bin_hp-Q.alpha-count_--Q

This seems to be wrong

This is straightforward in vega, but need to introduce new syntax

Generated Vega spec can show fractional widths (e.g., 1300.0000000000002). These should be integers.

For ordinal: count, argmax
For quanitative: min, max, avg, sum, stdev, bin

This will allow grouping dots, lines, stack, etc. without assigning colors.

Currently row/column faceting generate children cells using cross operator. Implementing nesting operator would produce more efficient layout. (See Tableau’s VizQL and
Wilkinson’s Grammar of Graphics)

{
  "marktype": "bar",
  "enc": {
    "x": {"name": "Cost__Total_$","type": "Q","aggr": "sum"},
    "y": {"name": "Effect__Amount_of_damage","type": "O"},
    "row": {"name": "Wildlife__Size","type": "O"},
    "col": {"name": "When__Phase_of_flight","type": "O"},
    "color": {"name": "When__Time_of_day","type": "O"}
  },
  "cfg": {"dataUrl": "data/birdstrikes.json"}
}

get the following scale

Meanwhile, if we remove color

{
  "marktype": "bar",
  "enc": {
    "x": {"name": "Cost__Total_$","type": "Q","aggr": "sum"},
    "y": {"name": "Effect__Amount_of_damage","type": "O"},
    "row": {"name": "Wildlife__Size","type": "O"},
    "col": {"name": "When__Phase_of_flight","type": "O"}
  },
  "cfg": {"dataUrl": "data/birdstrikes.json"}
}

The scale is nicer.

Just always put numbers outside like I add 28, 55 below (same for all bars — I’m just adding this by hand so I added only the first two.)

• try extending vega output for the “bar” example with another marks group for showing the label with some offset
• modify the code (more details soon)
  • add label encoding channel to channel.ts and the schema
  • extend marks.ts

{
  "marktype": "bar",
  "enc": {
    "x": {"name": "Cost__Total_$","type": "Q","aggr": "sum"},
    "y": {"name": "Effect__Amount_of_damage","type": "O"},
    "row": {"name": "Wildlife__Size","type": "O"},
    "col": {"name": "When__Phase_of_flight","type": "O"}
  },
  "cfg": {"dataUrl": "data/birdstrikes.json"}
}

Another case: (probably a different bug)

{
  "marktype": "bar",
  "enc": {
    "x": {"name": "Cost__Total_$","type": "Q","aggr": "sum"},
    "y": {"name": "Effect__Amount_of_damage","type": "O"},
    "col": {"name": "When__Phase_of_flight","type": "O"}
  },
  "cfg": {"dataUrl": "data/birdstrikes.json"}
}

"fields": [{"op": "count","field": "data.-“}]

For encoding = text, do not rotate x axis label.
But wrap / truncate text instead.

{
  "marktype": "text",
  "enc": {
    "x": {"name": "Major_Genre","type": "O"},
    "y": {"name": "Creative_Type","type": "O"},
    "text": {"name": "US_Gross","type": "Q","aggr": "avg"}
  },
  "cfg": {"dataUrl": "data/movies.json","cellHeight": "400","cellWidth": "400"}
}

• make text doesn’t support x, y
• remove padding for axes
• adjust cell-size based on text
• format number

• also check if field:”*” breaks any condition in the UI

Some from linear, log, pow, sqrt, quantile, quantize, and threshold.

linear & log are probably the most important

• create separate “tooltip" data which contain mouse position.
• See https://github.com/trifacta/vega/wiki/Runtime use .on() to get position and use .data() to update that separate data.
• create text marks for that “tooltip” data (and maybe rect if text doesn’t bgcolor).

Currently, using T leads to Unrecognized interval error when I try point.x-year-T.

TODO

• Parse Date
• Discrete Binning (bin by "month", "year", "day", "date", "hour", "minute", “second” )
  • same month in different year are in the same bin.
• custom scale for axis and legend names

• whether to stack or not

By default would "auto" choose to stack based on mark (current behavior)
If true, stack regardless of mark type
If false, do not stack for any mark type

• sortby

Common Refactor

• distinguish between general model and a Single unit model
  • General model: produces scale, axis, legends
  • Single unit model: produces marks (and possibly others)
• layout
• data
• facet
  • re-compile row and column to use facet
  • rewrite facet.ts

Sub-issues

• layering #585
• multiple x,y on the same axis
• dual axes

I'm just trying to confirm the semantics of binning.

To create a histogram, we need to use the same column for x and y (y could also be another quantitative field) and choose to bin x and sum y (in some cases another aggregation might make sense). Also, we need to set the type of the binned field to O to fix the labels. I believe at some point we want to show labels that show the range and not hide groups with no values but we can leave that for later.

Vegalite atomically chooses a good bin size that optimizes for 1) not too many bins 2) nice bin widths (based on the base, usually 10). The only input to this binning function are the min and max.

sqlite> select cast((Cost__Repair-25000)/500000 as int)*500000, sum(Cost__Repair) from birdstrikes_json group by cast((Cost__Repair-25000)/500000 as int);
0|9227604
500000|5519778
1500000|2762200
1500000|1715077
3000000|6390178
3500000|3644483
7000000|7043545

Choosing two ordinals only makes sense if we also add alpha, size, or a color scale to show the count (without a field). As an alternative, we could use the sum, max, ... of the quantitative scale to map to the alpha, size, or color. But it will never make sense to use another field that we haven't used (?).

What I'm trying to understand is what the limitations are and what things we can propagate automatically (or disable in the interface). I'm not yet seeing the generalized rules but will think more about this.

• test.js — run test case. Throw error / create output html page to show mismatches.
• gen.js — generate vega specs based on input in /vega/ and output to /vegalite or add test case (given an encoding, automatically create files in /vega and /vegalite with appropriate names

apply sort transform first (and then use “index” to sort axis)??

• It would be also nice to be able to control order of line group
  for example, we can we encoding time along the line

Similar to tableau

I'm not sure what this entails, though...

create cli for generating image file from spec

basically just wiring vl2vg and vega's vg2png and vg2svg should work

Otherwise marks are unreadable.

Is there a story for changing the visualization depending on the data? I imagine that it would be great to change for example the color mapping if there are negative values. Or use a log scale if the data has only few large values.

• editor mode (paste a code to update the UI based on the input vegalite code.) 12b8123
• transpose (button for swapping X,Y encodings) 2e4b4df

Control

• split function into aggregate functions and non-aggregate functions @kanitw

• agg: min, max, avg

• non-agg: math functions, bin

• Drag & Drop to swap encoding

• Add better UI for adjusting common defaults?
  This could be toggle-able panel appearing beneath the encoding shelves

  Add slider to set default opacity
  Add slider for default point size
  Add x/y axis controls (zero, reverse, log)
  Default font, size controls

Prevent Errors

• disable unsupported encoding based on the selected mark types.
• Hide unsupported type based on data column & encoding type.
• Hide unsupported functions based on data column & encoding type.
• prevent casting to ordinal with binning ?

Productivity

• use zeroclipboard to add copy button for each section of code.

• split pane
• groups for global axis 4042b0d
• categorical label
• padding/ margin
• support stack, line 97e5f7a

This is a modified vega bug.

Step to reproduce

1. specify height in the config UI
2. make any visualization

The output will be insanely tall.

• look at axis, there are ways to do custom axis
• d3 might have some ways to ...

Inspired from discussion in #59

• Numeric Transform – formula e.g., log, etc.