30:T83b,md`However, before looking for SVG elements to change their attributes we have created them using: ~~~ svg.selectAll().data(dataAarray).join() ~~~ or ~~~ svg.append("g").selectAll().data(dataAarray).join(). ... ~~~ By this we created the specified SVG element inside *svg* container or inside the newly created *g* container inside "svg" container. Assuming an initial empty container, the *selectAll ... data ... join* in the above statements creates as many SVG elements as there are in the dataArray. The main role of *.join(...)* is to append the elements and assign each eement of the data array to each created SVG element. We use that data in ~~~ .attr(, d=> . ... ~~~ The statement also returns the array of D3 objects for those newly created elements. We can assign it to a variable. The variable now represents the array of created objects. We can use this array directly to make any modification to the So all well and good. What happens when the elements you are looking for exist? If elements exist then there are 3 possibilities: - the number of selected elements is exactly the same as the number of data elements in the data array: In this case *.join(...)* reassigns the data element with new data from *dataArray*. In D3, it is called **update** step. - the number of selected SVG elements is less than the number of elements in the *dataArray*: In this case the matching SVG elements are assigned new data value from *dataArray*. More new SVG elements are created to use up the remaining data array. It is called **update** step followed by **enter** and **append** step. In the extreme case, zero SVG elements selected. So in principle all the elements are newly created and newly assigned data. That means no **update**, only **enter** and **append**. - finaly, the number of selected SVG elements is nore than the number of elements in the *dataArray*: In this case all those extra elements are flagged and deleted. This is called **exit** step. Given below are some examples. `31:T53a,{ const [svgNode, svg] = getSVG(); const radius = 20; while (1) { const t = svg.transition().duration(750); const newData = generateRandomPointData(20, Math.ceil(Math.random() * 25)); svg .selectAll("circle") .data(newData) .join( enter => enter .append("circle") .attr("r", radius) .style("fill", "green") .style("opacity", 0) .attr("transform", d => `translate(${d.x},${d.y})`) .call(enter => enter.transition(t).style("opacity", 1)), update => update .style("fill", "gray") .call(update => update .transition(t) .attr("transform", d => `translate(${d.x},${d.y})`) ), exit => exit.style("fill", "red").call(exit => exit .transition(t) .style("opacity", 0) .remove() ) ); svg .selectAll("text") .data(newData) .join("text") .attr("transform", d => `translate(${d.x},${d.y})`) .text(d => d.char) .style("fill", "white") .style("alignment-baseline", "middle") .style("text-anchor", "middle"); yield svgNode; await Promises.tick(tickTime); } return svgNode; }32:T6e0,{ const options = { width: width, height: 80, margin: { left: 0, top: 0, bottom: 0, right: 0 } }; const [svgNode, svg] = getSVG(options); svg .append("rect") .attr("width", options.width) .attr("height", options.height) .style("stroke", "black") .style("fill", "lightgrey"); const xScale = d3 .scaleLinear() .domain([1927, 2017]) .range([0, width]); svg .append("g") .attr("transform", `translate(0,80)`) .call( d3 .axisTop() .scale(xScale) .tickSize(60) .tickFormat(d3.format("d")) ); const defaultSelection = [ xScale(xScale.domain()[1] - 5), xScale(xScale.domain()[1]) ]; const brush = d3 .brushX() // Initialise the brush area: start at 0,0 and finishes at given width,height .extent([[0, 0], [options.width, options.height]]) .on("start", brushBegin) .on("brush", brushMove) .on("end", brushEnd); const gBrush = svg // Creating a brush using the // d3.brush function .call(brush) .call(brush.move, defaultSelection); function brushMove(event) { const s = event.selection; if (s) { mutable brushData = "Brushing : " + s + " " + JSON.stringify(s.map(d => Math.round(xScale.invert(d)))); // Update Main Plot with mainPlot.update(s.map(xScale.invert)); } } function brushBegin(event) { mutable brushData = "Brush Begin : " + JSON.stringify(event.selection); } function brushEnd(event) { const s = event.selection; mutable brushData = "Brush End: " + JSON.stringify(s.map(d => Math.round(xScale.invert(d)))); if (!event.selection) { gBrush.call(brush.move, defaultSelection); } } return svgNode; }33:Ta2e,{ const [svgNode, svg] = getSVG(); svg.attr("stroke-width", 2); const delaunay = d3.Delaunay.from(pointData, d => d.x, d => d.y); const voronoi = delaunay.voronoi([0, 0, W, H]); const cells = [...voronoi.cellPolygons()]; // an iterator const cellCentroids = cells.map(d3.polygonCentroid); const cellPolygonArea = cells.map(d3.polygonArea); mutable feedback = delaunay; if (showCentroid) svg .append("g") .selectAll("text") .data(cellCentroids) .join("text") .attr("transform", d => `translate(${d[0]},${d[1]})`) .text((d, i) => d3.format(".0s")(-cellPolygonArea[i])) .style("fill", (_, i) => d3.schemeCategory10[i % 10]); const circle = svg .append("g") .selectAll("circle") .data(pointData) .join("circle") .attr("transform", d => `translate(${d.x},${d.y})`) .attr("r", 5) .style("fill", (_, i) => d3.schemeCategory10[i % 10]); if (showTriangulation) // Delaunay mesh drawing svg .append("g") .append("path") .attr("fill", "none") .attr("stroke", "#ccc") .attr("stroke-width", 1) .attr("d", delaunay.render()); if (showVoronoi) { // Voronoi partition drawing const voronoiPartition = svg .append("g") .style("fill", "none") .style("stroke", "#fcc") .style("stroke-width", 1); voronoiPartition .append("rect") .attr("width", W) .attr("height", H); voronoiPartition.append("path").attr("d", voronoi.render()); } // svg.append("path").attr("d", delaunay.renderPoints(null, 5)); const cell = svg .append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("path") .data(pointData) .join("path") .attr("d", (d, i) => voronoi.renderCell(i)) .on("mousemove", (event, d) => circle .filter(p => p === d) .raise() .attr("stroke", "black") ) .on("mouseout", (event, d) => circle.filter(p => p === d).attr("stroke", "null") ); /* or .call( d3 .drag() .on("start", (event, d) => circle .filter(p => p === d) .raise() .attr("stroke", "black") ) .on("drag", (event, d) => circle .filter(p => p === d) .raise() .attr("stroke", "black") ) .on("end", (event, d) => circle.filter(p => p === d).attr("stroke", null) ) );*/ // Instead of drawing the circles yourslef you may use the following to draw all the points. return svgNode; }34:T456,chart = { const [svgNode, svg] = getSVG(); const xBandScale = d3 .scaleBand() .domain(sampleData.map(d => d.month)) .range([0, W]) .padding(0.1); svg .append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => colorScale(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => xBandScale(d.data.month)) .attr("y", d => yScale(d[1])) .attr("height", d => yScale(d[0]) - yScale(d[1])) .attr("width", xBandScale.bandwidth()) .append("title") .text( d => `${d.data.name} ${d.key} ${d.data[d.key]}` ); const xBandAxis = g => g .attr("transform", `translate(0,${H})`) .call( d3 .axisBottom(xBandScale) .tickSizeOuter(0) .tickFormat(d3.timeFormat("%b")) ) .call(g => g.selectAll(".domain").remove()); svg.append("g").call(xBandAxis); const yAxis = g => g .call(d3.axisLeft(yScale).tickFormat(valueTickFormat)) .call(g => g.selectAll(".domain").remove()); svg.append("g").call(yAxis); return svgNode; }35:T4b4,{ const svgOptions = { width: 300, height: 250, margin: { top: 0, bottom: 0, left: 0, right: 0 } }; const [svgNode, svg] = getSVG(svgOptions); const arcGenerator = d3 .arc() .innerRadius(50) .outerRadius(100) .cornerRadius(0); const arcData = [ { label: 'TopRight', startAngle: 0, endAngle: Math.PI / 2 }, { label: 'BottomRight', startAngle: Math.PI / 2, endAngle: Math.PI }, { label: 'BottomLeft', startAngle: Math.PI, endAngle: 1.5 * Math.PI }, { label: 'TopLeft', startAngle: 1.5 * Math.PI, endAngle: 2 * Math.PI } ]; const arcs = svg .selectAll("g") .data(arcData) .join("g") .attr( "transform", `translate(${svgOptions.width / 2},${svgOptions.height / 2})` ) .style("fill", "steelblue") .style("stroke", "red"); arcs.append("path").attr("d", d => arcGenerator(d)); arcs .append("text") .style("stroke", "none") .style("fill", "black") .style("text-anchor", "middle") .style("font-size", 10) .attr("transform", d => { let centroid = arcGenerator.centroid(d); return `translate(${centroid[0]},${centroid[1]})`; }) .text(d => d.label); return svgNode; }36:T485,svgPieChart = { const svgOptions = { width: outerRadius * 2 + 100, height: outerRadius * 2, margin: { top: 0, bottom: 0, left: 0, right: 0 } }; const [svgNode, svg] = getSVG(svgOptions); const arcGenerator = d3 .arc() .innerRadius(pieOptions.innerRadius) .outerRadius(outerRadius) .cornerRadius(5); const pieGenerator = d3 .pie() .startAngle(pieOptions.pieStart) .endAngle(pieOptions.pieStart + pieOptions.pieDelta) .padAngle(0.01); const arcData = pieGenerator(pieData); const arcs = svg .selectAll("g") .data(arcData) .join("g") .attr( "transform", `translate(${svgOptions.width / 2},${svgOptions.height / 2})` ) .style("fill", "steelblue") .style("stroke", "red"); arcs.append("path").attr("d", d => arcGenerator(d)); arcs .append("text") .style("stroke", "none") .style("fill", "black") .style("text-anchor", "middle") .style("font-size", 10) .attr("transform", d => { let centroid = arcGenerator.centroid(d); return `translate(${centroid[0]},${centroid[1]})`; }) .text(d => d.index); return svgNode; }37:T56c,md`The data stucture computed by d3.bins is an array of arrays that represent buckets. Each of these buckets has two attributes: its lowest value *x0*, and its highest value *x1*. Each of the buckets contains the data points whose value *v* lies between the bucket’s *x0* and *x1* attributes. More precisely: - *x0* ≤ *v* < *x1* for all but the last bucket, and - *x0* ≤ *v* ≤ *x1* for the last bucket. For example if you have an array of 100 elements as follows: ~~~ let data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, …] ~~~ then d3.bin()(data) will return an array of arrays as follows: ~~~ Array(10) [ 0: Array(10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, x0: 0, x1: 10] 1: Array(10) [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, x0: 10, x1: 20] 2: Array(10) [20, 21, 22, 23, 24, 25, 26, 27, 28, 29, x0: 20, x1: 30] 3: Array(10) [30, 31, 32, 33, 34, 35, 36, 37, 38, 39, x0: 30, x1: 40] 4: Array(10) [40, 41, 42, 43, 44, 45, 46, 47, 48, 49, x0: 40, x1: 50] 5: Array(10) [50, 51, 52, 53, 54, 55, 56, 57, 58, 59, x0: 50, x1: 60] 6: Array(10) [60, 61, 62, 63, 64, 65, 66, 67, 68, 69, x0: 60, x1: 70] 7: Array(10) [70, 71, 72, 73, 74, 75, 76, 77, 78, 79, x0: 70, x1: 80] 8: Array(10) [80, 81, 82, 83, 84, 85, 86, 87, 88, 89, x0: 80, x1: 90] 9: Array(10) [90, 91, 92, 93, 94, 95, 96, 97, 98, 99, x0: 90, x1: 100] ] ~~~`38:T4e5,{ const binData = d3.bin()(oldFaithfulData.map(d => d[waiting_OR_eruption])); const binDomain = binData.map(d => `${d.x0}-${d.x1}`); const [svgNode, svg] = getSVG(); const xBandScale = d3 .scaleBand() .domain(binDomain) .range([0, W]) .padding(0.01); const yScale = d3 .scaleLinear() .domain([0, d3.max(binData, d => d.length)]) .nice() .range([H, 0]); svg .append("g") .style("fill", "steelblue") .selectAll("rect") .data(binData) .join("rect") .attr("x", d => xBandScale(`${d.x0}-${d.x1}`)) .attr("width", xBandScale.bandwidth()) .attr("y", d => yScale(d.length)) .attr("height", d => yScale(0) - yScale(d.length)); const xBandAxis = g => g .attr("transform", `translate(0,${H})`) .call(d3.axisBottom(xBandScale).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()); svg.append("g").call(xBandAxis); svg .append("text") .attr("transform", `translate(${W / 2},${H})`) .style("text-anchor", "middle") .attr("dy", 30) .text(`${waiting_OR_eruption} in minutes`); const yAxis = g => g.call(d3.axisLeft(yScale)).call(g => g.selectAll(".domain").remove()); svg.append("g").call(yAxis); return svgNode; }39:T77c,{ const binData = d3.bin()(oldFaithfulData.map(d => d[waiting_OR_eruption])); const binDomain = binData.map(d => `${d.x0}-${d.x1}`); const [svgNode, svg] = getSVG(); const xBandScale = d3 .scaleBand() .domain(binDomain) .range([0, W]) .padding(0.01); const xRange = [ xBandScale(binDomain[0]), xBandScale(binDomain[binDomain.length - 1]) + xBandScale.bandwidth() ]; const xDomain = [binData[0].x0, binData[binData.length - 1].x1]; // return [xDomain, xRange]; const xScale = d3 .scaleLinear() .domain(xDomain) .range(xRange); const yScale = d3 .scaleLinear() .domain([0, d3.max(binData, d => d.length)]) .nice() .range([H, 0]); svg .append("g") .style("fill", "steelblue") .selectAll("rect") .data(binData) .join("rect") .attr("x", d => xBandScale(`${d.x0}-${d.x1}`)) .attr("width", xBandScale.bandwidth()) .attr("y", d => yScale(d.length)) .attr("height", d => yScale(0) - yScale(d.length)); const xBandAxis = g => g .attr("transform", `translate(0,${H})`) .call(d3.axisBottom(xBandScale).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()); svg.append("g").call(xBandAxis); svg .append("text") .attr("transform", `translate(${W / 2},${H})`) .style("text-anchor", "middle") .attr("dy", 30) .text(`${waiting_OR_eruption} in minutes`); const yAxis = g => g.call(d3.axisLeft(yScale)).call(g => g.selectAll(".domain").remove()); svg.append("g").call(yAxis); const areaGenerator = d3 .area() .y0(yScale(0)) .y1(d => yScale(d.length)) .x(d => xScale((d.x0 + d.x1) / 2)) .curve(d3.curveBasis); //return areaGenerator(binData); svg .append("path") .datum(binData) .style("stroke", "black") .style("fill", "#fcd88a") .style("opacity", 0.4) .attr("d", areaGenerator); return svgNode; }3a:T4fd,{ const [svgNode, svg] = getSVG(); const fillScale = d3.scaleOrdinal().range(["#fcd88a", "#cf7c1c", "#93c464"]); const normal = d3.randomNormal(); const sampleData = d3.range(1000).map(d => normal()); const bin = d3 .bin() // .thresholds(15) .domain([-3, 3]) .thresholds([-3, -2.5, -2, -1.5, -1, -0.5, 0, 0.5, 1, 1.5, 2, 2.5, 3]); const binData = bin(sampleData); const xScale = d3 .scaleLinear() .domain([-3, 3]) .range([0, W]); const yScale = d3 .scaleLinear() .domain([0, d3.max(binData, d => d.length)]) .nice() .range([0, H / 2]); svg .append("g") .attr("transform", `translate(0,${H})`) .call(d3.axisBottom().scale(xScale)); svg.append("g").call( d3 .axisTop() .scale(xScale) .tickSize(-H) ); const areaGenerator = d3 .area() .y0(d => -yScale(d.length)) .y1(d => yScale(d.length)) .x(d => xScale((d.x0 + d.x1) / 2)) .curve(d3.curveBasis); svg .append("g") .selectAll("path") .data([sampleData]) .join("path") .attr("transform", `translate(0,${H / 2})`) .style("stroke", "black") .style("opacity", 0.9) .style("fill", (d, i) => fillScale(i)) .attr("d", d => areaGenerator(bin(d))); return svgNode; }3b:T45b,{ const [svgNode, svg] = getSVG({ width: width, height: 50, margin: { top: 0, right: 0, bottom: 0, left: 0 } }); const symbolGenerator = d3.symbol().size(512); const symbolNames = "Circle Cross Diamond Square Star Triangle Wye".split( / / ); const xScale = d3 .scalePoint() .domain(symbolNames) .range([0, width]) .padding(0.25); svg .append('g') .style("fill", "black") .style("stroke", "red") .selectAll('path') .data(symbolNames) .join('path') .attr('transform', d => `translate(${xScale(d)},20)`) .attr('d', d => symbolGenerator.type(d3["symbol" + d])()); svg .append('g') .style("fill", "black") .style("stroke", "red") .selectAll('circle') .data(symbolNames) .join('circle') .attr('transform', d => `translate(${xScale(d)},20)`) .attr("r", 3) .style("fill", "green"); svg .append('g') .selectAll('text') .data(symbolNames) .join('text') .attr('transform', d => `translate(${xScale(d)},45)`) .style("text-anchor", "middle") .text(d => d); return svgNode; }3c:[{"id":"1fbab0317c957f571f724d3446ece608fdb83a67962aeea61ed7eb3247b7884de8e6d4823a406929b07a8a18b385a67f63868d9d4575c8d481f243fc6e330a33","href":"https://static.observableusercontent.com/files/1fbab0317c957f571f724d3446ece608fdb83a67962aeea61ed7eb3247b7884de8e6d4823a406929b07a8a18b385a67f63868d9d4575c8d481f243fc6e330a33","name":"image.png","type":"image/png","lastModified":1612896784157.216,"size":109491}] 2e:{"title":"Week 5","cells":[{"id":0,"value":"md`# Week 5\n- [Tuesday](#Tuesday)\n- [Thusday](#Thursday)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"Tuesday = md`## Tuesday's Topics:\n- D3 SelectAll and Join: Enter, Update, Exit\n- New Assignment\n- D3-delaunay\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"md`### D3 SelectAll and Join: Enter, Update, Exit\nReference: https://observablehq.com/@d3/selection-join \n\nSo far we have used:\n~~~\nsvg.selectAll()\n~~~\n\nwhere is an SVG element name (such as *rect*, *cirle*, *text* or even *g*) that you are looking for inside the *svg* containter. \nSomething can also be .classname where you might have assigned a classname to the elements under *svg*. \nThe search may comeup empty, or may find an array of d3 object that match the search description. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"md`We have also used\n~~~\nsvg.append(\"g\").selectAll().attr(...). ...\n~~~\nBy this we meant to change the attribute of the selected d3 objects.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"tickTime = 5000","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"md`### Example: Join`","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"{\n const [svgNode, svg] = getSVG();\n const radius = 20;\n while (1) {\n const newData = generateRandomPointData(20, Math.ceil(Math.random() * 25));\n svg\n .selectAll(\"circle\")\n .data(newData)\n .join(\"circle\")\n .attr(\"transform\", d => `translate(${d.x},${d.y})`)\n .attr(\"r\", radius)\n .style(\"fill\", \"grey\");\n svg\n .selectAll(\"text\")\n .data(newData)\n .join(\"text\")\n .attr(\"transform\", d => `translate(${d.x},${d.y})`)\n .text(d => d.char)\n .style(\"fill\", \"white\")\n .style(\"alignment-baseline\", \"middle\")\n .style(\"text-anchor\", \"middle\");\n yield svgNode;\n await Promises.tick(tickTime);\n }\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"md`D3 gives us flexibility to do things differently when creating, updating and removing an SVG element through **enter**, **update** and **exit** functions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"md`### Example: Enter, Modify`","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"{\n const [svgNode, svg] = getSVG();\n const radius = 20;\n while (1) {\n const newData = generateRandomPointData(20, Math.ceil(Math.random() * 25));\n svg\n .selectAll(\"circle\")\n .data(newData)\n .join(\n enter =>\n enter\n .append(\"circle\")\n .attr(\"r\", radius)\n .style(\"fill\", \"green\"),\n update => update.style(\"fill\", \"gray\")\n )\n .attr(\"transform\", d => `translate(${d.x},${d.y})`);\n\n svg\n .selectAll(\"text\")\n .data(newData)\n .join(\"text\")\n .attr(\"transform\", d => `translate(${d.x},${d.y})`)\n .text(d => d.char)\n .style(\"fill\", \"white\")\n .style(\"alignment-baseline\", \"middle\")\n .style(\"text-anchor\", \"middle\");\n yield svgNode;\n await Promises.tick(tickTime);\n }\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"md`### Example: Enter, Modify, Exit with Transition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"md`### Upcoming Assignment:\nCreate a Brushable Timeline for Oscar awards. A couple of sample Timeline examples: \n-

\n-

\" style=\"width: 512px;\">\n\n*Suggestions*:\n- The vertical axis should have important awards. \n- In each bubble location we can write the winner name. \n- We can have the default brush size to about 5 years and allow panning across from 1927 to current date. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"md`### Brush Interace`","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"mutable brushData = ''","pinned":true,"hidden":false,"mode":"ojs"},{"id":831,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"md`### More Interactions and Part in Whole relations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`### d3-Delaunay\n**Delaunay triangulation**\n>>In mathematics and computational geometry, a Delaunay triangulation (also known as a Delone triangulation) for a given set P of discrete points in a plane is a triangulation DT(P) such that no point in P is inside the circumcircle of any triangle in DT(P). Delaunay triangulations maximize the minimum angle of all the angles of the triangles in the triangulation; they tend to avoid sliver triangles.\\[[Wiki](https://en.wikipedia.org/wiki/Delaunay_triangulation)\\]\n\n**Voronoi diagram**\n>>In mathematics, a Voronoi diagram is a partition of a plane into regions close to each of a given set of objects. These regions are called Voronoi cells. \\[[Wiki](https://en.wikipedia.org/wiki/Voronoi_diagram)\\]\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`### An example Delaunay Triangulation and voronoi dragam. \nThe discrete set of points are drawn as colored circles randomly placed on the page.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"mutable feedback = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"generateRandomPointData = (radius = 5, N = 20) => {\n return d3.range(N).map(i => ({\n x: Math.random() * (W - radius * 2) + radius,\n y: Math.random() * (H - radius * 2) + radius,\n char: String.fromCharCode(65 + i),\n index: i\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"pointData = generateRandomPointData()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"showTriangulation={\n toggleTriangulation\n return !this;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"showVoronoi = {\n toggleVoronoi;\n return !this;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"showCentroid = {\n toggleCentroid;\n return !this;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":849,"value":"\n viewof toggleTriangulation = button({\n value: \"Toggle Triangulation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"viewof toggleVoronoi = button({\n value: \"Toggle Voronoi Partition\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"viewof toggleCentroid = button({\n value: \"Toggle Centroid\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"{\n const [svgNode, svg] = getSVG();\n const mydata = [[0, 100], [110, 100]];\n const chart = svg.append(\"g\");\n chart\n .selectAll(\"g\")\n .data(mydata)\n .join(\"g\")\n .call(myfunction);\n\n const t = svg.transition().duration(2000);\n //.ease(d3.easeLinear);\n chart\n .selectAll(\"rect\")\n .transition(t)\n .style(\"fill\", \"blue\")\n .transition(t)\n .style(\"fill\", \"orange\");\n\n return svgNode;\n\n function myfunction(container) {\n container\n .append(\"rect\")\n .attr(\"width\", 100)\n .attr(\"height\", 100)\n .style(\"fill\", d => \"red\")\n .attr(\"transform\", d => {\n mutable feedback1 = d;\n return `translate(${d[0]},${d[1]})`;\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1244,"value":"mutable feedback1 = \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1118,"value":"Thursday = md`-------------------\n## Thursday Topics:\n- d3-stack\n- d3-pie and Pie Chart\n- d3-bin and Histogram, Smoothed Histogram and Violin Plot\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`-----------\n### [d3-stack](https://github.com/d3/d3-shape#stacks)\nCreate a stack data structure from records containings parts of a whole. \nThe stacked Data Structure has for every record the cumulative y-values for each data point in each series. \nWe may not want to create an alayer for each column of the record. Therefore, when using d3.stack, we need to specify which columns of the record. We do so by using *stack.keys*. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"md`### Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"Table(sampleData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"sampleKeys","pinned":true,"hidden":false,"mode":"ojs"},{"id":1265,"value":"d3.stack().keys(sampleKeys)(sampleData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"stackGenerator = d3\n .stack()\n .keys(sampleKeys)\n .order(d3[\"stackOrder\" + ordering])\n .offset(d3[\"stackOffset\" + offset])","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"series = stackGenerator(sampleData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`### Started Aread Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"swatches({ color: colorScale, marginLeft: margin.left, columns: \"75px\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"{\n const [svgNode, svg] = getSVG();\n\n const area = d3\n .area()\n .x(d => xScale(d.data.month))\n .y0(d => yScale(d[0]))\n .y1(d => yScale(d[1]));\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(series)\n .join(\"path\")\n .attr(\"fill\", d => colorScale(d.key))\n .attr(\"d\", area)\n .append(\"title\")\n .text(({ key }) => key);\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"md`### Stacked Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"swatches({ color: colorScale, marginLeft: margin.left, columns: \"75px\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"viewof options = columns({\n ordering: radio({\n description: \"Stack Ordering\",\n options: [\"None\", \"Reverse\", \"Ascending\", \"Descending\"],\n value: \"None\"\n }),\n offset: radio({\n description: \"Stack offset\",\n options: [\"None\", \"Expand\"],\n value: \"None\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md` **Stack Ordering**: \nwe can change the order of the series in the array that is returned by the stack generator. Choices are:\n- d3.stackOrderNone\n- d3.stackOrderReverse\n- d3.stackOrderAscending - The series with the smallest sum with be placed on the bottom,\n- d3.stackOrderDescending(series) - The series with the largest sum with be placed on the bottom.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"ordering = options.ordering","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"offset = options.offset","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"md`--------------\n### d3-pie and Pie Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`### [d3-arc](https://github.com/d3/d3-shape#arcs)\n\nLike d3.line() , d3.area(), d3.arc(), the arc generator, is a path data generator. It creates the path data for creating circular or annular sector, is used to create a pie or donut chart.\n\nThe arc generator creates the path data for arcs centered at ⟨0,0⟩. So one must use a traslation transform to move the center to the required position and then call arc generator. \n\nd3.arc() must be is used in combination with d3.pie() to draw pie/donut chart.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"md` Parameters that control the shape of the arc are:\n- innerRadius\n- outerRadius\n- startAngle\n- endAngle\n- cornerRadius\n\nex: \n~~~\nconst arc = d3.arc()\n .innerRadius(50)\n .outerRadius(100)\n .startAngle(0)\n .endAngle(Math.PI / 2)\n .cornerRadius(5);\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"d3\n .arc()\n .innerRadius(50)\n .outerRadius(100)\n .startAngle(0)\n .endAngle(Math.PI / 2).cornerRadius","pinned":true,"hidden":false,"mode":"ojs"},{"id":1274,"value":"d3\n .arc()\n .innerRadius(50)\n .outerRadius(100)\n .startAngle(0)\n .endAngle(Math.PI / 2)()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1278,"value":"arcGen = d3\n .arc()\n .innerRadius(50)\n .outerRadius(100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1279,"value":"arcGen({ startAngle: 0, endAngle: Math.PI / 2 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1221,"value":"d3\n .arc()\n .innerRadius(50)\n .outerRadius(100)\n .startAngle(0)\n .endAngle(Math.PI / 2)()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"d3\n .arc()\n .innerRadius(50)\n .outerRadius(100)({ startAngle: 0, endAngle: Math.PI / 2 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"md`### [d3-pie](https://github.com/d3/d3-shape#pies)\nThe pie generator does not produce a shape directly, but instead computes the necessary angles to represent a tabular dataset for a pie or donut chart; these angles can then be passed to an arc generator.\n\nUse: d3.pie()(data) \nGenerates an array of objects representing each datum’s arc angles. \nThe length of the returned array is the same as data, and each element object in the returned array corresponds to the array element in the input data. Each object in the returned array has the following properties:\n- data - the input datum; the corresponding element in the input data array.\n- value - the numeric value of the arc.\n- index - the zero-based sorted index of the arc.\n- startAngle - the start angle of the arc.\n- endAngle - the end angle of the arc.\n- padAngle - the pad angle of the arc.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"feedback","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"pieData = {\n resetPieData;\n return Array(5)\n .fill(1)\n .map(d => Math.random());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1294,"value":"(2 * Math.PI * pieData[2]) / d3.sum(pieData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1301,"value":"(2 * Math.PI * pieData[3]) / d3.sum(pieData) +\n (2 * Math.PI * pieData[2]) / d3.sum(pieData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1292,"value":"d3.pie()(pieData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"outerRadius = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"viewof pieOptions = columns({\n pieStart: slider({\n min: 0,\n max: 2 * Math.PI,\n step: 0.1,\n value: 0,\n title: \"Pie Start Angle\"\n }),\n pieDelta: slider({\n min: Math.PI / 4,\n max: 2 * Math.PI,\n step: 0.01,\n value: 2 * Math.PI,\n title: \"Diff betweeen end and Start Angle\"\n }),\n innerRadius: slider({\n min: 5,\n max: outerRadius - 5,\n step: 0.1,\n title: \"Inner Radius\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"viewof resetPieData = button({ value: \"Reset Pie Data\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"BinHistogram = md`### d3-bin and Histogram\n**d3.bin()** groups discrete samples in an array into a smaller number of consecutive, non-overlapping intervals. They are often used to visualize the distribution of numerical data as histograms.\n- see https://observablehq.com/@d3/d3-bin `","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"dataForBinning = d3.range(100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"d3.bin()(dataForBinning)","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"md`d3.bin()(data) looks at the value of each data point. Find the full extent of these values (from lowest to highest). It calls it the default domain. Then it slices *data* according to a certain number of equally-sized buckets separated by thresholds, and adds the data points into these buckets.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"md` d3.bin().thresholds(...) may be used to set the number of bins or a set of thresholds.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"d3.bin().thresholds(5)(dataForBinning)","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"md`### Example histogram using d3.bin.\nData used: Old Faithful`","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"viewof waiting_OR_eruption = radio({\n options: [\"waiting\", \"eruptions\"],\n value: \"waiting\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"md`### Example histogram with smooth histogram area overlaid using d3.bin`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":1012,"value":"md`### Violin Plot using d3.bin`","pinned":true,"hidden":false,"mode":"ojs"},{"id":971,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":933,"value":"Symbols=md`### [d3-Symbol](https://github.com/d3/d3-shape#symbols)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":934,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`## Useful Function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"yAxis = g =>\n g\n .call(d3.axisLeft(yScale).tickFormat(valueTickFormat))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Total Sale\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"valueTickFormat = offset == \"Expand\" ? d3.format(\".0%\") : d3.format(\"$\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${H})`).call(\n d3\n .axisBottom(xScale)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"xScale = d3\n .scaleUtc()\n .domain(d3.extent(sampleData, d => d.month))\n .range([0, W])","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"yScale = d3\n .scaleLinear()\n .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])\n .nice()\n .range([H, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"colorScale = d3\n .scaleOrdinal()\n .domain(sampleKeys)\n .range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"getSVG = (options = { width: width, height: height, margin: margin }) => {\n const svgElement = DOM.svg(options.width, options.height);\n\n const svg = d3\n .select(svgElement)\n .append(\"g\")\n .attr(\n \"transform\",\n `translate(${options.margin.left},${options.margin.top})`\n );\n return [svgElement, svg];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"W = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"H = height - margin.top-margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"sampleData = [\n {\n month: new Date(2015, 0, 1),\n apples: 3840,\n bananas: 1920,\n cherries: 960,\n dates: 400\n },\n {\n month: new Date(2015, 1, 1),\n apples: 1600,\n bananas: 1440,\n cherries: 960,\n dates: 400\n },\n {\n month: new Date(2015, 2, 1),\n apples: 640,\n bananas: 960,\n cherries: 640,\n dates: 400\n },\n {\n month: new Date(2015, 3, 1),\n apples: 320,\n bananas: 480,\n cherries: 640,\n dates: 400\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"sampleKeys = Object.keys(sampleData[0]).slice(1, 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"oscarData = d3.csvParse(\n await (await soFetch(\n \"https://datahub.io/rufuspollock/oscars-nominees-and-winners/r/data.csv\"\n )).text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"oldFaithfulData = d3.tsv( \"https://gist.githubusercontent.com/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9/raw/dcb23e8f6eefdbc4ada97d6eda22b2a4f256c263/faithful.tsv\",\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`### External Libraries and Templates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"import { Table } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"import { columns } from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"import { soFetch } from '@alecglassford/so-fetch'","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"import { radio, slider, button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}