31:T564,{ const svg = html`` const container = d3.select(svg) container.attr("style","width: 200px; height: 200px;") const coinFlip = [ {name:"S",parent:""}, {name:"H",parent:"S"}, {name:"T",parent:"S"}, ] const root = d3.stratify().id(d => d.name).parentId(d => d.parent)(coinFlip).sum(d => 1) const descendants = d3.tree().nodeSize([100,100])(root).descendants() const links = d3.tree().nodeSize([100,100])(root).links() //group var outer = container.append("g").attr("transform",`translate(100,50)`) //links for(var i = 0; i < links.length; i++){ outer.append("line") .attr("stroke","black") .attr("x1",links[i].source.x) .attr("y1",links[i].source.y) .attr("x2",links[i].target.x) .attr("y2",links[i].target.y) } //nodes for(var i = 0; i < descendants.length; i++){ outer.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill","#c87941") .attr("cx",descendants[i].x) .attr("cy",descendants[i].y) } //labels for(var i = 0; i < descendants.length; i++){ outer.append("text") .text(descendants[i].id) .attr("x",descendants[i].x) .attr("y",descendants[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } return svg }32:T5da,{ const svg = html`` const container = d3.select(svg) container.attr("style","width: 300px; height: 200px;") const coinFlip = [ {name:"S",parent:""}, {name:"H",parent:"S"}, {name:"T",parent:"S"}, {name:"HH",parent:"H"}, {name:"HT",parent:"H"}, {name:"TH",parent:"T"}, {name:"TT",parent:"T"}, ] const root = d3.stratify().id(d => d.name).parentId(d => d.parent)(coinFlip).sum(d => 1) const descendants = d3.tree().nodeSize([60,50])(root).descendants() const links = d3.tree().nodeSize([60,50])(root).links() //group var outer = container.append("g").attr("transform",`translate(150,50)`) //links for(var i = 0; i < links.length; i++){ outer.append("line") .attr("stroke","black") .attr("x1",links[i].source.x) .attr("y1",links[i].source.y) .attr("x2",links[i].target.x) .attr("y2",links[i].target.y) } //nodes for(var i = 0; i < descendants.length; i++){ outer.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill","#c87941") .attr("cx",descendants[i].x) .attr("cy",descendants[i].y) } //labels for(var i = 0; i < descendants.length; i++){ outer.append("text") .text(descendants[i].id.slice(-1)) .attr("x",descendants[i].x) .attr("y",descendants[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } return svg }33:T9e7,{ const svg = html`` const container = d3.select(svg) container.attr("style","width: 940px; height: 300px;") const coinFlip = [ {name:"S",parent:""}, {name:"1",parent:"S"}, {name:"2",parent:"S"}, {name:"3",parent:"S"}, {name:"4",parent:"S"}, {name:"5",parent:"S"}, {name:"6",parent:"S"}, {name:"11",parent:"1"}, {name:"12",parent:"1"}, {name:"13",parent:"1"}, {name:"14",parent:"1"}, {name:"15",parent:"1"}, {name:"16",parent:"1"}, {name:"21",parent:"2"}, {name:"22",parent:"2"}, {name:"23",parent:"2"}, {name:"24",parent:"2"}, {name:"25",parent:"2"}, {name:"26",parent:"2"}, {name:"31",parent:"3"}, {name:"32",parent:"3"}, {name:"33",parent:"3"}, {name:"34",parent:"3"}, {name:"35",parent:"3"}, {name:"36",parent:"3"}, {name:"41",parent:"4"}, {name:"42",parent:"4"}, {name:"43",parent:"4"}, {name:"44",parent:"4"}, {name:"45",parent:"4"}, {name:"46",parent:"4"}, {name:"51",parent:"5"}, {name:"52",parent:"5"}, {name:"53",parent:"5"}, {name:"54",parent:"5"}, {name:"55",parent:"5"}, {name:"56",parent:"5"}, {name:"61",parent:"6"}, {name:"62",parent:"6"}, {name:"63",parent:"6"}, {name:"64",parent:"6"}, {name:"65",parent:"6"}, {name:"66",parent:"6"}, ] const root = d3.stratify().id(d => d.name).parentId(d => d.parent)(coinFlip).sum(d => 1) const descendants = d3.tree().nodeSize([22,100])(root).descendants() const links = d3.tree().nodeSize([22,100])(root).links() //group var outer = container.append("g").attr("transform",`translate(470,50)`) //links for(var i = 0; i < links.length; i++){ outer.append("line") .attr("stroke","black") .attr("x1",links[i].source.x) .attr("y1",links[i].source.y) .attr("x2",links[i].target.x) .attr("y2",links[i].target.y) } //nodes for(var i = 0; i < descendants.length; i++){ outer.append("circle") .attr("r",10) .attr("stroke","black") .attr("fill","#c87941") .attr("cx",descendants[i].x) .attr("cy",descendants[i].y) } //labels for(var i = 0; i < descendants.length; i++){ outer.append("text") .text(descendants[i].id.slice(-1)) .attr("x",descendants[i].x) .attr("y",descendants[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } return svg }34:T65f,{ const svg = html`` const container = d3.select(svg) container.attr("style","width: 900px; height: 400px;") const coinFlip = [ {name:"S",parent:""}, {name:"Dog",parent:"S"}, {name:"Cat",parent:"S"}, {name:"Baby-Dog",parent:"Dog"}, {name:"Adult-Dog",parent:"Dog"}, {name:"Senior-Dog",parent:"Dog"}, {name:"Baby-Cat",parent:"Cat"}, {name:"Adult-Cat",parent:"Cat"}, {name:"Senior-Cat",parent:"Cat"}, ] const root = d3.stratify().id(d => d.name).parentId(d => d.parent)(coinFlip).sum(d => 1) const descendants = d3.tree().nodeSize([100,100])(root).descendants() const links = d3.tree().nodeSize([100,100])(root).links() //group var outer = container.append("g").attr("transform",`translate(450,50)`) //links for(var i = 0; i < links.length; i++){ outer.append("line") .attr("stroke","black") .attr("x1",links[i].source.x) .attr("y1",links[i].source.y) .attr("x2",links[i].target.x) .attr("y2",links[i].target.y) } //nodes for(var i = 0; i < descendants.length; i++){ outer.append("circle") .attr("r",30) .attr("stroke","black") .attr("fill","#c87941") .attr("cx",descendants[i].x) .attr("cy",descendants[i].y) } //labels for(var i = 0; i < descendants.length; i++){ outer.append("text") .text(descendants[i].id.split("-")[0]) .attr("x",descendants[i].x) .attr("y",descendants[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } return svg }35:T80d,{ const svg = html`` const container = d3.select(svg) container.attr("style","width: 940px; height: 300px;") const coinFlip = [ {name:"S",parent:""}, {name:"1",parent:"S"}, {name:"2",parent:"S"}, {name:"3",parent:"S"}, {name:"4",parent:"S"}, {name:"5",parent:"S"}, {name:"12",parent:"1"}, {name:"13",parent:"1"}, {name:"14",parent:"1"}, {name:"15",parent:"1"}, {name:"21",parent:"2"}, {name:"23",parent:"2"}, {name:"24",parent:"2"}, {name:"25",parent:"2"}, {name:"31",parent:"3"}, {name:"32",parent:"3"}, {name:"34",parent:"3"}, {name:"35",parent:"3"}, {name:"41",parent:"4"}, {name:"42",parent:"4"}, {name:"43",parent:"4"}, {name:"45",parent:"4"}, {name:"51",parent:"5"}, {name:"52",parent:"5"}, {name:"53",parent:"5"}, {name:"54",parent:"5"}, ] const root = d3.stratify().id(d => d.name).parentId(d => d.parent)(coinFlip).sum(d => 1) const descendants = d3.tree().nodeSize([38,100])(root).descendants() const links = d3.tree().nodeSize([38,100])(root).links() //group var outer = container.append("g").attr("transform",`translate(470,50)`) //links for(var i = 0; i < links.length; i++){ outer.append("line") .attr("stroke","black") .attr("x1",links[i].source.x) .attr("y1",links[i].source.y) .attr("x2",links[i].target.x) .attr("y2",links[i].target.y) } //nodes for(var i = 0; i < descendants.length; i++){ outer.append("circle") .attr("r",10) .attr("stroke","black") .attr("fill","#c87941") .attr("cx",descendants[i].x) .attr("cy",descendants[i].y) } //labels for(var i = 0; i < descendants.length; i++){ outer.append("text") .text(descendants[i].id.slice(-1)) .attr("x",descendants[i].x) .attr("y",descendants[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } return svg }36:[] 2f:{"title":"Multiplication Rule","cells":[{"id":0,"value":"html`

Multiplication Rule

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"html`

Flipping a Coin

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"html`

Flipping a Coin Twice

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"html`

Rolling a Die Twice

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"html`

Choosing a Pet

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"html`

Choosing President and Vice President from Five

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"html`

Exercise 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"html`A student ID begins with two letters followed by three numbers (0 through 9). How many possible ID's are there?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"html`

Exercise 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"html`Answer exercise 1, with the constraints that letters or numbers may not be repeated.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"html`

Exercise 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"html`When ordering a pizza, you can select thin or thick crust, extra sauce if desired, extra cheese if desired, and one topping from a possiblity of five if desired. How many such pizzas can be ordered?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}