Published
Edited
Feb 23, 2021
1 fork
2 stars
vl
.markBar()
.transform([
vl
.calculate(
`if(datum.type === 'Strongly disagree',-2,0) +
if(datum.type==='Disagree',-1,0) +
if(datum.type =='Neither agree nor disagree',0,0) +
if(datum.type ==='Agree',1,0) +
if(datum.type ==='Strongly agree',2,0)`
)
.as("q_order"),
vl
.calculate(
`if(datum.type === 'Disagree' || datum.type === 'Strongly disagree', datum.percentage,0) +
if(datum.type === 'Neither agree nor disagree', datum.percentage / 2,0)`
)
.as("signed_percentage"),
vl
.stack("percentage")
.as(["v1", "v2"])
.groupby("question"),
vl
.joinaggregate([vl.sum("signed_percentage").as("offset")])
.groupby("question"),
vl.calculate("datum.v1 - datum.offset").as("nx"),
vl.calculate("datum.v2 - datum.offset").as("nx2")
])
.encode(
vl
.x()
.fieldQ("nx")
.title("Percentage"),
vl.x2().field("nx2"),
vl
.y()
.fieldN("question")
.title("Question")
.axis({
offset: 5,
ticks: false,
minExtent: 60,
domain: false
}),
vl
.color()
.fieldN("type")
.scale({
domain: [
"Strongly disagree",
"Disagree",
"Neither agree nor disagree",
"Agree",
"Strongly agree"
],
range: ["#c30d24", "#f3a583", "#cccccc", "#94c6da", "#1770ab"],
type: "ordinal"
})
)
.data(data)
.render()
import { vl } from "@vega/vega-lite-api"
md`## Original Vega-Lite Example`
vegaEmbed(spec)
spec = ({
$schema: "https://vega.github.io/schema/vega-lite/v4.json",
description:
"A diverging stacked bar chart for sentiments towards a set of eight questions, displayed as percentages with neutral responses straddling the 0% mark",
data: {
values: data
},
transform: [
{
calculate:
"if(datum.type === 'Strongly disagree',-2,0) + if(datum.type==='Disagree',-1,0) + if(datum.type =='Neither agree nor disagree',0,0) + if(datum.type ==='Agree',1,0) + if(datum.type ==='Strongly agree',2,0)",
as: "q_order"
},
{
calculate:
"if(datum.type === 'Disagree' || datum.type === 'Strongly disagree', datum.percentage,0) + if(datum.type === 'Neither agree nor disagree', datum.percentage / 2,0)",
as: "signed_percentage"
},
{ stack: "percentage", as: ["v1", "v2"], groupby: ["question"] },
{
joinaggregate: [
{
field: "signed_percentage",
op: "sum",
as: "offset"
}
],
groupby: ["question"]
},
{ calculate: "datum.v1 - datum.offset", as: "nx" },
{ calculate: "datum.v2 - datum.offset", as: "nx2" }
],
mark: "bar",
encoding: {
x: {
field: "nx",
type: "quantitative",
title: "Percentage"
},
x2: { field: "nx2" },
y: {
field: "question",
type: "nominal",
title: "Question",
axis: {
offset: 5,
ticks: false,
minExtent: 60,
domain: false
}
},
color: {
field: "type",
type: "nominal",
title: "Response",
scale: {
domain: [
"Strongly disagree",
"Disagree",
"Neither agree nor disagree",
"Agree",
"Strongly agree"
],
range: ["#c30d24", "#f3a583", "#cccccc", "#94c6da", "#1770ab"],
type: "ordinal"
}
}
}
})
vegaEmbed = require("vega-embed@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
