Open main menu

User:SPage (WMF)/Graph test/Demo graph json

< User:SPage (WMF)‎ | Graph test

{

   "version": 1,
   "width": 500,
   "height": 200,
   "padding": {
       "top": 10,
       "left": 30,
       "bottom": 30,
       "right": 10
   },
   "data": [
       {
           "name": "table",
           "values": [
               {
                   "x": 0,
                   "y": 28,
                   "c": 0
               },
               {
                   "x": 0,
                   "y": 55,
                   "c": 1
               },
               {
                   "x": 1,
                   "y": 43,
                   "c": 0
               },
               {
                   "x": 1,
                   "y": 91,
                   "c": 1
               },
               {
                   "x": 2,
                   "y": 81,
                   "c": 0
               },
               {
                   "x": 2,
                   "y": 53,
                   "c": 1
               },
               {
                   "x": 3,
                   "y": 19,
                   "c": 0
               },
               {
                   "x": 3,
                   "y": 87,
                   "c": 1
               },
               {
                   "x": 4,
                   "y": 52,
                   "c": 0
               },
               {
                   "x": 4,
                   "y": 48,
                   "c": 1
               },
               {
                   "x": 5,
                   "y": 24,
                   "c": 0
               },
               {
                   "x": 5,
                   "y": 49,
                   "c": 1
               },
               {
                   "x": 6,
                   "y": 87,
                   "c": 0
               },
               {
                   "x": 6,
                   "y": 66,
                   "c": 1
               },
               {
                   "x": 7,
                   "y": 17,
                   "c": 0
               },
               {
                   "x": 7,
                   "y": 27,
                   "c": 1
               },
               {
                   "x": 8,
                   "y": 68,
                   "c": 0
               },
               {
                   "x": 8,
                   "y": 16,
                   "c": 1
               },
               {
                   "x": 9,
                   "y": 49,
                   "c": 0
               },
               {
                   "x": 9,
                   "y": 15,
                   "c": 1
               }
           ]
       },
       {
           "name": "stats",
           "source": "table",
           "transform": [
               {
                   "type": "facet",
                   "keys": [
                       "data.x"
                   ]
               },
               {
                   "type": "stats",
                   "value": "data.y"
               }
           ]
       }
   ],
   "scales": [
       {
           "name": "x",
           "type": "linear",
           "range": "width",
           "zero": false,
           "domain": {
               "data": "table",
               "field": "data.x"
           }
       },
       {
           "name": "y",
           "type": "linear",
           "range": "height",
           "nice": true,
           "domain": {
               "data": "stats",
               "field": "sum"
           }
       },
       {
           "name": "color",
           "type": "ordinal",
           "range": "category10"
       }
   ],
   "axes": [
       {
           "type": "x",
           "scale": "x"
       },
       {
           "type": "y",
           "scale": "y"
       }
   ],
   "marks": [
       {
           "type": "group",
           "from": {
               "data": "table",
               "transform": [
                   {
                       "type": "facet",
                       "keys": [
                           "data.c"
                       ]
                   },
                   {
                       "type": "stack",
                       "point": "data.x",
                       "height": "data.y"
                   }
               ]
           },
           "marks": [
               {
                   "type": "area",
                   "properties": {
                       "enter": {
                           "interpolate": {
                               "value": "monotone"
                           },
                           "x": {
                               "scale": "x",
                               "field": "data.x"
                           },
                           "y": {
                               "scale": "y",
                               "field": "y"
                           },
                           "y2": {
                               "scale": "y",
                               "field": "y2"
                           },
                           "fill": {
                               "scale": "color",
                               "field": "data.c"
                           }
                       },
                       "update": {
                           "fillOpacity": {
                               "value": 1
                           }
                       },
                       "hover": {
                           "fillOpacity": {
                               "value": 0.5
                           }
                       }
                   }
               }
           ]
       }
   ]

}