Public
Edited
Jun 21, 2023
1 star
chart = {
const div = d3
.create("div")
.attr("id", "phone-register")
.style("padding", "0!important")
.style("margin", "0!important")
.style("width", "500px")
.style("height", "100%")
.style("display", "flex")
.style("flex-direction", "column")
.style("align-items", "center")
.style("justify-content", "space-between")
.style("padding-bottom", "20px");
const group = div
.selectAll("div")
.data(data)
.join("div")
.style("position", "relative")
.style("margin-bottom", (d) =>
d.endDay ? "30px" : d.endWeek ? "70px" : "0px"
)
.style("font-size", "8px")
.attr("data-order", (d, i) => i + 1)
// To be displayed on phone devices
.attr("data-toggle", "tooltip")
.attr("data-placement", "left")
.attr(
"title",
(d) =>
`${d.weekday} ${d.date_formatted} ${
d.time_formatted
} 📞 ${typeAudioMessage(d.type)} ${
d.duration !== "0" ? d.duration : ""
}`
);
// Day of the week
group
.append("div")
.attr("class", "info-desktop")
.style("position", "absolute")
.style("left", "-130px")
.style("top", "-25px")
.style("width", "150px")
.style("font-size", "9.5px")
.style("font-weight", 600)
.style("text-align", "left")
.html((d) =>
d.startDay
? `
<span>${d.weekday}, ${d.date_formatted}</span>`
: ""
);
group
.append("div")
.attr("class", "info-desktop")
.style("position", "absolute")
.style("left", (d) => (d.type === "success" ? "-200px" : "-145px"))
.style("left", (d) => typeAudioLeftPosition(d.type))
.style("width", "200px")
.style("text-align", "left")
.html(
(d) =>
`<span class=${d.type !== "no-call" ? "soundcite" : ""} data-url=${
d.type !== "no-call"
? `https://data.civio.es/posts/cita-previa-telefono-imv/${d.file}`
: ""
}>📞 ${typeAudioMessageShort(d.type)} ${
d.duration !== "0" ? `(${d.duration})` : ""
} ${d.time_formatted}</span>`
);
group
.append("img")
.attr("src", (d) => typeAudioIcon(d.type))
.style("width", (d) => (d.type === "success" ? "45px" : "18px"))
.style("height", (d) => (d.type === "success" ? "45px" : "18px"))
.style("position", "inherit")
.style("top", (d) => (d.type === "success" ? "-4px" : "-2px"));
return div.node();
}
copyToClipboardButton(htmlCode)
dataModif = {
const dataCleaning = dataRaw.map((d) => ({
file: d.file,
duration: d.duration,
month: d.month,
weekday: d.weekday,
// Having troubles with date formatting...
//date_formatted: formatDate(parseDate(extractDate(d.file))),
// ... so doing this instead
date_formatted: `${formatDay(parseDate(extractDate(d.file)))} ${
d.month
} 2023`,
time_formatted: formatTimeCustom(extractTime(d.file)),
type: d.type,
startDay: +d.startDay,
endDay: +d.endDay,
endWeek: +d.endWeek,
date: parseDate(extractDate(d.file))
}));
return dataCleaning;
}
extractDate = (string) => string.split("_")[1].split("-")[0]
extractTime = (string) => string.split("_")[1].split("-")[1].split(".")[0]
parseDate = d3.timeParse("%Y%m%d")
//formatDate = d3.timeFormat("%d/%m%/%Y") // basic
formatDate = d3.timeFormat(`%d ${dateScaleMonths("%m")} %Y`)
formatDay = d3.timeFormat("%d")
formatYear = d3.timeFormat("%Y")
dateScaleMonths("04")
parseTime = d3.timeParse("%H%M%S")
formatTime = d3.timeFormat(`${clockEmoji("%H:%M")}%H%M %H:%M`)
formatTimeCustom = (string) => {
// Adjustment due to time difference (real time is +2h)
const adjustment = 2;
const hour = +string.slice(0, -4) + 2;
const min = string.slice(2, -2);
const timeChunk = `${hour}:${min}`;
return `${clockEmoji(timeChunk)} ${timeChunk}`;
}
typeAudioMessage = d3
.scaleOrdinal()
.domain(["short", "long", "no-call", "bank-holiday", "success"])
.range([
"Mensaje corto sin respuesta durante",
"Mensaje largo sin respuesta durante",
"No llegan a descolgar",
"Aviso de llamada en día festivo",
"Llamada contestada con éxito 💥"
])
typeAudioMessageShort = d3
.scaleOrdinal()
.domain(["short", "long", "no-call", "bank-holiday", "success"])
.range([
"Sin respuesta",
"Sin respuesta",
"Sin descolgar",
"Aviso día festivo",
"Contestada con éxito 💥"
])
typeAudioIcon = d3
.scaleOrdinal()
.domain(["short", "long", "no-call", "bank-holiday", "success"])
.range([urlShortCall, urlLongCall, urlNoCall, urlBankHoliday, urlEnd])
typeAudioLeftPosition = d3
.scaleOrdinal()
.domain(["short", "long", "no-call", "bank-holiday", "success"])
.range(["-165px", "-165px", "-120px", "-165px", "-200px"])
//urlEnd = await FileAttachment("icon_end.svg").url()
urlEnd = "https://civio.es/uploads/posts/cita-previa-telefono/icon_end.svg"
//urlLongCall = await FileAttachment("icon_long-call.svg").url()
urlLongCall = "https://civio.es/uploads/posts/cita-previa-telefono/icon_long-call.svg"
//urlShortCall = await FileAttachment("icon_short-call.svg").url()
urlShortCall = "https://civio.es/uploads/posts/cita-previa-telefono/icon_short-call.svg"
//urlBankHoliday = await FileAttachment("icon_holyday.svg").url()
urlBankHoliday = "https://civio.es/uploads/posts/cita-previa-telefono/icon_bank-holiday.svg"
//urlNoCall = await FileAttachment("icon_no-call.svg").url()
urlNoCall = "https://civio.es/uploads/posts/cita-previa-telefono/icon_no-call.svg"
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.
