data2 = FileAttachment("125 Example D3 Visualizations - Copy of Inclusion List@4.csv").csv()
viewof groupedBar = vl.markBar()
.data(data1)
.encode(
vl.column().fieldO("Visualization Type"),
vl.x().fieldN("Decomposition Strategy").axis({ title: null }),
vl.y().count().axis({ title: "Count of Examples" }),
vl.color().fieldN("Decomposition Strategy").scale({ range: colors })
)
.render()
order = ["All-in-One", "Function Calling", "Layered", "No Decomp. Inher.", "Unobservable D.I.", "Missing Decomp. Inher."]
viewof groupedBar2 = vl.markBar()
.data(data2)
.encode(
vl.column().fieldN("Source Decomposition Strategy"),//.scale({ domain: order }), // order it this way: "All-in-One", "Function Calling", "Layered", "No Decomp. Inher.", "Unobserv. Decomp. Inher.", "Missing Decomp. Inher."
vl.x().fieldN("Corpus Examples Decomposition").axis({ title: null }), //.order(order),
vl.y().count().axis({ title: "Count of Examples" }),
vl.color().fieldN("Corpus Examples Decomposition").scale({ range: colors })
)
.render()
{
const data = [
{category: 'Observable Sourced', value: 49.6, order: 1},
{category: 'Original', value: 40.8, order: 2},
{category: 'Outside Sourced', value: 6.4, order: 3},
{category: 'Orthogonal', value: 3.2, order: 4}
];
// Category one colors: [Blue: "#1f77b4", Orange: "#ff7f0e", Green: "#2ca02c", Red: "#d62728", Purple: "#9467bd", Brown: "#8c564b", Pink: "#e377c2", Gray: "#7f7f7f", Lime Green: "#bcbd22", Cyan: "#17becf"]
const colors = {
domain: ['Observable Sourced', 'Original', 'Outside Sourced', 'Orthogonal'],
range: ["#ff7f0e","#2ca02c", "#9467bd","#1f77b4"]
};
return vl.markArc({outerRadius: 100})
// .description('Reproducing http://robslink.com/SAS/democd91/pyramid_pie.htm')
.data(data)
.encode(
vl.column().fieldO("Code Inheritance Strategies Across 125 Examples"),
vl.theta().fieldQ('value').stack(true).scale({range: [0.75 * Math.PI, 2.75 * Math.PI]}),
vl.color().fieldN('category').title(null).scale(colors).legend({orient: 'right'}),
vl.order().fieldO('order')
)
.config({view: {stroke: null}})
.width(300)
.height(200)
.render();
}
// {
// const data = [
// {category: 'Status Quo Decomposition Inheritance', value: 50, order: 1},
// {category: 'Changing Function Calling Decomposition to Layered Decomposition', value: 17.7, order: 2},
// {category: 'Changing All-in-One Decomposition to Layered Decomposition', value: 11.3, order: 3},
// {category: 'Changing Function Calling Decomposition to Function Calling + Layered Decomposition', value: 1.6, order: 1},
// {category: 'Missing Decomposition Inheritance', value: 19.3, order: 4},
// ];
// // Category one colors: [Blue: "#1f77b4", Orange: "#ff7f0e", Green: "#2ca02c", Red: "#d62728", Purple: "#9467bd", Brown: "#8c564b", Pink: "#e377c2", Gray: "#7f7f7f", Lime Green: "#bcbd22", Cyan: "#17becf"]
// const colors = {
// domain: ['Status Quo Decomposition Inheritance', 'Changing Function Calling Decomposition to Layered Decomposition', 'Changing All-in-One Decomposition to Layered Decomposition', 'Changing Function Calling Decomposition to Function Calling + Layered Decomposition', 'Missing Decomposition Inheritance'],
// range: ["#e377c2","#7f7f7f","#bcbd22","#d62728", "#17becf"] // TODO: Change colors to somehow transition from the first pie chart into this one and show that we are just talking about Observable Sourced examples?, Make the legend completely show up
// };
// return vl.markArc({outerRadius: 150})
// // .description('Reproducing http://robslink.com/SAS/democd91/pyramid_pie.htm')
// .data(data)
// .encode(
// vl.theta().fieldQ('value').stack(true).scale({range: [0.75 * Math.PI, 2.75 * Math.PI]}),
// vl.color().fieldN('category').title(null).scale(colors).legend({orient: 'right'}),
// vl.order().fieldO('order')
// )
// .config({view: {stroke: null}})
// .width(300)
// .height(300)
// .render();
// }
// viewof stackedBar = vl.markBar()
// .data(data1)
// .encode(
// vl.x().fieldO("Type"),
// vl.y().count(), // .stack("normalize").axis({ format: "%" }),
// vl.color().fieldO("Decomposition Strategy").scale({ range: colors })
// )
// .render()
import {vl} from '@vega/vega-lite-api-v5'
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.
