viewof MSRP_IC = VegaLite({
width: 750,
height: 400,
data: { values: data },
transform: [
{ filter: { field: "Make", oneOf: makeSelect2 } },
{ filter: { field: "Vehicle Style", oneOf: bodyTypeSelect2 } },
{ filter: { field: "Engine Fuel Type", oneOf: gasTypeSelect2 } }
// { filter: { field: "Model", oneOf: selected_models } }
],
layer: [
{
mark: {
type: "errorband",
extend: "ci",
opacity: "0.2"
},
encoding: {
y: {
field: "Insurance Cost",
type: "quantitative",
title: "Insurance Cost"
},
tooltip: null
}
},
{
mark: "circle",
selection: {
// grid: {
// type: "interval",
// bind: "scales"
// }
brush: {
type: "interval"
}
},
encoding: {
x: { field: "MSRP", type: "quantitative" },
y: {
field: "Insurance Cost",
type: "quantitative",
scale: { type: "log" }
},
color: {
condition: {
field: "Engine Fuel Type",
type: "nominal",
selection: "brush"
},
// condition: {
// field: "Engine Fuel Type",
// type: "nominal",
// selection: "gasSelect"
// },
value: "lightgrey"
},
tooltip: [
{ field: "Make", type: "nominal" },
{ field: "Model", type: "nominal" },
{ field: "Vehicle Style", type: "nominal" },
{ field: "MSRP", type: "quantitative" },
{ field: "Engine Fuel Type", type: "nominal" },
{ field: "CMPG", type: "quantitative" },
{ field: "HMPG", type: "quantitative" }
],
size: {
value: 75
}
}
}
]
})
modelSelection2 = {
if (isEmpty(modelSelection) || modelSelection == false) {
return [];
} else if (filter2_select_x3.length == 1) {
return [modelSelection];
} else {
return modelSelection;
}
}
individualIC.addSignalListener("gasSelect", function(name, value) {
if (value == null) {
mutable selected_model_fuelType = null;
} else mutable selected_model_fuelType = value.Model;
})
mutable selected_model_fuelType = null
selected_model_fuelType2 = {
if (selected_model_fuelType == null || selected_model_fuelType == undefined) {
return modelSelection2;
} else {
return selected_model_fuelType;
}
}
// selected_models = {
// let model = generateArray(data.map(car => car.Model));
// let temp = [];
// let temp2 = [];
// let k = 0;
// if (isEmpty(selected_model) && isEmpty(selected_MPG)) {
// return model;
// } else if (selected_model != null) {
// for (k = 0; k < selected_model.length; k++) {
// temp[k] = model.filter(d => d["Model"] == selected_model[k]);
// }
// return temp;
// } else if (selected_MPG != null) {
// for (k = 0; k < selected_MPG.length; k++) {
// temp[k] = model.filter(d => d["Model"] == selected_model[k]);
// }
// return temp;
// } else {
// }
// }
// // for (k = 0; k < bodyTypeSelect2.length; k++) {
// // tempArr[k] = filtering_makeSelect.filter(
// // d => d["Vehicle Style"] == bodyTypeSelect2[k]
// // );
// // }
// // for (k = 0; k < tempArr.length; k++) {
// // tempArr2 = d3.merge([tempArr2, tempArr[k]]);
// // }
// // return tempArr2;
individualFE.addSignalListener("mpgSelect", function(name, value) {
if (value == null) {
mutable selected_model_MPG = null;
} else mutable selected_model_MPG = value.Model;
})
selected_model_MPG2 = {
if (selected_model_MPG == null || selected_model_MPG == undefined) {
return modelSelection2;
} else {
return selected_model_MPG;
}
}
gasTypeSelect2 = {
if (isEmpty(gasTypeSelect)) {
return fuelType;
} else {
return gasTypeSelect;
}
}
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.
