30:T10b9,timeline = { function updateActiveProject(elem){ console.log("Click:",elem); mutable taskList = elem.tasks; mutable projectTitle = elem.title; mutable projectDescription = elem.description; } var margin = {top: 30, right: 10, bottom: 10, left: 10}; var width = 960 - margin.left - margin.right; var height = 180 - margin.top - margin.bottom; var c = d3.scaleOrdinal(d3.schemeCategory10) var maxData = d3.max(data.map((d)=>{return d.hrs})); var allData = d3.sum(data.map((d)=>{return d.hrs})); console.log("Max Data: ",maxData); console.log("All Data: ",allData); const svg = d3.select(DOM.svg(width, height)); svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const rMax = width / (data.length * 1.0)//Math.min(width / data.length / 1.0, height / 2.0); console.log('rMax:' ,rMax); const slatPadding = 10.0; const widthScale = d3.scaleLinear().domain([0, allData]).range([0, 1]);// width - (slatPadding*data.Length)]); const r = widthScale; // const r = d3.scaleLinear() // .domain([0,maxData]) // .range([5,rMax]) console.log(r(72)) console.log(r(72)+r(24)+r(12)); const x = d3.scaleLinear() .range([margin.left + 5,width]) .domain([0,data.length]); const y = d3.scaleLinear() .range([height,0]) .domain([0,2]) let projectScale = d3.scaleOrdinal() .domain(['a','b','both']).range(d3.schemeCategory10); let transitionColor = "#ffffff"; let offset = 50; var polyg = svg.append("g"); var polys = polyg.selectAll("polygon") .data(data) .enter().append("polygon") .attr("points",function(elem,i){ let d = elem.hrs; let slatWidth = widthScale(d) * (width-40-(slatPadding*data.length+2)); let pts = [ {'x':offset,'y':15}, {'x':offset-12,'y':50}, {'x':offset+slatWidth-12,'y':50}, {'x':offset+slatWidth,'y':15} ]; offset += slatWidth + slatPadding; return pts.map(function(d) { return [d.x,d.y].join(","); }).join(" "); }) .on("click", updateActiveProject) .attr("fill",(elem,i)=>{ return projectScale(elem.project); }) .attr("fill-opacity",(elem,i)=>{ return (elem.status==="todo")?0.2:1.0; }) .transition() .duration(1000) .on("start",function repeat(elem) { if(elem.status !== "ongoing") return; transitionColor = (transitionColor===null)?"#ffffff":((transitionColor==="#ffffff")?projectScale(elem.project):"#ffffff"); d3.active(this).attr("fill",transitionColor).transition().on("start",repeat); }); offset = 50; let statusScale = d3.scaleOrdinal() .domain(['complete','todo','ongoing']).range(['#aa0000','#aaaaaa','#0000aa']); var statusg = svg.append("g"); var statuses = statusg.selectAll("polygon") .data(data) .enter().append("polygon") .attr("points",function(elem,i){ let d = elem.hrs; let slatWidth = widthScale(d) * (width-40-(slatPadding*data.length+2)); let pts = [ {'x':offset,'y':0}, {'x':offset,'y':10}, {'x':offset+slatWidth,'y':10}, {'x':offset+slatWidth,'y':0} ]; offset += slatWidth + slatPadding; return pts.map(function(d) { return [d.x,d.y].join(","); }).join(" "); }) .attr("fill",(elem,i)=>{ return statusScale(elem.status); }); var xScale = d3.scaleLinear() .domain([0, allData]) // input .range([50-12, offset]); // output var xScaleTime = d3.scaleTime() .domain([new Date("05-05-2012"),new Date("12-25-2012")]) .range([50-12, offset]); // output svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + 60 + ")") .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + 80 + ")") .call(d3.axisBottom(xScaleTime).tickFormat(d3.timeFormat("%Y-%m-%d"))); // Create an axis component with d3.axisBottom return svg.node() }31:[] 2e:{"title":"Pizza Timeline","cells":[{"id":0,"value":"md`# Pizza Timeline\n\nI am obsessed with the Dominos Pizza tracker (and pizza) and thought it would be funny to adapt their graphic to a timeline or roadmap. Instead of having the sections represent pizza tasks, they instead represent the state of a deliverable. But because I love pizza so much, I kept the tasks specific to pizza. :) \n\nThe timeline is driven by a simple JSON object (see below) that defines the sections, the tasks, and the time each section will take to finish. \n\n> Time-taken is represented in hours but clearly the graphic below spans days. It would have probably made more sense to call \\`hrs\\` as \\`units\\`. Nomenclature aside, the timeline normalizes the hours to a range of 0-1 so what you're really defining is the percentage of the timeline a task will take up. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"{\n const taskLinks = taskList.map((elem)=>{\n return `

`\n });\n console.log(\"taskLinks:\",taskLinks);\n const button = html`

\n ${projectTitle}\n

${projectDescription}

\n Example 1\n

\n Tasks\n

\n ${taskLinks}\n \n

\n Example 2\n

\n `\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`## References\n\n1. HTML Embed [[link](https://beta.observablehq.com/@despiegk/bootstrap-vuejs)]\n1. Mutables [[link](https://beta.observablehq.com/@mbostock/changelog-2018-05-07)]\n1. MaterializeCSS (what we use for html widgets) [[link](https://materializecss.com/cards.html)]\n1. D3 V5 Transitions [[link](https://github.com/d3/d3-transition#active)]`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"data = [\n { 'hrs':2, 'status':'complete', 'project':'c',\n 'tasks':[\"Add Sauce\",\"Add Pepperoni\",\"Add Cheese\", \"Add Mushrooms\"], 'title':\"Prepare the Pizza\",'description':\"Add all those sweet toppings.\"},\n { 'hrs':72, 'status':'ongoing', 'project':'a','tasks':[\"Turn oven on\",\"Put pizza in oven\", \"Remove Pizza from oven\", \"All the success\"],\n 'title':\"Bake that Pie\",'description':\"Great British bakeoff.\"},\n { 'hrs':12, 'status':'todo', 'project':'a','tasks':[\"Get in Car\",\"Put Key in Ignition\",\"Put Pizza in Fancy Car Oven\",\"Drive Errantly\"],\n 'title':\"Delivery\",\"description\":\"Someone, somewhere, will bring you food. Settle down.\"},\n { 'hrs':22, 'status':'todo', 'project':'a','tasks':[\"Change hrs to some other value\",\"Modify title\",\"Modify Description\",\"Add more tasks\"],\n 'title':\"Timeline Usage\",\"description\":\"You can play with this timeline in several ways by editting the values in the data cell below.\"},\n];\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"mutable taskList = [\"Make the Pizza\"];\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"mutable projectTitle = \"Select a node\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"\nmutable projectDescription = \"Please select a node in the timeline above to see a description. Or don't and maybe pizza will show up. One can only dream.\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3v4 = require(\"https://d3js.org/d3.v4.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"script = html`