31:T6f4,

Dates

32:T1e9e,viewof chart = { let container = html`

`; const x_axis = d3 .select(container) .append("div") .attr("class", "x_axis") .append("svg") .attr("width", width) .attr("height", 28) .append("g"); x_axis.append("g").call(xAxis); const svg = d3 .select(container) .append("svg") .attr("viewBox", [0, 0, width, height]) .call((g) => g .append("g") .attr("class", "v_lines") .selectAll("line") .data(x.ticks(ticks)) .join("line") .attr("x1", (d) => x(d)) .attr("x2", (d) => x(d)) .attr("y2", height) ); // arrows const refX = 3; const refY = 3; const markerWidth = 4; const markerHeight = 4; const arrowPoints = [[0, 0], [0, 5], [5, 2.5]]; svg .append("defs") .append("marker") .attr("id", "arrow") .attr("viewBox", [0, 0, 8, 8]) .attr("refX", refX) .attr("refY", refY) .attr("markerWidth", 5) .attr("markerHeight", 5) .attr("orient", "auto-start-reverse") .append("path") .attr("d", d3.line()(arrowPoints)) .attr("stroke", "black"); const uncertain_d = svg .append("g") .attr("stroke-width", size) .selectAll("line") .data(data.filter((d) => d.dress && d.dress.uncertainty && d.dress.uncertainty == "nach" )) .join("line") .attr("class", "lines") .attr("stroke", colors.dress) .attr("x1", (d) => x(new Date(d.dress.start))) .attr("x2", (d) => d.dress.uncertainty ? x(new Date(d.dress.start)) + 20 : x(new Date(d.dress.end))) .attr("y1", (d) => y(d.id)) .attr("y2", (d) => y(d.id)) .attr('marker-end', 'url(#arrow)') const uncertain_p = svg .append("g") .attr("stroke-width", size) .selectAll("line") .data(data.filter((d) => d.painting && d.painting.uncertainty && d.painting.uncertainty == "nach" )) .join("line") .attr("class", "lines") .attr("stroke", colors.painting) .attr("x2", (d) => d.painting.uncertainty ? x(new Date(d.painting.start)) + 20 : x(new Date(d.painting.end))) //.attr("y1", (d) => y(d.id)) //.attr("y2", (d) => y(d.id)) .attr("y1", (d) => d.dress ? y(d.id) + size*2 : y(d.id) ) .attr("y2", (d) => d.dress ? y(d.id) + size*2 : y(d.id) ) .attr('marker-end', 'url(#arrow)') const uncertain_dp = svg .append("g") .attr("stroke-width", size) .selectAll("line") .data(data.filter((d) => d.depictedperson && d.depictedperson.uncertainty && d.depictedperson.uncertainty == "nach" )) .join("line") .attr("class", "lines") .attr("stroke", colors.depictedperson) .attr("x1", (d) => x(new Date(d.depictedperson.start))) .attr("x2", (d) => d.depictedperson.uncertainty ? x(new Date(d.depictedperson.start)) + 20 : x(new Date(d.depictedperson.end))) //.attr("y1", (d) => y(d.id)) //.attr("y2", (d) => y(d.id)) .attr("y1", (d) => d.painting || d.dress ? y(d.id) + size*2 : y(d.id) ) .attr("y2", (d) => d.painting || d.dress ? y(d.id) + size*2 : y(d.id) ) .attr('marker-end', 'url(#arrow)') // lines const line = svg .append("g") .attr("stroke-width", 1) .selectAll("line") .data(data) .join("line") .attr("stroke", "black") .attr("opacity", ".2") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", (d) => y(d.id)) .attr("y2", (d) => y(d.id)); const d_line = svg .append("g") .attr("stroke-width", size) .selectAll("line") .data(data.filter((d) => d.dress && d.dress.uncertainty ? d.dress && d.dress.uncertainty != "nach" : d.dress )) .join("line") .attr("class", "lines") .attr("stroke", colors.dress) .attr("stroke-dasharray", (d) => d.dress.uncertainty ? "2 2" : 0 ) .attr("x1", (d) => d.dress.uncertainty ? x(new Date(d.dress.start)) - nachSpan: x(new Date(d.dress.start))) .attr("x2", (d) => d.dress.uncertainty ? x(new Date(d.dress.start)) + nachSpan : x(new Date(d.dress.end))) .attr("y1", (d) => y(d.id)) .attr("y2", (d) => y(d.id)); const p_line = svg .append("g") .attr("stroke-width", size) .selectAll("line") .attr("class", "lines") .data(data.filter((d) => d.painting && d.painting.uncertainty ? d.painting && d.painting.uncertainty != "nach" : d.painting )) .join("line") .attr("stroke", colors.painting) .attr("stroke-dasharray", (d) => d.painting.uncertainty ? "2 2" : 0 ) .attr("x1", (d) => d.painting.uncertainty ? x(new Date(d.painting.start)) - nachSpan : x(new Date(d.painting.start))) .attr("x2", (d) => d.painting.uncertainty ? x(new Date(d.painting.start)) + nachSpan : x(new Date(d.painting.end))) .attr("y1", (d) => d.dress ? y(d.id) + size*2 : y(d.id) ) .attr("y2", (d) => d.dress ? y(d.id) + size*2 : y(d.id) ) const dp_line = svg .append("g") .attr("stroke-width", size) .selectAll("line") .data(data.filter((d) => d.depictedperson && d.depictedperson.uncertainty ? d.depictedperson && d.depictedperson.uncertainty != "nach" : d.depictedperson )) .join("line") .attr("class", "lines") .attr("stroke", colors.depictedperson) .attr("stroke-dasharray", (d) => d.depictedperson.uncertainty ? "2 2" : 0 ) .attr("x1", (d) => d.depictedperson.uncertainty ? x(new Date(d.depictedperson.start)) - nachSpan : x(new Date(d.depictedperson.start))) .attr("x2", (d) => d.depictedperson.uncertainty ? x(new Date(d.depictedperson.start)) + nachSpan : x(new Date(d.depictedperson.end))) .attr("y1", (d) => d.painting || d.dress ? y(d.id) + size*2 : y(d.id) ) .attr("y2", (d) => d.painting || d.dress ? y(d.id) + size*2 : y(d.id) ) const label = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "end") .selectAll("text") .data(data) .join("text") .attr("x", margin.left - 5) .attr("y", (d) => y(d.id)) .attr("dy", "0.35em") .text((d) => d.id); const d_dot1 = svg .append("g") .selectAll("circle") .data(data.filter((d) => d.dress && !d.dress.uncertainty)) .join("circle") .attr("cx", (d) => x(new Date(d.dress.start))) .attr("cy", (d) => y(d.id) ) .attr("r", 2.5); const d_dot2 = svg .append("g") .selectAll("circle") .data(data.filter((d) => d.dress)) .join("circle") .attr("cx", (d) => d.dress.uncertainty ? x(new Date(d.dress.start)) : x(new Date(d.dress.end))) .attr("cy", (d) => y(d.id) ) .attr("r", 2.5); const p_dot1 = svg .append("g") .selectAll("circle") .data(data.filter((d) => d.painting && !d.painting.uncertainty)) .join("circle") .attr("cx", (d) => x(new Date(d.painting.start))) .attr("cy", (d) => d.dress ? y(d.id) + size*2 : y(d.id) ) .attr("r", 2.5); const p_dot2 = svg .append("g") .selectAll("circle") .data(data.filter((d) => d.painting)) .join("circle") .attr("cx", (d) => d.painting.uncertainty ? x(new Date(d.painting.start)) : x(new Date(d.painting.end))) .attr("cy", (d) => d.dress ? y(d.id) + size*2 : y(d.id) ) .attr("r", 2.5); const dp_dot1 = svg .append("g") .selectAll("circle") .data(data.filter((d) => d.depictedperson && !d.depictedperson.uncertainty)) .join("circle") .attr("cx", (d) => x(new Date(d.depictedperson.start))) .attr("cy", (d) => d.painting || d.dress ? y(d.id) + size*2 : y(d.id) ) .attr("r", 2.5); const dp_dot2 = svg .append("g") .selectAll("circle") .data(data.filter((d) => d.depictedperson)) .join("circle") .attr("cx", (d) => d.depictedperson.uncertainty ? x(new Date(d.depictedperson.start)) : x(new Date(d.depictedperson.end))) .attr("cy", (d) => d.painting || d.dress ? y(d.id) + size*2 : y(d.id) ) .attr("r", 2.5); return container; }33:T5bc,dressDate = { let text = "Datierung Kleidung (Modewissenschaftliche Einschätzung)" return[...new Map(rawdata .filter((d) => d["ecrm:P108i_was_produced_by"]?.find((t) =>t["ecrm:P3_has_note"]?.[0]["@value"] === text )) .map((d) => { let idx = 0; for (let i = 0; i < d["ecrm:P108i_was_produced_by"].length; i++){ if(d["ecrm:P108i_was_produced_by"][i]["ecrm:P3_has_note"]?.[0]["@value"] == text){ idx = i; } }; const date = d["ecrm:P108i_was_produced_by"][idx]["ecrm:P4_has_time-span"][0]["ecrm:P82_at_some_time_within"]["@value"]; const id = d["ecrm:P48_has_preferred_identifier"][0]["ecrm:P90_has_symbolic_content"][0]["@value"]; if (date.includes("/")){ return { id: id, dress:{ start: date.split(" / ")[0], end: date.split(" / ")[1] } }; } if (date.includes("um")){ return { id: id, dress:{ start: date.replace("um","").replace(/\s+/g, '')+ "-01-01", end: null, uncertainty: "um" } }; } if (date.includes("nach")){ return { id: id, dress:{ start: date.replace("nach","").replace(/\s+/g, '')+ "-01-01", end:null, uncertainty: "nach" } }; } }) .filter(d => d && !d.dress.start.includes("?") && !d.dress.start.includes("/")) .map(item => [JSON.stringify(item), item])).values()] }34:T5c5,paintingDate = { let text = "Datierung Gemälde (laut Karteikarte)" return[...new Map(rawdata .filter((d) => d["ecrm:P108i_was_produced_by"]?.find( (t) =>t["ecrm:P3_has_note"]?.[0]["@value"] == text ) ) .map((d) => { let idx = 0; for (let i = 0; i < d["ecrm:P108i_was_produced_by"].length; i++){ if(d["ecrm:P108i_was_produced_by"][i]["ecrm:P3_has_note"]?.[0]["@value"] == text){ idx = i; } }; const date = d["ecrm:P108i_was_produced_by"][idx]["ecrm:P4_has_time-span"][0]["ecrm:P82_at_some_time_within"]["@value"]; const id =d["ecrm:P48_has_preferred_identifier"][0]["ecrm:P90_has_symbolic_content"][0]["@value"]; if (date.includes("/")){ return { id: id, painting:{ start: date.split(" / ")[0], end: date.split(" / ")[1] } }; } if (date.includes("um")){ return { id: id, painting:{ start: date.replace("um","").replace(/\s+/g, '')+ "-01-01", end: null, uncertainty: "um" } }; } if (date.includes("nach")){ return { id: id, painting:{ start: date.replace("nach","").replace(/\s+/g, '')+ "-01-01", end: null, uncertainty: "nach" } }; } }) .filter(d => d && !d.painting.start.includes("?") && !d.painting.start.includes("/")) .map(item => [JSON.stringify(item), item])).values()] }35:T60c,depictedpersonDate = { let text = "Hergeleitete Datierung (z.B. basierend auf den Lebensdaten der dargestellten Person)" return[...new Map(rawdata .filter((d) =>d["ecrm:P108i_was_produced_by"]?.find((t) =>t["ecrm:P3_has_note"]?.[0]["@value"] == text)) .map((d) => { let idx = 0; for (let i = 0; i < d["ecrm:P108i_was_produced_by"].length; i++){ if(d["ecrm:P108i_was_produced_by"][i]["ecrm:P3_has_note"]?.[0]["@value"] == text){ idx = i; } }; const date = d["ecrm:P108i_was_produced_by"][idx]["ecrm:P4_has_time-span"][0]["ecrm:P82_at_some_time_within"]["@value"]; const id = d["ecrm:P48_has_preferred_identifier"][0]["ecrm:P90_has_symbolic_content"][0]["@value"]; if (date.includes(" / ")){ return { id: id, depictedperson:{ start: date.split(" / ")[0], end: date.split(" / ")[1] } }; } if (date.includes("um")){ return { id: id, depictedperson:{ start: date.replace("um","").replace(/\s+/g, '') + "-01-01", end: null, uncertainty: "um" } }; } if (date.includes("nach")){ return { id: id, depictedperson:{ start: date.replace("nach","").replace(/\s+/g, '') + "-01-01", end: null, uncertainty: "nach" } }; } }) .filter(d => d && !d.depictedperson.start.includes("?") && !d.depictedperson.start.includes("/")) .map(item => [JSON.stringify(item), item])).values()] }36:[{"id":"6bc4601c68c193079dda9bcfe326407708f5c3d013d0c1654e471df3620b891f2149c0a4a5a3dad438f91c35e1c2a843c6967acfa60956705b26b8fbe9178845","href":"https://static.observableusercontent.com/files/6bc4601c68c193079dda9bcfe326407708f5c3d013d0c1654e471df3620b891f2149c0a4a5a3dad438f91c35e1c2a843c6967acfa60956705b26b8fbe9178845","name":"rawdata.json","type":"application/json","lastModified":1649425461248.444,"size":8391571}] 2f:{"title":"ReFa Timeline","cells":[{"id":0,"value":"# ReFa Timeline","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"This notebook displays temporal data from the Restaging Fashion project by the UCLAB.
\nThe objects in the database have been described according to various possible dates when they might have been made:\n1. According to the period in which the displayed dress was used.\n2. Depending on the date when the painting might have been made.\n3. By the duration of the life of the person depicted in the artwork.","pinned":false,"hidden":false,"mode":"md"},{"id":804,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":1212,"value":"viewof order = Inputs.select(orders, {value:orders[0], label: \"Show elements by\", format: x => x.label})","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1290,"value":"colors = {\n let colors = {\n dress: \"orangered\",\n painting: \"mediumslateblue\",\n depictedperson: \"seagreen\"\n };\n return colors\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"### Preparing the data","pinned":false,"hidden":false,"mode":"md"},{"id":257,"value":"let's query all Paintings and Miniatures from the collection and extrapolate both the date of the paintings and of the garments depicted.","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"rawdata = {\n return FileAttachment(\"rawdata.json\").json();\n // query\n /*let i = 0;\n let data = [];\n\n while (true) {\n let url =\n \"https://uclab.fh-potsdam.de/refa/api/items?resource_template_id=3\";\n console.log(`p. ${i}`);\n let item = await d3.json(url + `&per_page=25&page=${i}`);\n item.forEach((element) => data.push(cleandata(element)));\n if (item.length > 0) {\n i++;\n } else {\n break;\n }\n }\n\n return data;*/\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1489,"value":"data = [...[dressDate, paintingDate, depictedpersonDate].reduce((m, a) => (a.forEach(o => m.has(o.id) && Object.assign(m.get(o.id), o) || m.set(o.id, o)), m), new Map).values()].filter(order.filter).sort(order.value);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1437,"value":"### Testing","pinned":false,"hidden":false,"mode":"md"},{"id":1444,"value":"viewof query = Inputs.text({label: \"Search an id\", placeholder: \"Insert the id of an object\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"data.filter(a => a.id == query);","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"### Settings","pinned":false,"hidden":false,"mode":"md"},{"id":226,"value":"startDate = new Date(Date.UTC(1450, 0, 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"endDate = new Date(Date.UTC(1960, 0, 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"x = d3.scaleTime()\n .domain([startDate, endDate])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"y = d3.scalePoint()\n .domain(data.map(d => d.id))\n .range([margin.top + 10, height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"height = data.length * 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .attr(\"class\", \"axis\")\n .call(d3.axisTop(x).ticks(ticks))\n .call((g) => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"margin = ({top: 30, right: 40, bottom: 30, left: 70})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"### Methods","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"function cleandata(item) {\n Object.keys(item).forEach(function (key) {\n if (key.includes(\"o:\") || key.includes(\"thumbnail_display_urls\")) {\n delete item[key];\n }\n if (typeof item[key] === \"object\") {\n try {\n for (const innerElement of item[key]) {\n let keyType = innerElement.type;\n if (keyType && keyType.includes(\"nesteddatatype\")) {\n let idx = item[key].indexOf(innerElement);\n //item[key].push(innerElement[\"@value\"][0]);\n item[key][idx] = innerElement[\"@value\"][0];\n }\n }\n } catch (err) {\n console.log(err);\n }\n }\n });\n\n return item;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"orders = [\n {\n label: \"Alphabetical order\",\n value: (a, b) => d3.ascending(a.id, b.id),\n filter: (a) => a.hasOwnProperty(\"id\")\n },\n {\n label: \"Garment Date\",\n filter: (a) => a.hasOwnProperty(\"dress\"),\n value: (a, b) => {\n let start = a.dress.start;\n let end = b.dress.start;\n return d3.ascending(start, end);\n }\n },\n {\n label: \"Painting Date\",\n filter: (a) => a.hasOwnProperty(\"painting\"),\n value: (a, b) => {\n let start = a.painting.start;\n let end = b.painting.start;\n return d3.ascending(start, end);\n }\n },\n {\n label: \"Depicted Person Date\",\n filter: (a) => a.hasOwnProperty(\"depictedperson\"),\n value: (a, b) => {\n let start = a.depictedperson.start;\n let end = b.depictedperson.start;\n return d3.ascending(start, end);\n }\n },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"### Style","pinned":false,"hidden":false,"mode":"md"},{"id":1568,"value":"size = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"ticks = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"nachSpan = 10 //The entries containing \"nach\" usually refer to a period of ± 2.5 years ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W36","stdlib":"1","titling":"auto"}