Public
Edited
Dec 21, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
daily_orders_product
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
daily_orders
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
stores
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//key1 i key2 son els noms de les columnes (id) per comprovar els camps al fer el join
function joinArrays(arr1, arr2, key1, key2) {
return arr1.map(item1 => {
const item2 = arr2.find(item => item[key2] === item1[key1]);

// Join de arrays si hi ha coincidència
if (item2) {
// Crear i retorna nou objecte amb la combinació
return { ...item1, ...item2 };
} else {
// Si no hi ha coincidencia, notificar-ho
console.log("No s'ha realitzat el join");
}
});
}
Insert cell
function groupByAndAggregate (array, groupByProps, aggregateProps, aggregateFunction){
return array.reduce((result, current) => {
const keys = groupByProps.map(prop => current[prop]);
const key = keys.join('_');

if (!result[key]) {
result[key] = {};
groupByProps.forEach(prop => {
result[key][prop] = current[prop];
});
aggregateProps.forEach(prop => {
result[key][prop] = 0;
});
}

aggregateProps.forEach(prop => {
result[key][prop] = aggregateFunction(result[key][prop], current[prop]);
});

return result;
}, {});
};
Insert cell
Insert cell
sum = (a, b) => a + b;
Insert cell
Insert cell
// Join de les dues taules
orders_with_stores = joinArrays(daily_orders, stores, 'store_id', 'id');
Insert cell
// Group by per codi de botiga i pel seu nom (ciutat, on es troba la botiga) i sumem els nombre d'ordres de les agrupacions
stores_orders = groupByAndAggregate(orders_with_stores, ['id', 'city'], ['orders'], sum)
Insert cell
//Convertim les dades transformades en una array
arr_stores_orders = Object.keys(stores_orders).map(key => stores_orders[key]);
Insert cell
Insert cell
//Agrupem les dades
day_order = groupByAndAggregate(daily_orders_product, ['order_date'] , ['orders'], sum);
Insert cell
//Convertim a array
arr_day_order = Object.keys(day_order).map(key => day_order[key]);
Insert cell
Insert cell
// Agrupem les dades, calculem la mediana i fem el càlcul de la diferència afegint una nova columna a la taula de dades que s'utilitzarà per fer el plot
arr_day_category_orders = {

//agrupem les dades
let day_category_orders = groupByAndAggregate(daily_orders_product, ['day_of_week','category'] , ['orders'], sum);
// Convertiles dades a array per facilitar la seva manipulació
let arr_day_category_orders = Object.keys(day_category_orders).map(key => day_category_orders[key]);
// Obtenim les quantitats d'ordres de l'agrupació anterior
let ordersArray = arr_day_category_orders.map(item => item.orders);
// Ordenem les ordres per obtenir la mediana
ordersArray.sort((a, b) => a - b);
// Calcular la mediana
let median;
if (ordersArray.length % 2 === 0) {
median = (ordersArray[ordersArray.length / 2 - 1] + ordersArray[ordersArray.length / 2]) / 2;
} else {
median = ordersArray[Math.floor((ordersArray.length - 1) / 2)];
}
// Calcular la diferencia i afegir columna
arr_day_category_orders.forEach((item) => {
item.diferencia = item.orders - median;
});

return arr_day_category_orders;
}
Insert cell
//Ajustem les dades finals per poder visualitzar-les, ajuntant el codi de la botiga amb la ciutat
data_arr_day_category_orders = arr_day_category_orders.map((item) => ({
day_category: `${item.day_of_week} - ${item.category}`,
diferencia: item.diferencia,
}));
Insert cell
// Ordenar segons els dia de la setmana
data_arr_day_category_orders.sort((a, b) => {
const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
return daysOfWeek.indexOf(a.day_category.split(" - ")[0]) - daysOfWeek.indexOf(b.day_category.split(" - ")[0]);
});
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {Icicle} from "@d3/icicle"
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