I have, what I assume is, an easy question. I have a scatter chart (code below) and I want to make the vertical and horizontal line black. Right now it's white. I have tried a handful of different things but nothing has worked. What am I missing?
{
$schema: https://vega.github.io/schema/vega/v3.3.1.json
padding: 5
config: {
background: "#f5f5f5"
}
data: [
{
name: source
url: {
%context%: true
index: custom_index
body: {size: 10000}
}
format: {property: "hits.hits"}
transform: [
{
type: filter
expr: datum._source['annual_recurring_cost'] != null && datum._source['technical_risk'] != null && datum._source['business_value'] != null && datum._source['technical_value'] != null
}
{
type: project
fields: [
_source.name
_source['annual_recurring_cost']
_source['technical_risk']
_source['business_value']
_source['technical_value']
]
as: ["name", "Cost", "Criticality", "BV", "TV"]
}
]
}
]
scales: [
{
name: x
type: linear
round: true
nice: true
zero: false
domain: [0.0, 10.0]
range: width
}
{
name: y
type: linear
round: true
nice: true
zero: false
domain: [0.0, 10.0]
range: height
}
{
name: size
type: linear
round: true
nice: false
zero: true
domain: {data: "source", field: "Cost"}
//this changes the size of the cost bubble
//this was 500, 5000
range: [300, 3000]
}
{
name: color
//this changes the risk mitigation type
//this makes it in order of numbers using differnt shades of the same color
//"type": "ordinal",
//"type": "linear",
//this makes it use groups of 2
//"type": "quantize",
//this makes it use decimal points
//"type": "quantile",
//this sets a threshold, but by default there are 3 thresholds less than 0, 0-10 and then above 10. need to figure out how to change the threshold
// "type": "threshold",
"type": "sequential",
"range": ["red", "green"]
// {"scheme": "category20"},
//change name to another field name i.e. bv to see a different field - ALSO DO THE PART BELOW
"domain": {"data": "source", "field": "Criticality"}
}
]
axes: [
{
scale: x
grid: true
domain: true
//this defines location of the title below
orient: bottom
labelPadding: 20
values: [0.0, 5, 10.0]
tickCount: 3
title: Business Value
}
{
scale: y
grid: true
domain: false
orient: left
// this is telling it that there are three points on the y axis 0, 5 and 10 and then the tickcount defines how many ticks there are. so if you had 0, 2, 4, 6, 8, 10 and tick count 6 you'd have six lines (top, bottom and 4 others)
values: [0.0, 5, 10.0]
tickCount: 3
labelPadding: 20
titlePadding: 5
title: Technical Value
}
]
legends: [
{
fill: "color"
title: "Risk Mitigation"
}
{
title: Annual Cost
size: size
format: s
symbolStrokeColor: "#4682b4"
symbolStrokeWidth: 2
symbolOpacity: 1
symbolType: circle
}
]
marks: [
{
name: marks
// this sets the shape of the circular dots
type: symbol
from: {data: "source"}
encode: {
update: {
x: {scale: "x", field: "BV"}
y: {scale: "y", field: "TV"}
size: {scale: "size", field: "Cost"}
//size: {10, field: "Cost"}
//**ALSO UPDATE HERE field to something else i.e. bv**
fill: {scale: "color", field: "Criticality"}
// the line below will change all of the circles to red
// fill: {value: "#900"}
shape: {value: "circle"}
opacity: {value:1}
stroke: none
tooltip: {"signal": "{\"Name\": datum.name, \"Cost\": format(datum.Cost, '$,.0f')}"}
// tooltip: {field: "name"}
}
}
}
{
name: Eliminate
type: text
from: {data: "source"}
encode: {
enter: {
x: {scale: "x", value: 2.5}
y: {scale: "y", value: 2.5}
fill: {value: "#900"}
text: {value: "Eliminate"}
align: {value: "center"},
baseline: {value: "middle"}
fontSize: {value: 22}
}
}
}
{
name: Migrate
type: text
from: {data: "source"}
encode: {
enter: {
x: {scale: "x", value: 7.5}
y: {scale: "y", value: 2.5}
fill: {value: "#009"}
text: {value: "Migrate"}
align: {value: "center"},
baseline: {value: "middle"}
fontSize: {value: 22}
}
}
}
{
name: Tolerate
type: text
from: {data: "source"}
encode: {
enter: {
x: {scale: "x", value: 2.5}
y: {scale: "y", value: 7.5}
fill: {value: "#666"}
text: {value: "Tolerate"}
align: {value: "center"},
baseline: {value: "middle"}
fontSize: {value: 22}
}
}
}
{
name: Invest
type: text
from: {data: "source"}
encode: {
enter: {
x: {scale: "x", value: 7.5}
y: {scale: "y", value: 7.5}
fill: {value: "#090"}
text: {value: "Invest"}
align: {value: "center"},
baseline: {value: "middle"}
fontSize: {value: 22}
}
}
}
]
}
