Skip to content

Instantly share code, notes, and snippets.

@XavierGimenez
Last active March 2, 2019 06:49
Show Gist options
  • Save XavierGimenez/a50641568df6c96cc38336c5b3ff5bbc to your computer and use it in GitHub Desktop.
Save XavierGimenez/a50641568df6c96cc38336c5b3ff5bbc to your computer and use it in GitHub Desktop.
Slopechart with vega.js

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

<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>
{
"$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