2b:null 2c:["$","title",null,{"children":"Datos Personales | Matias Venditti | Observable"}] 31:T46d,histogramView2 = { const parsedDates = [ ...parsedData.map(d => ({ date: d3.timeParse("%d/%m/%Y")(d["initDate"]), type: "Init" })), ...parsedData.map(d => ({ date: d3.timeParse("%d/%m/%Y")(d["endDate"]), type: "End" })) ]; const groupedData = d3.flatRollup( parsedDates, v => v.length, d => d.date, d => d.type ).map(([date, type, frequency]) => ({ date, type, frequency })); // Paso 3: Crear el histograma doble return Plot.plot({ marks: [ Plot.rectY(groupedData, { x: "date", y: "frequency", fill: "type", // Colorear según el tipo (init o end) title: d => `${d.frequency} ocurrencias` }), Plot.ruleY([0]) // Línea base del eje X ], x: { label: "Fechas", tickFormat: d3.timeFormat("%d-%m-%Y"), type: "band" }, y: { label: "Frecuencia" }, color: { domain: ["Init", "End"], range: ["steelblue", "orange"], legend: true // Mostrar leyenda }, width: 800, height: 400, marginLeft: 100, marginBottom: 50 }); }32:[] 2f:{"id":"37f3f00e63ae6193","slug":null,"title":"Datos Personales","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-11-22T19:34:06.218Z","update_time":"$D2024-11-23T14:12:55.121Z","view_time":null,"first_public_time":"$D2024-11-23T13:06:08.707Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"030f1e8d0f20b87c","login":"matias-venditti","name":"Matias Venditti","avatar_url":"https://avatars-next.observableusercontent.com/16d3c005c503190f0a49b88ef810494d914b6a1536396ef89ca899561390e238","tier":"starter_2024"},"version":484,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9695660237bca0e4","login":"matias-venditti","name":"Matias Venditti","avatar_url":"https://avatars-next.observableusercontent.com/bac6e8826687fe8aa3ecbdbe77a3bb0e390f0cf93005100eb61e34e4330cb169","tier":null}],"members":[{"type":"team","id":"030f1e8d0f20b87c","login":"matias-venditti","name":"Matias Venditti","avatar_url":"https://avatars-next.observableusercontent.com/16d3c005c503190f0a49b88ef810494d914b6a1536396ef89ca899561390e238","tier":"starter_2024","role":"editor"},{"type":"individual","id":"9695660237bca0e4","login":"matias-venditti","name":"Matias Venditti","avatar_url":"https://avatars-next.observableusercontent.com/bac6e8826687fe8aa3ecbdbe77a3bb0e390f0cf93005100eb61e34e4330cb169","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Datos Personales","cells":[{"id":0,"value":"# Datos Personales\n\nA continuación se muestra una serie de visualizaciones generadas a partir de los datos registrados para el curso de Información de la Visualización.\n\nEl trabajo en cuestión registra el consumo y horas detrás de los diferentes tipos de pantalla/dispositivo.\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"# 🔨 Función de Utilidad\n\nLa función determinada **parseDate** se utiliza para convertir los datos de entrada dentro del dataset en fechas Date de Javascript para poder ser tratado de forma acorde.\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"function parseDate(dateStr, hourStr) {\n const [day, month, year] = dateStr.split(\"/\").map(Number);\n const [hour, minute] = hourStr.split(\":\").map(Number);\n const [_, ampm] = hourStr.split(\" \");\n\n const hourNum = parseInt(hour, 10)\n const hours = ampm === 'p.m.' ? (hourNum + 12) : hourNum;\n \n return new Date(year, month - 1, day, hours, minute);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"
\n# 💻 Ingesta de Datos\n
\n\nSe incorpora el dataset a partir del CSV disponible en [Github](https://github.com/mvenditti-itba/ecd2024b/blob/main/data/screen-time.csv)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"data = d3.csv(\"https://mvenditti-itba.github.io/ecd2024b/data/screen-time.csv\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"parsedData = data.map(d => {\n const initDate = parseDate(d[\"Fecha inicio\"], d[\"Hora inicio\"])\n const endDate = parseDate(d[\"Fecha fin\"], d[\"Hora fin\"])\n \n return {\n timestamp: d[\"Marca temporal\"],\n device: d[\"Dispositivo\"],\n reason: d[\"Motivo\"],\n comments: d[\"Comentarios\"],\n initDate: d[\"Fecha inicio\"],\n endDate: d[\"Fecha fin\"],\n initTimestamp: initDate,\n endTimestamp: endDate,\n usageHours: (endDate-initDate)/(60*60*1000)\n }\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"parsedData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"
\n# 📊 Barras\n
\n# Horas de uso según cada **dispositivo**\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"view = {\n const grouped = d3.rollup(\n parsedData,\n v => d3.sum(v, d => d.usageHours), // Sumar las horas de uso por dispositivo\n d => d.device\n );\n\n // Convertir el resultado en un array para usarlo con Plot:\n const groupedData = Array.from(grouped, ([device, usageHours]) => ({ device, usageHours }));\n \n return Plot.plot({\n marginBottom: 50,\n marginLeft: 100,\n color: {\n scheme: \"category10\", // Paleta de colores predefinida\n legend: true // Mostrar leyenda\n },\n marks: [\n Plot.barX(groupedData, {\n x: \"usageHours\",\n sort: {y: \"x\", reverse: true},\n y: \"device\",\n fill: \"device\",\n title: d => `${d.usageHours} horas`\n })\n ],\n y: {\n label: \"Horas de uso\"\n },\n x: {\n label: \"Dispositivo\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"
\n# Horas de uso según motivo\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"view1 = {\n const grouped = d3.rollup(\n parsedData,\n v => d3.sum(v, d => d.usageHours), // Sumar las horas de uso por dispositivo\n d => d.reason\n );\n\n // Convertir el resultado en un array para usarlo con Plot:\n const groupedData = Array.from(grouped, ([reason, usageHours]) => ({ reason, usageHours }));\n \n return Plot.plot({\n marginBottom: 50,\n marginLeft: 100,\n color: {\n scheme: \"category10\", // Paleta de colores predefinida\n legend: true // Mostrar leyenda\n },\n marks: [\n Plot.barX(groupedData, {\n x: \"usageHours\",\n sort: {y: \"x\", reverse: true},\n y: \"reason\",\n fill: \"reason\",\n title: d => `${d.usageHours} horas`\n })\n ],\n y: {\n label: \"Horas de uso\"\n },\n x: {\n label: \"Motivo\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"
\n# 🌴 TreeMap - Horas de uso por dispositivo\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"import {Treemap} from \"@d3/treemap-component\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"treeMapView = {\n const grouped = d3.rollup(\n parsedData,\n v => d3.sum(v, d => d.usageHours), // Sumar las horas de uso por dispositivo\n d => d.device\n );\n\n const groupedData = Array.from(grouped, ([device, usageHours]) => ({ device, usageHours }));\n \n return Treemap(groupedData, {\n path: d => d.device, // Categoría para agrupar (dispositivo)\n value: d => d.usageHours, // Tamaño del rectángulo basado en horas de uso\n fill: \"device\", // Color basado en dispositivo\n title: d => `${d.device}: ${d.usageHours.toFixed(1)} horas`, // Tooltip\n width: 800,\n height: 500,\n label: d => d.device,\n fill: \"steelblue\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"import {PieChart} from \"@d3/pie-chart-component\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"
\n# 🍰 Pie Chart - Horas de uso por dispositivo\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"pieChart = {\n const grouped = d3.rollup(\n parsedData,\n v => d3.sum(v, d => d.usageHours), // Sumar las horas de uso por dispositivo\n d => d.device\n );\n\n const groupedData = Array.from(grouped, ([device, usageHours]) => ({ device, usageHours }));\n \n return PieChart(groupedData, {\n name: d => d.device,\n value: d => d.usageHours,\n width,\n height: 500,\n colors: d3.schemeCategory10\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"
\n# 🔢 Histograma - Acciones según su inicio/fin\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"
\n# 📅 Gantt\n
\n## Settings\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":466,"value":"viewof form = Inputs.form({\n plotHeight: Inputs.range([400, 800], {label: \"Plot height\", step: 1}),\n plotWidth: Inputs.range([800, 2000], {label: \"Plot width\", step: 1, value: 900}),\n barHeight: Inputs.range([0, 50], {label: \"Adjust bar height\", step: 1, value: 0}),\n gridlines: Inputs.radio([\"x\", \"y\", \"both\", \"none\"], {label: \"Gridlines\", value: \"x\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"
\n# Uso de distintas pantallas\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"ganttChart = {\n return Plot.plot({\n marks: [\n Plot.barX(parsedData, {\n y: \"device\",\n x1: \"initTimestamp\",\n x2: \"endTimestamp\",\n fill: \"device\",\n insetTop: form.barHeight,\n insetBottom: form.barHeight,\n title: d => `${d.device}\\nInicio: ${d3.timeFormat(\"%d-%m-%Y %H:%M\")(d.initTimestamp)}\\nFin: ${d3.timeFormat(\"%d-%m-%Y %H:%M\")(d.endTimestamp)}`\n })\n ],\n x: {\n label: \"Tiempo\",\n type: \"time\", // Escala temporal para el eje X\n tickFormat: d3.timeFormat(\"%d/%m %Hhs\"),\n grid: (form.gridlines == \"x\") | (form.gridlines == \"both\") ? true : null,\n },\n y: {\n label: \"Dispositivo\",\n domain: Array.from(new Set(parsedData.map(d => d.device))),\n grid: (form.gridlines == \"y\") | (form.gridlines == \"both\") ? true : null\n },\n color: {\n legend: true,\n label: \"Motivo\"\n },\n width: form.plotWidth,\n height: form.plotHeight,\n marginLeft: 100\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"
\n# Uso según motivo\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":478,"value":"ganttChart2 = {\n return Plot.plot({\n marks: [\n Plot.barX(parsedData, {\n y: \"reason\",\n x1: \"initTimestamp\",\n x2: \"endTimestamp\",\n fill: \"reason\",\n insetTop: form.barHeight,\n insetBottom: form.barHeight,\n title: d => `${d.reason}\\nInicio: ${d3.timeFormat(\"%d-%m-%Y %H:%M\")(d.initTimestamp)}\\nFin: ${d3.timeFormat(\"%d-%m-%Y %H:%M\")(d.endTimestamp)}`\n })\n ],\n x: {\n label: \"Tiempo\",\n type: \"time\", // Escala temporal para el eje X\n tickFormat: d3.timeFormat(\"%d/%m %Hhs\"),\n grid: (form.gridlines == \"x\") | (form.gridlines == \"both\") ? true : null,\n },\n y: {\n label: \"Motivo\",\n domain: Array.from(new Set(parsedData.map(d => d.reason))),\n grid: (form.gridlines == \"y\") | (form.gridlines == \"both\") ? true : null\n },\n color: {\n legend: true,\n label: \"Motivo\"\n },\n width: form.plotWidth,\n height: form.plotHeight,\n marginLeft: 100\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"
\n# 📦 Boxplot - Horas de uso por dispositivo\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":393,"value":"viewof boxplot = {\n const mappedData = parsedData.map(d => ({\n device: d.device,\n usageHours: d.usageHours\n }));\n\n const filteredData = mappedData.filter(d => d.usageHours !== null && d.device);\n\n return Plot.plot({\n width: 800,\n height: 400,\n marginLeft: 100,\n marginBottom: 50,\n x: {\n label: \"Devices\"\n },\n y: {\n label: \"Hour Usage\"\n },\n color: {\n legend: true,\n label: \"Devices\",\n },\n marks: [\n Plot.boxY(filteredData, {\n x: \"device\",\n y: \"usageHours\",\n fill: \"device\",\n opacity: 0.8,\n \n sort: {\n y: \"x\"\n }\n })\n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"