2c:null 2d:["$","title",null,{"children":"Visual Planning (vp1) | Steve Pegg | Observable"}] 32: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(); }33:T92f,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, ((env.structData.length + 1) * 16)]) .attr("border",env.border) .style("overflow", "visible"); env.svg = elem.append("svg") .attr("border", env.border) .attr("width", env.width) .attr("height", env.graphH); env.svg.call(zoom); var borderPath = env.svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("height", env.graphH) .attr("width", env.width) .style("stroke", "navy") .style("stroke-width", 2) .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.graphH); env.graph = env.svg.append('g') env.g = env.svg.append("g").attr("transform", "translate(" + env.margin.left + "," + env.margin.top + ")"); 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", env.graphH); return elem.node(); }34:T498,env = ({width: 1000, height: 600, 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" });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:T1346, function draw(event, d) { 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; } env.svg.select('.x-grid').call(env.xGrid.scale(env.xt)); env.svg.selectAll(".rectangle").remove(); env.svg.selectAll(".interval").remove(); env.svg.selectAll(".clas").remove(); env.svg.selectAll(".clasr").remove(); env.svg.selectAll(".clasl").remove(); var group = env.g.selectAll(".rectangle") .data(env.structData); var gEnter = group.enter() .append("g") .attr("class", "rectangle") .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) + ")"; }) .attr("id", function (d) { return d.clas; }) .attr("xstart", function (d) { return env.xt(d.start) }) .attr("ystart", function (d) { return (env.yScale(d.sub) - env.lineHeight / 2) }) .call(d3.drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)) .append("svg") .attr("class", function (d) { return "interval " + d.clas; }) .attr("width", function (d) { return env.xt(d.finish) - env.xt(d.start) }) .attr("height", env.lineHeight); gEnter.append("rect") .attr("class", function (d) { return "rectband " + d.clas; }) .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"); gEnter.append("text") .attr("class", function (d) { return "interval " + d.clas; }) .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); }); var lEnter = group.enter() .append("rect") .attr("width", function (d) { return env.xt(new Date(d.finish)) - env.xt(new Date(d.start)) }) .attr("x", function (d) { return env.xt(d.start) }) .attr("y", function (d) { return env.yScale(d.sub) - env.lineHeight / 2 }) .attr("class", function (d) { return "lefthand clasl " + d.clas; }) .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("xstart", function (d) { return env.xt(d.start) }) .attr("ystart", function (d) { return (env.yScale(d.sub) - env.lineHeight / 2) }) .call(d3.drag() .subject(function () { return { }; }) .on("start", dragstartedl) .on("drag", draggedl) .on("end", dragendedl)) var rEnter = group.enter() .append("rect") .attr("x", function (d) { return env.xt(d.finish) - 2 }) .attr("y", function (d) { return env.yScale(d.sub) - env.lineHeight / 2 }) .attr("class", function (d) { return "righthand clasr " + d.clas; }) .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() .on("start", dragstartedr) .on("drag", draggedr) .on("end", dragendedr)); group = group.merge(gEnter); }37:T73a,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; } d3.selectAll(".rectangle") .data(env.structData) .attr("width", function (d) { return env.xt(d.finish) - env.xt(d.start) }) .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(".rectband") .data(env.structData) .attr("width", function (d) { return (env.xt(d.finish) - env.xt(d.start)) }) .attr("fill", function (d, i) { return env.colorScale(d.label); }) .attr("x", 0) .attr("y", 0); d3.selectAll(".interval") .attr("width", function (d) { return env.xt(d.finish) - env.xt(d.start) }); d3.selectAll(".lefthand") .attr("x", function (d) { return env.xt(d.start) }) .attr("y", function (d) { return env.yScale(d.sub) - env.lineHeight / 2 }) .attr("width", 2) .attr("fill", "#4A235A"); d3.selectAll(".righthand") .attr("x", function (d) { return env.xt(d.finish) - 2 }) .attr("y", function (d) { return env.yScale(d.sub) - env.lineHeight / 2 }) .attr("width", 2) .attr("fill", "#4A235A"); } 38:T54a,function dragended(event, d) { if(d.x !== event.x) { var clas if (typeof env.xt === 'undefined') { env.xt = env.xScale } d3.select(this).classed("active", false); var t = d3.select(this); 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); env.structData[i][env.category] = env.yScale.invert(event.y).split('+&+')[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(); } }39:T46d, function draggedl(event, d) { var clas, end; if (typeof env.xt === 'undefined') { env.xt = env.xScale } 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) clas = env.structData[i].clas }; } d3.selectAll(".rectangle").filter(function (d) { return d.clas === clas }) .attr("transform", function (d) { return "translate(" + event.x + "," + (env.yScale(d.sub) - env.lineHeight / 2) + ")"; }); d3.selectAll(".interval." + clas) .attr("x", 0) .attr("width", end - event.x); d3.select(".rectband." + clas) .attr("fill", "orange") .style("opacity", 0.9) .attr("x", 0) .attr("width", end - event.x); }3a:T607,function dragendedl(event, d) { var xt = env.xt 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 = xt.invert(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(); }3b:T64f,function dragendedr(event, d) { var clas = d3.select(this).attr("class"); var xt = env.xt if (typeof xt === 'undefined') { xt = env.xScale } for (var i = 0; i < env.structData.length; i++) { if ("righthand clasr " + env.structData[i].clas === clas) { env.structData[i].finish = xt.invert(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(); }3c:T547, 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); } 3d: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; }) }3e:[] 30:{"id":"9148a98f3bf5076c","slug":"visual-planning-vp1","title":"Visual Planning (vp1)","thumbnail":"e8cd1360e3d6cafac643af08cccfe1dd80e0d27d8b66402592a004b56b77973d","access_level":"public","create_time":"$D2020-12-15T22:26:27.781Z","update_time":"$D2020-12-18T11:04:00.272Z","view_time":null,"first_public_time":"$D2020-12-17T18:15:56.216Z","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":6,"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":1131,"publish_version":1131,"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 (vp1)","cells":[{"id":0,"value":"md`# Visual Planning (vp1)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"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":1120,"value":"table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"data = {\n let names = [];\n const spreadsheet = await d3\n .tsv(url)\n .then(data => data.forEach(d => names.push(d))); // d3.tsv returns a Promise\n return names;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQYHTvlvRIgq0Wa-efFsHFz6_xQpmCA7Gerg86KUmZeGbDy62UXSs9JFpGuvTtC6Ms9RsA5oy5NMpXa/pub?gid=0&single=true&output=tsv\"","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":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":904,"value":"$32","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":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":946,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"$33","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":145,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"$37","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 }\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 \n if (typeof env.xt === 'undefined') {\n env.xt = env.xScale\n }\n\n d3.select(this).attr(\"transform\", function (d, i) {\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":"$38","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":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$3a","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, end;\n var xt = env.xt\n if (typeof xt === 'null') {\n var 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 end = xt(d.start)\n clas = env.structData[i].clas\n };\n }\n\n d3.selectAll(\".interval.\" + clas)\n .attr(\"width\", event.x - end)\n .attr(\"x\", 0); \n \n d3.select(\".rectband.\" + clas)\n .attr(\"fill\", \"orange\")\n .style(\"opacity\", 0.9)\n .attr(\"width\", event.x - end);\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$3b","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]); env.g.attr(\"clip-path\", \"url(#clip)\");\n \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"import { table } from \"@gampleman/table\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 31:"$30:body"