Public
Edited
Dec 11, 2023
scaleFunctionRecommender([100, 200], [0, 480], { radius: true })
scaleFunctionRecommender([-1, 0, 1], ["green", "white", "orange"])
scaleFunctionRecommender([-1, 0, 1], ["green", "white", "orange"], {
point: true
})
scaleFunctionRecommender([-1, 0, 1], ["green", "white", "orange"], {
diverging: true
})
scaleFunctionRecommender([0,10000], ["red", "blue"], {
logNoZero:true
})
ha = ({
category: [1, 2, 3, 4],
hah: [1, 2, "no", 4],
heihi: [123, 312, "haha"],
categoryLength: 4,
hahLength: 4,
heihiLength: 3
})
key = "category"
Object.fromEntries("")
haa = [
{
category: [1, 2, 3, 4]
},
{ hah: [1, 2, "no", 4] },
{ heihi: [123, 312, "haha"] },
{ categoryLength: 4 }
]
{
let a = key + "Length";
return ha[key + "Length"];
}
function isColorString(str) {
// Check for hexadecimal notation
const hex = /^#([A-Fa-f0-9]{3,4}){1,2}$/;
// Check for RGB and RGBA
const rgb = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/i;
const rgba = /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/i;
// Check for HSL and HSLA
const hsl = /^hsl\((\d{1,3}),\s*([\d.]+)%,\s*([\d.]+)%\)$/i;
const hsla = /^hsla\((\d{1,3}),\s*([\d.]+)%,\s*([\d.]+)%,\s*(\d*(?:\.\d+)?)\)$/i;
// List of named colors - this is a limited set, there are more than 140 named colors
const namedColors = [
"red", "green", "blue", "cyan", "magenta", "yellow", "black", "white", "gray", "grey",
"purple", "lime", "teal", "aqua", "maroon", "navy", "silver", "olive", "fuchsia", "orange"
// ... add more named colors if needed
];
return hex.test(str) || rgb.test(str) || rgba.test(str) || hsl.test(str) || hsla.test(str) || namedColors.includes(str.toLowerCase());
}
function scaleFunctionRecommender(domainArray, rangeArray, caveat = {}) {
// Check if domainArray or rangeArray is empty
if (!domainArray.length || !rangeArray.length) {
return "Invalid domain or range array.";
}
// Check the type of the first element in domainArray to infer the input type
const domainType = typeof domainArray[0];
// Check if the range array contains colors, which could infer a color scale
const isColorScale = rangeArray.every(
(value) => typeof value === "string" && value.startsWith("#")
);
// Check the length difference between domain and range arrays
const lengthDiff = rangeArray.length - domainArray.length;
// Use conditions based on caveat arguments and characteristics of domain and range to recommend scales
if (caveat.diverging) {
return "d3.scaleDiverging";
} else if (caveat.radius) {
return "d3.scaleRadial";
} else if (caveat.time) {
return caveat.utc ? "d3.scaleUtc" : "d3.scaleTime";
} else if (caveat.logNoZero) {
return "d3.scaleLog";
} else if (caveat.logIncludeZero) {
return "d3.scaleSymlog";
} else if (caveat.exponential) {
return "d3.scalePow";
} else if (caveat.quantile) {
return "d3.scaleQuantile";
} else if (caveat.quantize) {
return "d3.scaleQuantize";
} else if (caveat.point) {
return "d3.scalePoint";
} else if (lengthDiff === 0 || domainType === "string") {
return "d3.scaleOrdinal";
} else if (domainType === "number") {
if (lengthDiff === 1) {
return "d3.scaleThreshold";
} else if (isColorScale && rangeArray.length === 2) {
return "d3.scaleSequential";
} else {
return "d3.scaleLinear";
}
}
// Default to linear scale if no specific match
return "d3.scaleLinear";
}
import("https://cdn.skypack.dev/seedrandom@3.0.5?min")
async hostConnected() {
const storedData = localStorage.getItem('audienceList');
if (storedData) {
const data = JSON.parse(storedData);
store.dispatch(getAudienceList(data));
} else {
const data = await api.getProjects('cs_viz');
localStorage.setItem('audienceList', JSON.stringify(data));
store.dispatch(getAudienceList(data));
}
}
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.
