Adding Vertical Lines
maxwel...@spotterrf.com
We're using the box graph and are trying to add horizontal and vertical lines. We figured out horizontal lines and from the documentation it should be the same for the vertical lines. Please see the JSFiddle we have with this setup and hopefully it is just a simple mistake on our end.
Thank you!
JSFidde: https://jsfiddle.net/8Lfyn6Lw/1/#&togetherjs=wq6pckwkrB
Our Code:
<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var data = [
{"year": 1991, "name":"alpha", "value": 15},
{"year": 1992, "name":"alpha", "value": 34},
{"year": 1991, "name":"alpha2", "value": 17},
{"year": 1992, "name":"alpha2", "value": 65},
{"year": 1991, "name":"beta", "value": 10},
{"year": 1992, "name":"beta", "value": 10},
{"year": 1991, "name":"beta2", "value": 40},
{"year": 1992, "name":"beta2", "value": 38},
{"year": 1991, "name":"gamma", "value": 5},
{"year": 1992, "name":"gamma", "value": 10},
{"year": 1991, "name":"gamma2", "value": 20},
{"year": 1992, "name":"gamma2", "value": 34},
{"year": 1991, "name":"delta", "value": 50},
{"year": 1992, "name":"delta", "value": 43},
{"year": 1991, "name":"delta2", "value": 17},
{"year": 1992, "name":"delta2", "value": 35}
]
var visualization = d3plus.viz()
.container("#viz")
.data(data)
.type("box")
.id("name")
.x({
value: "year",
lines: {
dasharray: "0",
font: {size: 10},
width: 3,
value: [{text: "up", color: "#063D2E", position: 1991}, {text: "mup", color: "#063D2E", position: 1992}]
}})
.y({
value: "value",
lines: {
dasharray: "0",
font: {size: 10},
width: 3,
value: [{text: "Max", color: "#063D2E", position: 45}, {text: "Min", color: "#063D2E", position: 8}]
}
})
.time("year")
.ui([{
"label": "Visualization Type",
"method": "type",
"value": ["scatter","box"]
}])
.draw()
</script>