Skip to content

Instantly share code, notes, and snippets.

@XavierGimenez

XavierGimenez/README.md

Last active November 29, 2018 14:25
Show Gist options
  • Save XavierGimenez/0968770f2be1f2cc85482d0b31455d1e to your computer and use it in GitHub Desktop.
Save XavierGimenez/0968770f2be1f2cc85482d0b31455d1e to your computer and use it in GitHub Desktop.
Download ZIP
Custom visuals designs with vega.js (I)
Raw
README.md

Draft for making custom visual designs with vega.js

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "spec.vg.json";
vegaEmbed('#vis', spec, {defaultStyle: true});
</script>
</body>
Raw
spec.vg.json
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"height": 400,
"padding": 5,
"config" : {
"axis" : {
"domain" : true
}
},
"title": {
"text" : "Percentage of tender saving",
"fontSize" : 20,
"offset" : 50
},
"signals": [
{"name": "chartWidth", "value": 350},
{"name": "chartPad", "value": 20},
{"name": "width", "update": "2 * chartWidth + chartPad"},
{"name": "companyOffset", "value": 20},
{"name": "labelMinimalHeight", "value": 20},
{"name": "paddingTop", "value" : 40},
{
"name": "totalHeight",
"update": "[(extent[1] - extent[0])*labelMinimalHeight, paddingTop]"
}
],
"data": [
{
"name" : "candidate_types",
"values" : [
{ "name" : "winner" },
{ "name" : "non winners" }
]
},
{
"name": "candidates",
"values": [
{ "name": "C.G.A. srl",
"percentage": 6.07,
"winner" : false
},
{ "name": "Castedil srl",
"percentage": 40.99,
"winner" : false
},
{ "name": "Impresa Costruzioni Francesco Cavallo",
"percentage": 16.11,
"winner" : false
},
{
"name": "Impresa Costruzioni Scavi e Movimento Terra Pacella Antonio",
"percentage": 33.52,
"winner" : true
},
{ "name": "L.T.R. Asphalt srl",
"percentage": 40.99,
"winner" : false
},
{
"name": "La Nuova Edil Strade di Bochicchio Angelo",
"percentage": 27.48,
"winner" : false
},
{ "name": "Lucana Scavi di Friguglietti Giuseppe",
"percentage": 34,
"winner" : false
},
{ "name": "Madonna Costruzioni srl",
"percentage": 33.17,
"winner" : false
},
{ "name": "Pascale Prefabbricati srl",
"percentage": 38.32,
"winner" : false
},
{ "name": "Ventra Antonio srl",
"percentage": 41.84,
"winner" : false
}
],
"transform": [
{"type": "extent", "field": "percentage", "signal": "extent"}
]
}
],
"scales": [
{
"name": "y",
"type": "linear",
"range": {"signal": "totalHeight"},
"round": true,
"domain": {"data": "candidates", "field": "percentage"},
"zero": false
}
],
"axes": [
{ "orient": "left",
"scale": "y",
"labelPadding" : -20,
"ticks" : true,
"domainColor" : "#e0e0e0",
"grid" : false,
"offset": {
"signal": "-width/2"
},
"encode" : {
"labels" : {
"update" : {
"text" : {
"signal" : "datum.value + '%'"
}
}
}
}
}
],
"marks": [
{
"type": "text",
"from": {"data": "candidates"},
"encode": {
"enter": {
"x": {"signal": "(datum.winner)? (width/2) - companyOffset : (width/2) + companyOffset"},
"y": {"scale": "y", "field": "percentage"},
"text": {
"signal": "(datum.winner) ? (datum.name + ' \u25b6') : ('\u25c0 ' + datum.name)"
},
"align" : {
"signal" : "(datum.winner)? 'right' : 'left'"
},
"fontWeight" : {
"signal" : "(datum.winner)? 'bold' : 'normal'"
},
"fontSize" : {
"signal" : "(datum.winner)? 12 : 12"
},
"fill" : {"signal" : "(datum.winner)? '#333' : '#444'" }
}
}
},
{
"type" : "text",
"from" : {
"data" : "candidate_types"
},
"encode" : {
"enter" : {
"x" : {
"signal" : "(datum.name == 'winner')? (width/2) - (width/4) : (width/2) + (width/4)"
},
"y" : {
"signal" : "0"
},
"text" : {
"signal" : "datum.name"
},
"fontWeight" : { "value" : "bold"},
"fontSize" : {"value" : 14}
}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment