Quick implementation of a slope chart, not to represent changes over time but to emulate Ben Fry's piece Salaries vs Performance
Todo: Values should be ranked to avoid overlapping
Last active
March 2, 2019 06:49
-
-
Save XavierGimenez/a50641568df6c96cc38336c5b3ff5bbc to your computer and use it in GitHub Desktop.
Slopechart with vega.js
This file contains 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> | |
| <title></title> | |
| <script src="https://cdn.jsdelivr.net/npm/vega@4"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="vis" style="height: 500px;"></div> | |
| </body> | |
| <script type="text/javascript"> | |
| vegaEmbed('#vis', 'vega-spec.json', {defaultStyle: true}); | |
| </script> | |
| </html> |
This file contains 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
| { | |
| "$schema": "https://vega.github.io/schema/vega/v5.json", | |
| "description": "todo", | |
| "width": 500, | |
| "height": 500, | |
| "signals": [ | |
| { "name": "paddingLeft", "value": 100}, | |
| { "name": "paddingRight", "update": "width - 75"} | |
| ], | |
| "autosize": { | |
| "type": "fit", | |
| "contains": "padding" | |
| }, | |
| "data": [ | |
| { | |
| "name": "source", | |
| "values": [ | |
| { | |
| "key": "Boston", | |
| "value": 17, | |
| "amount": 189639 | |
| }, | |
| { | |
| "key": "LA Angels", | |
| "value": 58, | |
| "amount": 143026 | |
| }, | |
| { | |
| "key": "Cleveland", | |
| "value": 14, | |
| "amount": 106460 | |
| }, | |
| { | |
| "key": "Kansas City", | |
| "value": 1, | |
| "amount": 67116 | |
| }, | |
| { | |
| "key": "Tampa Bay", | |
| "value": 36, | |
| "amount": 87759 | |
| }, | |
| { | |
| "key": "Oakland", | |
| "value": 50, | |
| "amount": 71438 | |
| }, | |
| { | |
| "key": "Atlanta", | |
| "value": 29, | |
| "amount": 93286 | |
| }, | |
| { | |
| "key": "Florida", | |
| "value": 54, | |
| "amount": 52067 | |
| }, | |
| { | |
| "key": "Pittsburgh", | |
| "value": 33, | |
| "amount": 39537 | |
| }, | |
| { | |
| "key": "Baltimore", | |
| "value": 42, | |
| "amount": 110454 | |
| }, | |
| { | |
| "key": "Colorado", | |
| "value": 26, | |
| "amount": 120078 | |
| }, | |
| { | |
| "key": "Settle", | |
| "value": 22, | |
| "amount": 25407 | |
| }, | |
| { | |
| "key": "Cincinnati", | |
| "value": 10, | |
| "amount": 24123 | |
| }, | |
| { | |
| "key": "Watch me", | |
| "value": 5, | |
| "amount": 3507 | |
| } | |
| ] | |
| }, | |
| { | |
| "name" : "props", | |
| "values": [{ "prop" : "value"}, {"prop" :"amount"}] | |
| } | |
| ], | |
| "scales": [ | |
| { | |
| "name": "x", | |
| "type": "ordinal", | |
| "domain": { | |
| "data": "props", | |
| "field" : "prop" | |
| }, | |
| "range": { | |
| "signal": "[paddingLeft, paddingRight]" | |
| } | |
| }, | |
| { | |
| "name": "y1", | |
| "type": "linear", | |
| "nice": true, | |
| "zero": true, | |
| "domain": { | |
| "data": "source", | |
| "field": "value" | |
| }, | |
| "range": "height" | |
| }, | |
| { | |
| "name": "y2", | |
| "type": "linear", | |
| "nice": true, | |
| "zero": true, | |
| "domain": { | |
| "data": "source", | |
| "field": "amount" | |
| }, | |
| "range": "height" | |
| } | |
| ], | |
| "marks": [ | |
| { | |
| "type": "rule", | |
| "from": { | |
| "data": "source" | |
| }, | |
| "encode": { | |
| "update": { | |
| "x": { | |
| "scale": "x", | |
| "value": "value" | |
| }, | |
| "x2": { | |
| "scale": "x", | |
| "value": "amount" | |
| }, | |
| "y": { | |
| "scale": "y1", | |
| "field": "value" | |
| }, | |
| "y2": { | |
| "scale": "y2", | |
| "field": "amount" | |
| }, | |
| "strokeWidth": { | |
| "value": 0.75 | |
| }, | |
| "opacity":{ | |
| "value": 0.5 | |
| }, | |
| "tooltip": { | |
| "signal": "datum" | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "type": "text", | |
| "from": { | |
| "data": "source" | |
| }, | |
| "encode": { | |
| "update": { | |
| "text": { | |
| "field": "key" | |
| }, | |
| "x": { | |
| "signal": "paddingLeft" | |
| }, | |
| "y": { | |
| "scale": "y1", | |
| "field": "value" | |
| }, | |
| "align":{ | |
| "value": "right" | |
| }, | |
| "dx": { | |
| "value": -35 | |
| }, | |
| "baseline":{ | |
| "value": "middle" | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "type": "text", | |
| "from": { | |
| "data": "source" | |
| }, | |
| "encode": { | |
| "update": { | |
| "text": { | |
| "field": "value" | |
| }, | |
| "x": { | |
| "signal": "paddingLeft" | |
| }, | |
| "y": { | |
| "scale": "y1", | |
| "field": "value" | |
| }, | |
| "align":{ | |
| "value": "right" | |
| }, | |
| "dx": { | |
| "value": -5 | |
| }, | |
| "baseline":{ | |
| "value": "middle" | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "type": "text", | |
| "from": { | |
| "data": "source" | |
| }, | |
| "encode": { | |
| "update": { | |
| "text": { | |
| "signal": "format(datum.amount, ',.2f') + ' €'" | |
| }, | |
| "x": { | |
| "signal": "paddingRight" | |
| }, | |
| "y": { | |
| "scale": "y2", | |
| "field": "amount" | |
| }, | |
| "align":{ | |
| "value": "left" | |
| }, | |
| "dx": { | |
| "value": 5 | |
| }, | |
| "baseline":{ | |
| "value": "middle" | |
| } | |
| } | |
| } | |
| } | |
| ], | |
| "config": {} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment