Extension:Graph/Demo/ObamaSizeChanges

From MediaWiki.org
Jump to navigation Jump to search


<graph>

{
    "version": 1,
    "width": 800,
    "height": 400,
    "data": [
        {
            "name": "values",
            "url": "/w/index.php?title=Extension:Graph/Demo/ObamaSizeChangesData&action=raw",
            "format": {
                "type": "csv",
                "parse": {
                    "diff": "number",
                    "date": "date"
                }
            }
        },
        {
            "name": "stats",
            "source": "values",
            "transform": [
                {
                    "type": "facet",
                    "keys": [
                        "data.date"
                    ]
                },
                {
                    "type": "stats",
                    "value": "data.diff"
                }
            ]
        }
    ],
    "scales": [
        {
            "name": "x",
            "type": "time",
            "range": "width",
            "domain": {
                "data": "values",
                "field": "data.date"
            }
        },
        {
            "name": "y",
            "type": "linear",
            "range": "height",
            "nice": true,
            "domain": {
                "data": "stats",
                "field": "sum"
            }
        },
        {
            "name": "color",
            "type": "ordinal",
            "range": "category20",
            "domain": {
                "data": "values",
                "field": "data.user"
            }
        }
    ],
    "legends": [
        {
            "fill": "color",
            "title": "User",
            "offset": 10,
            "properties": {
                "symbols": {
                    "stroke": {
                        "value": "transparent"
                    }
                }
            }
        }
    ],
    "axes": [
        {
            "type": "x",
            "scale": "x",
            "tickSizeEnd": 0,
            "grid": true,
            "properties": {
                "ticks": {
                    "stroke": {
                        "value": "#666666"
                    }
                },
                "labels": {
                    "fill": {
                        "value": "#666666"
                    },
                    "angle": {
                        "value": 30
                    },
                    "align": {
                        "value": "left"
                    }
                },
                "grid": {
                    "stroke": {
                        "value": "#cacaca"
                    }
                },
                "axis": {
                    "stroke": {
                        "value": "#666666"
                    },
                    "strokeWidth": {
                        "value": 2
                    }
                }
            }
        },
        {
            "type": "y",
            "scale": "y",
            "grid": true,
            "properties": {
                "ticks": {
                    "stroke": {
                        "value": "#666666"
                    }
                },
                "labels": {
                    "fill": {
                        "value": "#666666"
                    }
                },
                "grid": {
                    "stroke": {
                        "value": "#cacaca"
                    }
                },
                "axis": {
                    "stroke": {
                        "value": "#666666"
                    },
                    "strokeWidth": {
                        "value": 2
                    }
                }
            }
        }
    ],
    "marks": [
        {
            "type": "group",
            "from": {
                "data": "values",
                "transform": [
                    {
                        "type": "facet",
                        "keys": [
                            "data.user"
                        ]
                    },
                    {
                        "type": "stack",
                        "point": "data.date",
                        "height": "data.diff"
                    }
                ]
            },
            "marks": [
                {
                    "type": "rect",
                    "properties": {
                        "enter": {
                            "x": {
                                "scale": "x",
                                "field": "data.date"
                            },
                            "width": {
                                "value": 5
                            },
                            "y": {
                                "scale": "y",
                                "field": "y"
                            },
                            "y2": {
                                "scale": "y",
                                "field": "y2"
                            },
                            "fill": {
                                "scale": "color",
                                "field": "data.user"
                            }
                        }
                    }
                }
            ]
        }
    ]
}

</graph>