I want set minimum for maximum value displayed on line chart. For example, it should always display values from 0 to 100 on y-axis, something as follows:
I achieved this with:
vl.y().fieldQ('d').scale({"domain":[0,2]}),
as can be seen in the example below (Please run example below to see how line chart gets rendered.):
<!DOCTYPE html>
<html>
<head>
<!--
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script> -->
<script src="https://unpkg.com/[email protected]/build/vega.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/vega-lite.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/vega-lite-api.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/vega-embed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js">
</script>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">
const data = [
{
"data_name": "data1",
"d": 0.1,
"e": 0.7
},
{
"data_name": "data2",
"d": 0.2,
"e": 0.3
},
{
"data_name": "data3",
"d": 0.3,
"e": 0.4
},
{
"data_name": "data4",
"d": 0.25,
"e": 0.2
},
{
"data_name": "data5",
"d": 0.4,
"e": 0.15
},
{
"data_name": "data6",
"d": 0.6,
"e": 0.2
},
{
"data_name": "data7",
"d": 0.15,
"e": 0.5
},
{
"data_name": "data8",
"d": 0.7,
"e": 0.13
},
{
"data_name": "data9",
"d": 0.56,
"e": 0.22
},
{
"data_name": "data10",
"d": 0.35,
"e": 0.2
},
{
"data_name": "data11",
"d": 0.01,
"e": 0.89
},
{
"data_name": "data12",
"d": 0.57,
"e": 0.24
},
{
"data_name": "data13",
"d": 0.87,
"e": 0.23
},
{
"data_name": "data14",
"d": 0.5,
"e": 0.44
},
{
"data_name": "data15",
"d": 0.76,
"e": 0.53
},
{
"data_name": "data16",
"d": 0.1,
"e": 0.72
},
{
"data_name": "data17",
"d": 0.88,
"e": 0.63
},
{
"data_name": "data18",
"d": 0.55,
"e": 0.72
},
{
"data_name": "data19",
"d": 0.97,
"e": 0.16
},
{
"data_name": "data20",
"d": 0.28,
"e": 0.18
},
{
"data_name": "data21",
"d": 0.56,
"e": 0.96
},
{
"data_name": "data22",
"d": 0.92,
"e": 0
},
{
"data_name": "data23",
"d": 0.91,
"e": 0.41
},
{
"data_name": "data24",
"d": 0.24,
"e": 0.59
},
{
"data_name": "data25",
"d": 0.01,
"e": 0.29
},
{
"data_name": "data26",
"d": 0.12,
"e": 0.41
},
{
"data_name": "data27",
"d": 0.49,
"e": 0.66
},
{
"data_name": "data28",
"d": 0.54,
"e": 0.81
},
{
"data_name": "data29",
"d": 0.61,
"e": 0.51
},
{
"data_name": "data30",
"d": 0.32,
"e": 0.88
},
{
"data_name": "data31",
"d": 0.32,
"e": 0.51
},
{
"data_name": "data32",
"d": 0.38,
"e": 0.67
},
{
"data_name": "data33",
"d": 0.27,
"e": 0.52
},
{
"data_name": "data34",
"d": 0.92,
"e": 0.43
},
{
"data_name": "data35",
"d": 0.82,
"e": 0.03
},
{
"data_name": "data36",
"d": 0,
"e": 0.29
},
{
"data_name": "data37",
"d": 0.5,
"e": 0.91
},
{
"data_name": "data38",
"d": 0.67,
"e": 0.6
},
{
"data_name": "data39",
"d": 0.51,
"e": 0.62
},
{
"data_name": "data40",
"d": 0.43,
"e": 0.96
},
{
"data_name": "data41",
"d": 0.86,
"e": 0.72
},
{
"data_name": "data42",
"d": 0.05,
"e": 0.55
},
{
"data_name": "data43",
"d": 0.19,
"e": 0.62
},
{
"data_name": "data44",
"d": 0.96,
"e": 0.06
},
{
"data_name": "data45",
"d": 0.84,
"e": 0.2
},
{
"data_name": "data46",
"d": 0.92,
"e": 0.33
},
{
"data_name": "data47",
"d": 0.19,
"e": 0.86
},
{
"data_name": "data48",
"d": 0.44,
"e": 0.01
},
{
"data_name": "data49",
"d": 0.82,
"e": 0.54
},
{
"data_name": "data50",
"d": 0.64,
"e": 0.07
},
{
"data_name": "data51",
"d": 0.44,
"e": 0.3
},
{
"data_name": "data52",
"d": 0.09,
"e": 0.99
},
{
"data_name": "data53",
"d": 0.54,
"e": 0.52
},
{
"data_name": "data54",
"d": 0.82,
"e": 0.26
},
{
"data_name": "data55",
"d": 0.64,
"e": 0.67
},
{
"data_name": "data56",
"d": 0.06,
"e": 0.22
},
{
"data_name": "data57",
"d": 0.58,
"e": 0.8
},
{
"data_name": "data58",
"d": 0,
"e": 0.07
},
{
"data_name": "data59",
"d": 0.43,
"e": 0.77
},
{
"data_name": "data60",
"d": 0.38,
"e": 0.42
}
];
function createChart(video_data)
{
const mpg = vl.markLine().data(video_data).encode(
vl.x()
.fieldN('data_name')
.title('datas')
.sort('-y'),
vl.y().fieldQ('d').scale({"domain":[0,2]}),
vl.tooltip(['data_name', 'd', 'e'])
).width(500);
const plot = vl.hconcat(
vl.layer(mpg, mpg.markCircle())
)
return plot.toObject();
};
function showStats()
{
const spec = this.createChart(data);
// console.log(spec);
const opt = {
renderer: "canvas",
actions: false
};
vegaEmbed("#viz", spec, opt);
};
showStats();
</script>
</body>
</html>The problem arises when some data point has value more than 2 (it gets rendered out of the y axis. Please run example below to see how line chart gets rendered):
c<!DOCTYPE html>
<html>
<head>
<!--
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script> -->
<script src="https://unpkg.com/[email protected]/build/vega.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/vega-lite.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/vega-lite-api.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/vega-embed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js">
</script>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">
const data = [
{
"data_name": "data1",
"d": 0.1,
"e": 0.7
},
{
"data_name": "data2",
"d": 0.2,
"e": 0.3
},
{
"data_name": "data3",
"d": 0.3,
"e": 0.4
},
{
"data_name": "data4",
"d": 0.25,
"e": 0.2
},
{
"data_name": "data5",
"d": 0.4,
"e": 0.15
},
{
"data_name": "data6",
"d": 0.6,
"e": 0.2
},
{
"data_name": "data7",
"d": 0.15,
"e": 0.5
},
{
"data_name": "data8",
"d": 0.7,
"e": 0.13
},
{
"data_name": "data9",
"d": 0.56,
"e": 0.22
},
{
"data_name": "data10",
"d": 0.35,
"e": 0.2
},
{
"data_name": "data11",
"d": 0.01,
"e": 0.89
},
{
"data_name": "data12",
"d": 0.57,
"e": 0.24
},
{
"data_name": "data13",
"d": 0.87,
"e": 0.23
},
{
"data_name": "data14",
"d": 0.5,
"e": 0.44
},
{
"data_name": "data15",
"d": 0.76,
"e": 0.53
},
{
"data_name": "data16",
"d": 0.1,
"e": 0.72
},
{
"data_name": "data17",
"d": 0.88,
"e": 0.63
},
{
"data_name": "data18",
"d": 0.55,
"e": 0.72
},
{
"data_name": "data19",
"d": 0.97,
"e": 0.16
},
{
"data_name": "data20",
"d": 0.28,
"e": 0.18
},
{
"data_name": "data21",
"d": 0.56,
"e": 0.96
},
{
"data_name": "data22",
"d": 0.92,
"e": 0
},
{
"data_name": "data23",
"d": 0.91,
"e": 0.41
},
{
"data_name": "data24",
"d": 0.24,
"e": 0.59
},
{
"data_name": "data25",
"d": 0.01,
"e": 0.29
},
{
"data_name": "data26",
"d": 0.12,
"e": 0.41
},
{
"data_name": "data27",
"d": 0.49,
"e": 0.66
},
{
"data_name": "data28",
"d": 0.54,
"e": 0.81
},
{
"data_name": "data29",
"d": 0.61,
"e": 0.51
},
{
"data_name": "data30",
"d": 0.32,
"e": 0.88
},
{
"data_name": "data31",
"d": 0.32,
"e": 0.51
},
{
"data_name": "data32",
"d": 0.38,
"e": 0.67
},
{
"data_name": "data33",
"d": 0.27,
"e": 0.52
},
{
"data_name": "data34",
"d": 0.92,
"e": 0.43
},
{
"data_name": "data35",
"d": 0.82,
"e": 0.03
},
{
"data_name": "data36",
"d": 0,
"e": 0.29
},
{
"data_name": "data37",
"d": 0.5,
"e": 0.91
},
{
"data_name": "data38",
"d": 0.67,
"e": 0.6
},
{
"data_name": "data39",
"d": 0.51,
"e": 0.62
},
{
"data_name": "data40",
"d": 0.43,
"e": 0.96
},
{
"data_name": "data41",
"d": 0.86,
"e": 0.72
},
{
"data_name": "data42",
"d": 0.05,
"e": 0.55
},
{
"data_name": "data43",
"d": 0.19,
"e": 0.62
},
{
"data_name": "data44",
"d": 0.96,
"e": 0.06
},
{
"data_name": "data45",
"d": 0.84,
"e": 0.2
},
{
"data_name": "data46",
"d": 0.92,
"e": 0.33
},
{
"data_name": "data47",
"d": 0.19,
"e": 0.86
},
{
"data_name": "data48",
"d": 0.44,
"e": 0.01
},
{
"data_name": "data49",
"d": 0.82,
"e": 0.54
},
{
"data_name": "data50",
"d": 0.64,
"e": 0.07
},
{
"data_name": "data51",
"d": 0.44,
"e": 0.3
},
{
"data_name": "data52",
"d": 0.09,
"e": 0.99
},
{
"data_name": "data53",
"d": 0.54,
"e": 0.52
},
{
"data_name": "data54",
"d": 0.82,
"e": 0.26
},
{
"data_name": "data55",
"d": 0.64,
"e": 0.67
},
{
"data_name": "data56",
"d": 0.06,
"e": 0.22
},
{
"data_name": "data57",
"d": 0.58,
"e": 0.8
},
{
"data_name": "data58",
"d": 0,
"e": 0.07
},
{
"data_name": "data59",
"d": 0.43,
"e": 0.77
},
{
"data_name": "data60",
"d": 3.38,
"e": 0.42
}
];
function createChart(video_data)
{
const mpg = vl.markLine().data(video_data).encode(
vl.x()
.fieldN('data_name')
.title('datas')
.sort('-y'),
vl.y().fieldQ('d').scale({"domain":[0,2]}),
vl.tooltip(['data_name', 'd', 'e'])
).width(500);
const plot = vl.hconcat(
vl.layer(mpg, mpg.markCircle())
)
return plot.toObject();
};
function showStats()
{
const spec = this.createChart(data);
// console.log(spec);
const opt = {
renderer: "canvas",
actions: false
};
vegaEmbed("#viz", spec, opt);
};
showStats();
</script>
</body>
</html> How can I make vega lite extend y-axis (extend "0 to 2" to "0 to 3.38") whenever data point is out of range, but always show some fixed range (that is, first graph showed range "0 to 2" even though max value in data was 1).
Ref:
CodePudding user response：
Just compute the domain by yourself instead of relying on the automated scale. If data is just the array of values, then
data.reduce((domain, d) => ([
Math.min(domain[0], d),
Math.max(domain[1], d)
]), [data[0], data[0]])
computes the domain. If you want to extend this to [minValue, maxValue] do
data.reduce((domain, d) => ([
Math.min(domain[0], d, minValue),
Math.max(domain[1], d, maxValue)
]), [data[0], data[0]])
If d3 is already in your dependency list, you could use one of d3.min, d3.max, d3.extent for convenience instead of the built in Array.reduce.