User:Jean-Frédéric/Graph

Embedded Directly
This graph is using &lt;graph> tag inside current page. { "width": 400, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ {     "name": "table", "values": [ {'wiki':"frwiki", "FilesUsed": 643, "UsagesCount": 891}, {'wiki':"enwiki", "FilesUsed": 242, "UsagesCount": 1119}, {'wiki':"eswiki", "FilesUsed": 203, "UsagesCount": 222} ]   }  ],  "scales": [ {     "name": "x", "type": "ordinal", "range": "width", "domain": {"data": "table", "field": "data.wiki"} },   {      "name": "y", "range": "height", "nice": true, "domain": {"data": "table", "field": "data.FilesUsed"} } ],  "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ {     "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "data.x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "data.y"}, "y2": {"scale": "y", "value": 0} },       "update": { "fill": {"value": "steelblue"} },       "hover": { "fill": {"value": "red"} }     }    }  ] }

Other
{ "name": "image", "width": 200, "height": 200, "padding": {"left":30, "top":10, "bottom":30, "right":10}, "data": [ {     "name": "data", "values": [ {"x":0.5, "y":0.5, "img":"https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Wikimedia_France_logo.svg/40px-Wikimedia_France_logo.svg.png"}, {"x":1.5, "y":1.5, "img":"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/CommonsLightsaber.svg/36px-CommonsLightsaber.svg.png"}, {"x":2.5, "y":2.5, "img":"https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikimedia_Commons_logo_with_brackets.svg/40px-Wikimedia_Commons_logo_with_brackets.svg.png"} ]   }  ],  "scales": [ {"name": "x", "domain": [0, 3], "range": "width"}, {"name": "y", "domain": [0, 3], "range": "height"} ], "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ {     "type": "image", "from": {"data": "data"}, "properties": { "enter": { "url": {"field": "data.img"}, "width": {"value": 50}, "height": {"value": 50}, "x": {"scale": "x", "field": "data.x"}, "y": {"scale": "y", "field": "data.y"}, "align": {"value": "center"}, "baseline": {"value": "middle"} },       "update": { "opacity": {"value": 1.0} },       "hover": { "opacity": {"value": 0.5} }     }    }  ] }