Last active
July 26, 2017 17:59
-
-
Save anbnyc/0d1abfe6e9134708c57200187852e1d2 to your computer and use it in GitHub Desktop.
Child growth charts in Vega
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.33/vega.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.17/vega-embed.js"></script> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| </body> | |
| <script> | |
| const spec = { | |
| "$schema":"https://vega.github.io/schema/vega/v3.0.json", | |
| "padding":5, | |
| "data":[ | |
| { | |
| "name":"growth", | |
| "url":"https://api.myjson.com/bins/14q1qn" | |
| } | |
| ], | |
| "signals":[ | |
| { | |
| "name":"yOffset", | |
| "value":40 | |
| }, | |
| { | |
| "name":"xOffset", | |
| "value":40 | |
| }, | |
| { | |
| "name":"cellHeight", | |
| "value":300 | |
| }, | |
| { | |
| "name":"cellWidth", | |
| "value":400 | |
| }, | |
| { | |
| "name":"height", | |
| "update":"7.3 * (yOffset + cellHeight)" | |
| }, | |
| { | |
| "name": "width", | |
| "update": "2.3 * (xOffset + cellWidth)" | |
| } | |
| ], | |
| "scales":[ | |
| { | |
| "name":"ygroup", | |
| "type":"band", | |
| "range":[ | |
| 0, | |
| { | |
| "signal":"height" | |
| } | |
| ], | |
| "domain":{ | |
| "data":"growth", | |
| "field":"Percentile" | |
| } | |
| }, | |
| { | |
| "name":"xgroup", | |
| "type":"band", | |
| "range":[ | |
| 0, | |
| { | |
| "signal":"width" | |
| } | |
| ], | |
| "domain":{ | |
| "data":"growth", | |
| "field":"Gender" | |
| } | |
| }, | |
| { | |
| "name":"color", | |
| "type":"ordinal", | |
| "range":"category", | |
| "domain":{ | |
| "data":"growth", | |
| "fields":[ | |
| "Gender" | |
| ] | |
| } | |
| } | |
| ], | |
| "marks":[ | |
| { | |
| "name":"gen", | |
| "type":"group", | |
| "from":{ | |
| "facet":{ | |
| "name":"gen", | |
| "data":"growth", | |
| "groupby":[ | |
| "Gender", | |
| "Percentile" | |
| ] | |
| } | |
| }, | |
| "encode":{ | |
| "enter":{ | |
| "y":{ | |
| "scale":"ygroup", | |
| "field": "Percentile", | |
| "offset": {"signal": "yOffset"} | |
| }, | |
| "x":{ | |
| "scale": "xgroup", | |
| "field": "Gender", | |
| "offset": {"signal": "xOffset"} | |
| }, | |
| "height":{ | |
| "signal":"cellHeight" | |
| }, | |
| "width":{ | |
| "signal":"cellWidth" | |
| } | |
| } | |
| }, | |
| "scales":[ | |
| { | |
| "name":"yscale", | |
| "type":"linear", | |
| "domain":{ | |
| "data":"growth", | |
| "field":"H" | |
| }, | |
| "range":[ | |
| { | |
| "signal":"cellHeight" | |
| }, | |
| 0 | |
| ] | |
| }, | |
| { | |
| "name":"xscale", | |
| "type":"linear", | |
| "domain":{ | |
| "data":"growth", | |
| "field":"W" | |
| }, | |
| "range":[ | |
| 0, | |
| { | |
| "signal": "cellWidth" | |
| } | |
| ] | |
| } | |
| ], | |
| "axes":[ | |
| { | |
| "orient":"top", | |
| "scale":"xscale", | |
| "grid":true, | |
| "domain":false, | |
| "encode":{ | |
| "domain":{ | |
| "enter":{ | |
| "stroke":{ | |
| "value":"transparent" | |
| } | |
| } | |
| }, | |
| "labels":{ | |
| "enter":{ | |
| "align":{ | |
| "value":"left" | |
| }, | |
| "baseline":{ | |
| "value":"top" | |
| }, | |
| "fontSize":{ | |
| "value":12 | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "title":"Weight (kgs)", | |
| "orient":"bottom", | |
| "scale":"xscale", | |
| "domain":false, | |
| "ticks":false, | |
| "labels":false | |
| }, | |
| { | |
| "orient":"left", | |
| "scale":"yscale", | |
| "grid":true, | |
| "domain":false, | |
| "encode":{ | |
| "domain":{ | |
| "enter":{ | |
| "stroke":{ | |
| "value":"transparent" | |
| } | |
| } | |
| }, | |
| "labels":{ | |
| "enter":{ | |
| "align":{ | |
| "value":"left" | |
| }, | |
| "baseline":{ | |
| "value":"bottom" | |
| }, | |
| "fontSize":{ | |
| "value":12 | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "title":"Height (cms)", | |
| "orient":"right", | |
| "scale":"yscale", | |
| "domain":false, | |
| "ticks":false, | |
| "labels":false | |
| } | |
| ], | |
| "marks":[ | |
| { | |
| "type":"line", | |
| "from":{ | |
| "data":"gen" | |
| }, | |
| "encode":{ | |
| "enter":{ | |
| "interpolate":{ | |
| "value":"linear" | |
| }, | |
| "x":{ | |
| "scale":"xscale", | |
| "field":"W" | |
| }, | |
| "y":{ | |
| "scale":"yscale", | |
| "field":"H" | |
| }, | |
| "stroke":{ | |
| "scale":"color", | |
| "field":"Gender" | |
| }, | |
| "strokeWidth":{ | |
| "value":1 | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "type":"symbol", | |
| "from":{ | |
| "data":"gen" | |
| }, | |
| "encode":{ | |
| "enter":{ | |
| "x":{ | |
| "scale":"xscale", | |
| "field":"W" | |
| }, | |
| "y":{ | |
| "scale":"yscale", | |
| "field":"H" | |
| }, | |
| "fill":{ | |
| "scale":"color", | |
| "field":"Gender" | |
| }, | |
| "strokeWidth":{ | |
| "value":0 | |
| }, | |
| "size":{ | |
| "value":10 | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "type": "text", | |
| "from": { | |
| "data": "gen" | |
| }, | |
| "encode": { | |
| "enter": { | |
| "x": {"scale": "xscale", "field": "W"}, | |
| "y": {"scale": "yscale", "field": "H"}, | |
| "dx": {"value": -5}, | |
| "dy": {"value": 8}, | |
| "align": {"value": "right"}, | |
| "fill": {"value": "#000"}, | |
| "text": {"field": "Age"}, | |
| "angle": {"value": 45} | |
| } | |
| } | |
| } | |
| ] | |
| } | |
| ], | |
| "axes": [ | |
| { | |
| "orient":"top", | |
| "scale":"xgroup", | |
| "grid":false, | |
| "ticks": false, | |
| "encode":{ | |
| "domain":{ | |
| "enter":{ | |
| "stroke":{ | |
| "value":"transparent" | |
| } | |
| } | |
| }, | |
| "labels":{ | |
| "enter":{ | |
| "align":{ | |
| "value":"left" | |
| }, | |
| "baseline":{ | |
| "value":"top" | |
| }, | |
| "fontWeight":{ | |
| "value":"bold" | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "title":"Gender", | |
| "orient":"top", | |
| "scale":"xgroup", | |
| "domain":false, | |
| "ticks":false, | |
| "labels":false | |
| }, | |
| { | |
| "orient":"left", | |
| "scale":"ygroup", | |
| "grid":false, | |
| "ticks": false, | |
| "encode":{ | |
| "domain":{ | |
| "enter":{ | |
| "stroke":{ | |
| "value":"transparent" | |
| } | |
| } | |
| }, | |
| "labels":{ | |
| "enter":{ | |
| "align":{ | |
| "value":"right" | |
| }, | |
| "baseline":{ | |
| "value":"bottom" | |
| }, | |
| "fontWeight":{ | |
| "value":"bold" | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "title":"Percentile", | |
| "orient":"left", | |
| "scale":"ygroup", | |
| "domain":false, | |
| "ticks":false, | |
| "labels":false | |
| } | |
| ] | |
| }; | |
| vega.embed('#vis', spec); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment