Creating a bullet chart using Vega
189 views
Skip to first unread message
Naresh Bhatia
Dec 11, 2014, 9:40:08 AM12/11/14
to veg...@googlegroups.com
I am trying to create a bullet chart by overlapping two bar charts. Essentially each bar should consist of an outer rectangle that fully encloses a smaller rectangle centered vertically inside it. I am almost able to do this by adjusting offsets but this method does not center the inner rectangle. Any ideas on how to do this? Here's my code so far that used two marks of type "rect":
"marks": [
{
"type": "rect",
"from": {"data":"portfolio"},
"properties": {
"enter": {
"x": {"scale":"x", "value":0},
"x2": {"scale":"x", "field":"data.x"},
"y": {"scale":"y", "field":"data.y"},
"height": {"scale":"y", "band":true, "offset":-1}
},
"update": { "fill": {"value":"steelblue"} },
"hover": { "fill": {"value":"red"} }
}
},
{
"type": "rect",
"from": {"data":"benchmark"},
"properties": {
"enter": {
"x": {"scale":"x", "value":0},
"x2": {"scale":"x", "field":"data.x"},
"y": {"scale":"y", "field":"data.y"},
"height": {"scale":"y", "band":true, "offset":-4}
},
"update": { "fill": {"value":"black"} },
"hover": { "fill": {"value":"green"} }
}
}
]
Dan Andreescu
Dec 11, 2014, 4:14:44 PM12/11/14
to Naresh Bhatia, veg...@googlegroups.com
Can you include a sketch of what you'd like it to look like? I'm not sure I follow what you mean by "centered"? If my assumptions are correct, you want something like the image I'm inserting?
Where Y1 is the height of the "outer" rectangle and Y2 is the height of the "inner" rectangle.
--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Naresh Bhatia
Dec 11, 2014, 5:10:33 PM12/11/14
to veg...@googlegroups.com, naresh.a...@gmail.com
Yes, your diagram is very close. Only difference is that I don't want horizontal centering. Both rects should start from the left edge. Something like this:
Dan Andreescu
Dec 12, 2014, 11:29:56 AM12/12/14
to Naresh Bhatia, veg...@googlegroups.com
Gotcha. Well, I adapted the grouped-bar example, got rid of the faceted transform and did some "manual" banding. That seems to do the trick as long as you know which data is always going to be larger at each point:
{
"width": 300,
"height": 240,
"data": [
{
"name": "original",
"url": "data/groups.json"
},
{
"name": "one",
"source": "original",
"transform": [
{"type":"filter", "test":"d.data.position === 1"}
]
},
{
"name": "two",
"source": "original",
"transform": [
{"type":"filter", "test":"d.data.position === 2"}
]
}
],
"scales": [
{
"name": "cat",
"type": "ordinal",
"range": "height",
"padding": 0.2,
"domain": {"data": "two", "field": "data.category"}
},
{
"name": "val",
"range": "width",
"round": true,
"nice": true,
"domain": {"data": "two", "field": "data.value"}
},
{
"name": "color",
"type": "ordinal",
"range": "category20"
}
],
"axes": [
{"type": "y", "scale": "cat", "tickSize": 0, "tickPadding": 8},
{"type": "x", "scale": "val"}
],
"marks": [
{
"type": "rect",
"from": {"data": "two"},
"properties": {
"enter": {
"y": {"scale": "cat", "field": "data.category"},
"height": {"scale": "cat", "band": true},
"x": {"scale": "val", "field": "data.value"},
"x2": {"scale": "val", "value": 0},
"fill": {"scale": "color", "field": "data.position"}
}
}
},
{
"type": "rect",
"from": {"data": "one"},
"properties": {
"enter": {
"y": {"scale": "cat", "field": "data.category", "offset": 10},
"height": {"scale": "cat", "band": true, "offset": -20},
"x": {"scale": "val", "field": "data.value"},
"x2": {"scale": "val", "value": 0},
"fill": {"scale": "color", "field": "data.position"}
}
}
}
]
}
Naresh Bhatia
Dec 12, 2014, 12:10:49 PM12/12/14
to veg...@googlegroups.com
Thanks Dan. This is exactly what I was looking for. Really shows how flexible vega is!
Naresh
Reply all
Reply to author
Forward
0 new messages