2c:null 2d:["$","title",null,{"children":"Visual Planning (vp3) | Steve Pegg | Observable"}] 32:T8e6,function chart () { if (gd) { env.structData = JSON.parse(localStorage.getItem('myMove')) } else { env.structData = data;} const elem = d3.create("svg") .attr('class', 'timelines-chart') .attr("viewBox", [0, 0,1000, 600]) .style("overflow", "visible"); env.svg = elem.append("svg") .attr("border", env.border) .attr("width", env.width) .attr("height", env.height); env.svg.call(zoom); var borderPath = env.svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("height", env.height) .attr("width", env.width) .style("fill", "none"); var grad = env.svg.append('defs') .append('linearGradient') .attr('id', 'grad') .attr('x1', '0%') .attr('x2', '0%') .attr('y1', '0%') .attr('y2', '100%'); grad.selectAll('stop') .data(env.groupBkgGradient) .enter() .append('stop') .style('stop-color', function (d) { return d; }) .attr('offset', function (d, i) { return 100 * (i / (env.groupBkgGradient.length - 1)) + '%'; }) env.svg.transition().duration(100).attr('width', env.width).attr('height', env.height); env.graph = env.svg.append('g') env.g = env.svg.append("g").attr("transform", "translate(" + env.margin.left + "," + env.margin.top + ")"); env.g.append('rect').attr("class", "temp") buildDomStructure(); convertdata(data) parseData(env.structData); renderAxises(); draw(); env.clip = env.svg.append("clipPath") .attr("id", "clip") .append("rect") .attr("width", env.graphW) .attr("height", 1600); return elem.node(); }33:T4da,form.myButton3.onclick = () => { var fdate = d3.max(env.structData, function (d) { return d.finish; }) var sdate = new Date(fdate); sdate.setDate(sdate.getDate() - 10); getValue(); function getValue() { var retVal = form.s.value // i; console.log(fdate) console.log(sdate) env.structData.push({ description: retVal, group: "|New", label: "|New", start: sdate, finish: fdate, clas: "x" + (env.structData.length + 1), order: env.structData.length + 1 }) } resolveOverlaps() env.structData.sort(function (a, b) { return d3.ascending(a.order, b.order); }); // console.log(env.structData) env.labels = getlabels() env.nLines = getLines(); env.graphH = d3.min([env.nLines * env.maxLineHeight, env.maxHeight - env.margin.top - env.margin.bottom]); env.clip.attr("height", env.graphH); renderAxises() d3.event = null draw(); }34:T494,env = ({width: 1600, height: 1600, maxHeight: 1600, lineMaxHeight: 16, maxLineHeight: 16, minLabelFont: 16, margin: { top: 26, right: 0, bottom: 30, left: 150 }, groupBkgGradient: ['#FAFAFA', '#E0E0E0'], xScale: d3.scaleTime(), yScale: d3.scalePoint(), grpScale: d3.scaleOrdinal(), xGrid: d3.axisTop(), yAxis: d3.axisRight(), xAxis: d3.axisBottom(), grpAxis: d3.axisLeft(), category: "group", svg: null, graph: null, graphW: null, graphH: null, nLines: 0, minSegmentDuration: 0, transDuration: 700, structData: null, flatData: null, g: null, labels: [], border:1, lineHeight:0, xt:null, color:[], colorScale:null, clip:null, bordercolor: "black", group: null });35:T6e4, function resolveOverlaps() { for (var t = 0; t < env.structData.length; t++) { env.structData[t].line = null env.structData[t].sub = null } env.flatData = [] env.structData.sort(function (a, b) { return d3.descending(a.start, b.start); }); var keys = env.structData.map(function (d) { return d[env.category]; }) .reduce(function (p, v) { return p.indexOf(v) == -1 ? p.concat(v) : p; }, []) .filter(function (d) { return (typeof d !== "undefined") ? d !== null : false }); keys.forEach(function (key) { var items = env.structData.filter(function (d) { return d[env.category] === key; }); var i, line, count = [], lines = []; var top = d3.max(env.structData, function (d) { return d.line }) || 0; items.forEach(function (item) { for (i = 0, line = 0; i < lines.length; i++ , line++) { if (item.finish <= lines[i]) { break; } } item.line = line + top + 1; item.sub = item[env.category] + '+&+' + item.line lines[line] = item.start; count.push(item.line); }) count = count.filter(onlyUnique) env.flatData.push({ category: items[0][env.category], count: count.length }) }); env.flatData.sort(function (a, b) { return d3.ascending(a.category, b.category); }); }36:T41c,function update_group(){ //console.log(env.structData) env.group = env.g.selectAll(".rectangle") .data(env.structData) .join(function (group) { var denter = group.append("g").attr("class", "rectangle").append("svg").attr("class", function (d) { return "svgholder " + d.clas; }); denter.append("rect").attr("class", function (d) { //console.log(d) return "rectband " + d.clas; }); denter.append("text").attr("class", function (d) { return "interval " + d.clas; }); denter.append("rect").attr("class", function (d) { return "lefthand clasl " + d.clas; }); denter.append("rect").attr("class", function (d) { return "righthand clasr " + d.clas; }); return denter; }, // function (update) { // redraw() // return update ); return env.group; } 37:T1144, function draw(event, d) { // console.log("in") if (event) { var t = event.transform env.xt = t.rescaleX(env.xScale); } else { env.xt = env.xScale; } env.color = getColor() env.colorScale = d3.scaleOrdinal(colors).domain(env.color) env.lineHeight = env.graphH / env.nLines * 0.8; env.svg.select('.x-grid').call(env.xGrid.scale(env.xt)); const tr = env.svg.transition() .duration(750); update_group() // env.group.enter(); // env.group = update_group() // console.log(d3.selectAll(".rectangle")) env.g.selectAll(".rectangle") .attr("width", function (d) { // console.log(d) return env.xt(d.finish) - env.xt(d.start) }) .attr("height", env.lineHeight) .attr("fill", function (d, i) { return env.colorScale(d.label); }) .attr("transform", function (d) { // console.log(d) return "translate(" + env.xt(d.start) + "," + (env.yScale(d.sub) - env.lineHeight / 2) + ")"; }) .attr("id", function (d) { return d.clas; }) // .attr("x", function (d) { return env.xt(d.start) }) // .attr("y", function (d) { return (env.yScale(d.sub) - env.lineHeight / 2) }) .call(d3.drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); env.group.selectAll(".svgholder") .attr("width", function (d) { return env.xt(d.finish) - env.xt(d.start) }) .attr("height", env.lineHeight); // .attr("x", 6) // .attr("y", 9); env.group.selectAll(".rectband") .attr("width", function (d) { return env.xt(d.finish) - env.xt(d.start) }) .attr("height", env.lineHeight) .style("opacity", .5) // set the element opacity .style("stroke", "black"); // .attr("x", function (d) { return env.xt(d.start) }) // .attr("y", function (d) { return (env.yScale(d.sub) - env.lineHeight / 2) }); env.group.selectAll(".interval") .attr("x", 6) .attr("y", 9) .style("pointer-events", "none") .style("fill", "black") .attr("font-size", 11) .attr("font-family", "Cambria") .text(function (d) { return (d.description); }); env.group.selectAll(".lefthand") .attr("idx", function (d) { return d.id; }) .attr("start", function (d) { return d.start; }) .attr("height", env.lineHeight) .attr("id", "dragleft") .attr("width", 2) .attr("fill", "#4A235A") .attr("fill-opacity", 1) .attr("cursor", "ew-resize") // .attr("x", function (d) { return env.xt(d.start) }) // .attr("y", function (d) { return (env.yScale(d.sub) - env.lineHeight / 2) }) .call(d3.drag() .subject(dragsubjectl) .on("start", dragstartedl) .on("drag", draggedl) .on("end", dragendedl)); env.group.selectAll(".righthand") .attr("x", function (d) { return env.xt(d.finish) - env.xt(d.start) - 2 }) .attr("idx", function (d) { return d.id; }) .attr("start", function (d) { return d.start; }) .attr("height", env.lineHeight) .attr("id", "dragright") .attr("width", 2) .attr("fill", "#4A235A") .attr("fill-opacity", 1) .attr("cursor", "ew-resize") .call(d3.drag() .subject(dragsubjectr) .on("start", dragstartedr) .on("drag", draggedr) .on("end", dragendedr)); }38:T8db,function redraw(event, d) { env.svg.select('.x-grid').call(env.xGrid.scale(env.xt)); env.color = getColor() env.colorScale = d3.scaleOrdinal(colors).domain(env.color) env.lineHeight = env.graphH / env.nLines * 0.8; if (event) { var t = event.transform env.xt = t.rescaleX(env.xScale); } else { env.xt = env.xScale; } console.log( d3.selectAll(".rectangle")) d3.selectAll(".rectangle") .data(env.structData) .attr("width", function (d) { return env.xt(d.finish) - env.xt(d.start) }) .attr("height", env.lineHeight) .attr("fill", function (d, i) { return env.colorScale(d.label); }) .attr("transform", function (d) {return "translate(" + env.xt(d.start) + "," + (env.yScale(d.sub) - env.lineHeight / 2) + ")";}); d3.selectAll(".svgholder") .attr("height", env.lineHeight) .attr("width", function (d) { return env.xt(d.finish) - env.xt(d.start) }); d3.selectAll(".rectband") .data(env.structData) .attr("width", function (d) { return (env.xt(d.finish) - env.xt(d.start)) }) .attr("height", env.lineHeight) .attr("fill", function (d, i) { return env.colorScale(d.label); }) .attr("x", 0) .attr("y", 0); d3.selectAll(".interval") .attr("x", 6) .attr("y", 9) .style("pointer-events", "none") .style("fill", "black") .attr("font-size", 11) .attr("font-family", "Cambria") .text(function (d) { return (d.description); }); d3.selectAll(".lefthand") .attr("width", 2) .attr("height", env.lineHeight) .attr("fill", "#4A235A"); d3.selectAll(".righthand") .attr("x", function (d) { return env.xt(d.finish) - env.xt(d.start) - 2 }) // .attr("y", function (d) { return env.yScale(d.sub) - env.lineHeight / 2 }) .attr("width", 2) .attr("height", env.lineHeight) .attr("fill", "#4A235A"); } 39:T5ed,function dragended(event, d) { if(d.x !== event.x) { var t = d3.select(this); var clas = t.attr("id"); for (var i = 0; i < env.structData.length; i++) { if (env.structData[i].clas === clas) { var delta = env.xt(env.structData[i].finish) - env.xt(env.structData[i].start); env.structData[i].finish = env.xt.invert(event.x + delta); env.structData[i].start = env.xt.invert(event.x); console.log("start " + env.xt.invert(event.x)) env.structData[i][env.category] = env.yScale.invert(event.y).split('+&+')[0] env.structData[i].ystart = event.y; env.structData[i].xstart = event.x; console.log("in") } } for (var t = 0; t < env.structData.length; t++) { env.structData[t].line = 0 } resolveOverlaps() env.structData.sort(function (a, b) { return d3.ascending(a.order, b.order); }); env.labels = getlabels() env.nLines = getLines(); env.graphH = d3.min([env.nLines * env.maxLineHeight, env.maxHeight - env.margin.top - env.margin.bottom]); env.clip.attr("height", env.graphH); renderAxises() event = null redraw(); // d.x = env.xt(event.x); d.y = env.xt(event.y); // update the datum. } }3a:T4a8, function draggedl(event, d) { var clas, end, start, ypos; if (typeof env.xt === undefined) { console.log("in") env.xt = env.xScale } console.log("out") // d.x = event.x // d.y = event.y // d3.select(this).attr("x", event.x) var clas = d3.select(this).attr("class"); for (var i = 0; i < env.structData.length; i++) { if ("lefthand clasl " + env.structData[i].clas === clas) { end = env.xt(d.finish) start = env.xt(d.start) console.log("start " + d.start) console.log("end " + end) clas = env.structData[i].clas ypos = env.yScale(d.sub) - (env.lineHeight / 2) }; } d3.select(".temp") .attr("width", (end - start) - event.x) .attr("x", start + event.x) .attr("y", ypos) .attr("height", env.lineHeight) .attr("opacity", 0.5) .attr("fill", "orange"); }3b:T70f,function dragendedl(event, d) { d3.select(".temp") .attr("width", 0) .attr("x", 0) .attr("y", 0) .attr("height", 0) .attr("fill", "none"); var clas = d3.select(this).attr("class"); for (var i = 0; i < env.structData.length; i++) { if ("lefthand clasl " + env.structData[i].clas === clas) { env.structData[i].start = env.xt.invert(env.xt(env.structData[i].start) + event.x) var sub = env.structData[i].sub } }; // var subitems = env.structData.filter(function (d) { return d.sub === sub; }); subitems.sort(function (a, b) { return d3.descending(a.start, b.start); }); if (subitems.length > 1) { var i, line, count = false, lines = []; subitems.forEach(function (item) { for (i = 0, line = 0; i < lines.length; i++ , line++) { if (item.finish >= lines[i]) { count = true break; } } lines[line] = item.start; }) } if (count) { resolveOverlaps(); } env.structData.sort(function (a, b) { return d3.ascending(a.order, b.order); }); env.labels = getlabels() env.nLines = getLines(); env.graphH = d3.min([env.nLines * env.maxLineHeight, env.maxHeight - env.margin.top - env.margin.bottom]); renderAxises() d3.event = null redraw(); d.x = event.x; d.y = event.y; // update the datum. }3c:T726, function dragendedr(event, d) { d3.select(".temp") .attr("width", 0) .attr("x", 0) .attr("y", 0) .attr("height", 0) .attr("fill", "none"); var clas = d3.select(this).attr("class"); if (typeof env.xt === 'undefined') { env.xt = env.xScale } for (var i = 0; i < env.structData.length; i++) { if ("righthand clasr " + env.structData[i].clas === clas) { env.structData[i].finish = env.xt.invert(env.xt(env.structData[i].start) + event.x) var sub = env.structData[i].sub } }; // var subitems = env.structData.filter(function (d) { return d.sub === sub; }); subitems.sort(function (a, b) { return d3.descending(a.start, b.start); }); if (subitems.length > 1) { var i, line, count = false, lines = []; subitems.forEach(function (item) { for (i = 0, line = 0; i < lines.length; i++ , line++) { if (item.finish >= lines[i]) { count = true break; } } lines[line] = item.start; }) } if (count) { resolveOverlaps(); } env.structData.sort(function (a, b) { return d3.ascending(a.order, b.order); }); env.labels = getlabels() env.nLines = getLines(); env.graphH = d3.min([env.nLines * env.maxLineHeight, env.maxHeight - env.margin.top - env.margin.bottom]); renderAxises() event = null redraw(); }3d:T53c, function buildDomStructure() { env.graphW = env.width - env.margin.left - env.margin.right; env.xScale.range([0, env.graphW]) env.svg.attr("width", env.width); var axises = env.svg.append('g'); env.graph.attr("transform", "translate(" + env.margin.left + "," + env.margin.top + ")"); env.g.attr("transform", "translate(" + env.margin.left + "," + env.margin.top + ")"); axises.attr("class", "axises") .attr("transform", "translate(" + env.margin.left + "," + env.margin.top + ")"); axises.append("g") .attr("class", "x-axis"); axises.append("g") .attr("class", "x-grid"); axises.append("g") .attr("class", "y-axis") .attr("transform", "translate(" + env.graphW + ", 0)"); axises.append("g") .attr("class", "grp-axis"); env.xAxis.scale(env.xScale) .ticks(Math.round(env.graphW * 0.011)); env.xGrid.scale(env.xScale) .tickFormat("") .ticks(env.xAxis.ticks()[0]); env.yAxis.scale(env.yScale) .tickSize(0); env.grpAxis.scale(env.grpScale) .tickSize(0); } 3e:Td8e, function renderAxises() { env.height = env.graphH + env.margin.top + env.margin.bottom env.svg.transition().duration(100).attr('width', env.width).attr('height', env.height); env.g.attr("transform", "translate(" + env.margin.left + "," + env.margin.top + ")"); var fontVerticalMargin = 0.6; var fontSize = Math.min(12, env.graphH / env.flatData.length * fontVerticalMargin * Math.sqrt(2)); env.yScale .domain(env.labels) .range([env.graphH / env.labels.length * 0.5, env.graphH * (1 - 0.5 / env.labels.length)]); env.yScale.invert = invertOrdinal; env.grpScale.invert = invertOrdinal; env.xGrid .scale(env.xScale) .tickSize(env.graphH) // .ticks(d3.timeWeek, 1) .tickFormat(d3.timeFormat("%b %d")); env.xScale .domain([d3.min(env.structData, function (d) { return d.start; }), d3.max(env.structData, function (d) { return d.finish; })]) .range([0, env.graphW]); env.svg.select('g.x-grid') .attr('transform', 'translate(0,' + env.graphH + ')') .transition().duration(100) .call(env.xGrid); var groups = env.graph.selectAll('rect.series-group, g.series-group ').data(env.flatData, function (d) { return d.category; }); env.yAxis.tickValues(""); //labels env.svg.select('g.y-axis') .transition().duration(100) .attr('transform', 'translate(' + env.graphW + ', 0)') .style('font-size', fontSize + 'px') .call(env.yAxis); var minHeight = d3.min(env.grpScale.range(), function (d, i) { return i > 0 ? d - env.grpScale.range()[i - 1] : d * 2; }); env.grpAxis.tickFormat(function (d) { return d }) .ticks(0); env.grpScale.domain(env.flatData.map(function (d) { return d.category })); var cntLines = 0; env.grpScale.range(env.flatData.map(function (d) { var pos = (cntLines + d.count / 2) / env.nLines * env.graphH; cntLines += d.count; return pos; })); env.svg.select('g.grp-axis') .transition() .duration(100) .style('font-size', fontSize + 'px') .call(env.grpAxis); groups.exit().transition().duration(500).style('stroke-opacity', 0).style('fill-opacity', 0).remove(); var newGroups = groups.enter() .append('rect') .attr('class', 'series-group') .attr('x', 0) .attr('y', 0) .attr('height', 0) .style('fill', 'url(#grad)'); newGroups.append('title').text('click-drag to pan or mouse wheel to zoom in/out'); groups = groups.merge(newGroups); groups.transition().duration(500) .attr('width', env.graphW) .attr('height', function (d) { return env.graphH * d.count / env.nLines; }) .attr('y', function (d) { return env.grpScale(d.category) - env.graphH * d.count / env.nLines / 2; }) }3f:[{"id":"a98a0ccbc03496081f2ae5e9b4ffde5642314c20ee6ea02f02a9272883f4116e3093ee9ecbc5f772b027ea1b780435fbf7c28597b29015eedb8da5addf26e02b","href":"https://static.observableusercontent.com/files/a98a0ccbc03496081f2ae5e9b4ffde5642314c20ee6ea02f02a9272883f4116e3093ee9ecbc5f772b027ea1b780435fbf7c28597b29015eedb8da5addf26e02b","name":"office move4@2.csv","type":"text/csv","lastModified":1608289509795.341,"size":3702}] 30:{"id":"b67540f87ad58d3b","slug":"visual-planning-vp3","title":"Visual Planning (vp3)","thumbnail":"981914a5fbe9369e1d4ebfce667129b92a0008b469462b095b5ee88acb0796cd","access_level":"public","create_time":"$D2020-12-18T11:05:09.795Z","update_time":"$D2021-01-28T22:25:00.645Z","view_time":null,"first_public_time":"$D2020-12-22T17:54:12.066Z","has_unpublished_edits":null,"fork":{"id":"2fee21e6d15233e1","slug":"visual-planning-vp2","title":"Visual Planning (vp2)","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"stars":3,"starred":false,"owner":{"type":"team","id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":"starter_2024","bio":"Mainly coding for fun these days!"},"version":1428,"publish_version":1428,"role":null,"authored":false,"authors":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"bio":"Mainly coding for fun these days!"}],"members":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visual Planning (vp3)","cells":[{"id":0,"value":"md`# Visual Planning (vp3)` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"md` This 'Gantt' like interactive chart has an optimised layout with related items grouped together and colour coding to highlight a common attribute e.g. priority, location etc. A compact view is acheived by dispaying mutiple activities on the same row where the timelines don't overlap.\n\nThe buttons above support saving and retrieving data from local storage, adding and deleting activities. The end black bars can be used to extend the activity duration or activities can be dragged and dropped into new positions. The chart will update automatically. The chart also has drag and zoom (mouse wheel) functionality built in. View in fullscreen is under Observable ... menu. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"form = html``;\n\n \n \n \n \n \n \n \n \n \n \n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"chart()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":" form.myButton1.onclick = () => {\n var dateFormat= d3.timeFormat(\"%Y-%m-%d\");\n // console.log(\"clicked\")\n var temp = [];\n for (var t = 0; t < env.structData.length; t++) {\n temp.push({\n start: dateFormat(env.structData[t].start),\n finish: dateFormat(env.structData[t].finish),\n group: env.structData[t].group,\n label: env.structData[t].label,\n description: env.structData[t].description\n })\n }\n\n localStorage.setItem('myMove', JSON.stringify(data));\n \n };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"form.myButton2.onclick = () => {\n if (localStorage.getItem('myMove')) {\n console.log(\"saved data\") \n mutable gd = true\n chart()\n } else { console.log(\"No Saved Data\") } \n };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"form.myButton4.onclick = () => {\n var fdate = d3.max(env.structData, function (d) { return d.finish; })\n var sdate = new Date(fdate);\n sdate.setDate(sdate.getDate() - 45);\n\n env.structData.push({ group: \"|Delete\", label: \"|Delete\", start: sdate, finish: fdate, description: \"Move activities to this category TO BE DELETED\", clas: \"x\" + (env.structData.length + 1), order: env.structData.length + 1 })\n resolveOverlaps()\n env.structData.sort(function (a, b) {\n return d3.ascending(a.order, b.order);\n });\n \n env.labels = getlabels()\n env.nLines = getLines();\n env.graphH = d3.min([env.nLines * env.maxLineHeight, env.maxHeight - env.margin.top - env.margin.bottom]);\n env.clip.attr(\"height\", env.graphH);\n renderAxises()\n d3.event = null\n draw();\n \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":" form.myButton5.onclick = () => {\n for (var i = env.structData.length - 1; i >= 0; --i) {\n if (env.structData[i][env.category] == \"|Delete\") {\n env.structData.splice(i, 1);\n }\n }\n resolveOverlaps()\n env.structData.sort(function (a, b) {\n return d3.ascending(a.order, b.order);\n });\n \n env.labels = getlabels()\n env.nLines = getLines();\n env.graphH = d3.min([env.nLines * env.maxLineHeight, env.maxHeight - env.margin.top - env.margin.bottom]);\n env.clip.attr(\"height\", env.graphH);\n renderAxises()\n d3.event = null\n draw();\n \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"mutable gd = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"parseTime = d3.timeParse(\"%d/%m/%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"zoom = d3.zoom()\n .scaleExtent([0.5, 32])\n .on(\"zoom\", redraw);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"colors = [\"#7fc97f\",\"#beaed4\",\"#fdc086\",\"#ffff99\",\"#386cb0\",\"#f0027f\",\"#bf5b17\",\"#666666\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":" colorsBU = [ \"#95A5A6\",\"#85C1E9\",\"#F4D03F\", \"#D2B4DE\",\"#EDBB99\", \"#73C6B6\",\"#EDBB99\", \"#D5DBDB\", \"#FEF9E7\", \"#EBDEF0\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":" function invertOrdinal(val, cmpFunc) {\n cmpFunc = cmpFunc || function (a, b) {\n return (a >= b);\n };\n\n const scDomain = this.domain();\n let scRange = this.range();\n\n if (scRange.length === 2 && scDomain.length !== 2) {\n // Special case, interpolate range vals\n scRange = d3.range(scRange[0], scRange[1], (scRange[1] - scRange[0]) / scDomain.length);\n }\n\n const bias = scRange[0];\n for (let i = 0, len = scRange.length; i < len; i++) {\n if (cmpFunc(scRange[i] + bias, val)) {\n return scDomain[Math.round(i * scDomain.length / scRange.length)];\n }\n }\n\n return this.domain()[this.domain().length - 1];\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":" function convertdata() {\n for (var t = 0; t < env.structData.length; t++) {\n env.structData[t].start = new Date(env.structData[t].start)\n env.structData[t].finish = new Date(env.structData[t].finish)\n env.structData[t].clas = \"x\" + (t + 1)\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":" function onlyUnique(value, index, self) {\n return self.indexOf(value) === index;\n }\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":" function getColor() { \n env.structData.forEach(function (item) {\n env.color.push(item.label)\n })\n env.color = env.color.filter((v, i, a) => a.indexOf(v) === i);\n return env.color\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"function getlabels() { \n env.labels= [];\n env.structData.forEach(function (item) {\n env.labels.push(item.sub)\n })\n env.labels = env.labels.filter((v, i, a) => a.indexOf(v) === i);\n env.labels.sort()\n return env.labels\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":" function getLines() {\n env.nLines = 0\n env.flatData.forEach(function (item) {\n env.nLines += item.count\n })\n return env.nLines\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":" function dragsubject(event, d) { \n\n return {\n //x: d3.select(this).attr(\"xstart\"),\n //y: d3.select(this).attr(\"ystart\")\n }\n };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":" function dragstarted(event, d) {\n var current = d3.select(this);\n d.x = event.x\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":" function dragged(event, d) {\n\n var clas, end;\n if (typeof env.xt === 'undefined') {\n env.xt = env.xScale\n }\n \n // d.x = event.x\n // d.y = event.y\n \n d3.select(this).attr(\"transform\", function (d) {\n return \"translate(\" + [event.x, event.y] + \")\"\n })\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":" function dragsubjectl(event, d) { \n\n return {\n x: d3.select(this).attr(\"x\"),\n y: d3.select(this).attr(\"y\")\n }\n };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"function dragstartedl(event, d) {\n \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":" function dragsubjectr(event, d) { \n\n return {\n x: d3.select(this).attr(\"x\"),\n y: d3.select(this).attr(\"y\")\n }\n };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"function dragstartedr(event, d) {\n var current = d3.select(this);\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"\n function draggedr(event, d) {\n var clas, ypos, start, end;\n if (typeof env.xt === 'undefined') {\n env.xt = env.xScale\n }\n\n d3.select(this).attr(\"x\", event.x)\n\n var clas = d3.select(this).attr(\"class\");\n\n for (var i = 0; i < env.structData.length; i++) {\n if (\"righthand clasr \" + env.structData[i].clas === clas) {\n start = env.xt(d.start)\n end = env.xt(d.finsh)\n ypos = env.yScale(d.sub) - (env.lineHeight / 2)\n clas = env.structData[i].clas\n };\n }\n \n d3.select(\".temp\")\n .attr(\"width\", event.x)\n .attr(\"x\", start)\n .attr(\"y\", ypos)\n .attr(\"height\", env.lineHeight)\n .attr(\"opacity\", 0.5)\n .attr(\"fill\", \"orange\"); \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":" function parseData(data) { \n convertdata()\n resolveOverlaps()\n for (var t = 0; t < env.structData.length; t++) {\n env.structData[t].order = t + 1\n }\n \n env.structData.sort(function (a, b) {\n return d3.ascending(a.order, b.order);\n });\n\n env.labels = getlabels()\n env.nLines = getLines();\n env.graphW = env.width - env.margin.left - env.margin.right;\n env.graphH = d3.min([env.nLines * env.maxLineHeight, env.maxHeight - env.margin.top - env.margin.bottom]);\n env.g.attr(\"clip-path\", \"url(#clip)\");\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"data = d3.csvParse(await FileAttachment(\"office move4@2.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 31:"$30:body"