Public
Edited
Feb 6, 2023
Importers
Insert cell
Insert cell
Insert cell
Insert cell
function autoType(obj) {
const copy = { ...obj };
const skippedProps = {};

for (let key in copy) {
const value = copy[key];

// If a prop is null or undefined set it to empty string so that d3.autoType doesn't throw error
if (value === null || value === undefined) {
copy[key] = "";
continue;
}

// If a prop is not string, skip passing through d3.autoType
if (typeof value !== "string") {
skippedProps[key] = value;
delete copy[key];
continue;
}

const str = value.replace(",", "");
if (!isNaN(+str)) {
copy[key] = str;
}
}

return {
...skippedProps,
...d3.autoType(copy)
};
}
Insert cell
// String values, with some numbers with commas
autoType({
Year: "2000",
Make: "Mercury",
Model: "Cougar",
Length: "2.38",
Price: "200,000"
})
Insert cell
// Some values with non string data types
autoType({
Year: 2016,
Make: "Mercury",
Model: "Cougar",
Length: 2.38,
Price: "200,000",
Length: undefined
})
Insert cell
Insert cell
Insert cell
function mapEntries(obj, { key = (k) => k, value = (v) => v } = {}) {
if (typeof obj !== "object") return obj;

return Object.entries(obj).reduce(
(acc, [k, v]) => ({ ...acc, [key(k)]: value(v) }),
{}
);
}
Insert cell
mapEntries(
{ Name: "Jane Doe", City: "Lisbon" },
{ key: (k) => k.toLowerCase(), value: (k) => k.toLowerCase() }
)
Insert cell
Insert cell
function mapKeys(obj, key) {
return mapEntries(obj, { key });
}
Insert cell
mapKeys({ Name: "Jane Doe", City: "Lisbon" }, (k) => k.toLowerCase())
Insert cell
Insert cell
function mapValues(obj, value) {
return mapEntries(obj, { value });
}
Insert cell
mapValues({ Name: "Jane Doe", City: "Lisbon" }, (v) => v.toLowerCase())
Insert cell
Insert cell
Insert cell
function translateKeys(obj, translationMap) {
return mapKeys(obj, (k) => translationMap.get(k) ?? k);
}
Insert cell
translations = new Map([
["#","Index"],
["गा.पा./न.पा.को नाम","Name"],
["घरपरिवार","Households"],
["जम्मा","Total"],
["पुरुष","Men"],
["महिला","Women"],
["औषत घरपरिवार संख्या","Average household size"],
["लैगिंक अनुपात","Sex ratio"],
])
Insert cell
example = translateKeys({
"गा.पा./न.पा.को नाम": "जम्मा",
घरपरिवार: "78,309",
जम्मा: "323,288",
पुरुष: "143,410",
महिला: "179,878",
"औषत घरपरिवार संख्या": "4.13",
"लैगिंक अनुपात": "79.73",
}, translations)
Insert cell
Insert cell
function translateValue(
obj,
translationMap,
{
key, // The key of the value to be translated
currentValueLang, // ISO Language code ("ne", "hi",...) of the current value. This will be appended to the key.
translatedValueLang // ISO Language code ("ne", "hi",...) of the translate value. This will be appended to the key.
} = {}
) {
if (!(translationMap instanceof Map))
throw new Error("`translationMap` should be an instance of Map");
if (key == null) throw new Error("`key` is not provided");
if (currentValueLang == null)
throw new Error("`currentValueLang` is not provided");

const copy = { ...obj };

const currentValueKey = `${key}:${currentValueLang}`;
const translatedValueKey =
translatedValueLang == null ? key : `${key}:${translatedValueLang}`;

const value = obj[key];

// Return the object if the key is not present in the Object
if (value === undefined) return obj;

const translatedValue = translationMap.get(value);
delete copy[key];

return {
...copy,
[translatedValueKey]: translatedValue,
[currentValueKey]: value
};
}
Insert cell
Insert cell
example2 = ({
Name: "जम्मा",
Households: "78,309",
Total: "323,288",
Men: "143,410",
Women: "179,878",
"Average household size": "4.13",
"Sex ratio": "79.73"
})
Insert cell
translateValue(
example2,
new Map([
["जम्मा", "Total"],
["महिला", "Female"],
["पुरुष", "Male"]
]),
{
key: "Name",
currentValueLang: "ne"
}
)
Insert cell
Insert cell
translateValue(
example2,
new Map([
["जम्मा", "Total"],
["महिला", "Female"],
["पुरुष", "Male"]
]),
{
key: "SomethingNotThere",
currentValueLang: "ne"
}
)
Insert cell
Insert cell
exampleArray = [
{
season: "ग्रीष्म ऋतु"
},
{
season: "शरद ऋतु"
},
{
season: "जाडो"
},
{
season: "वसन्त"
}
]
Insert cell
exampleArray.map((d) =>
translateValue(
d,
new Map([
["ग्रीष्म ऋतु", "Summer"],
["शरद ऋतु", "Autumn"],
["जाडो", "Winter"]
]),
{
key: "season",
currentValueLang: "ne"
}
)
)
Insert cell
Insert cell
Generates an accessor function if the user provides a key. Otherwise, if user provide a function, the function is returned.
Insert cell
function accessor(keyOrFn) {
if (typeof keyOrFn === "function") return keyOrFn;

return (d) => d[keyOrFn];
}
Insert cell
accessor("name")({
name: "Jane Doe", age: 29
})
Insert cell
accessor((d) => d.name)({
name: "Jane Doe",
age: 29
})
Insert cell
Insert cell
Insert cell

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.
Learn more