30:T5ab,chart = { const svg = d3.select(DOM.svg(width,height)) .attr("viewBox",[0,0,width+50,height+50]) .style("background-color","#d7dce5") const pyramid = svg.append("g") .attr("transform",`translate(${margin.top},${margin.left})`) const t = textures.lines() .orientation("4/8") .stroke("#e77d21").strokeWidth(8) svg.call(t) pyramid.append("g") .attr("transform",`translate(${width/2+10},30)`) .append("text") .attr("text-anchor","middle") .style("font-size","2.5em") .style("font-weight","bold") .style("fill","#e77d21") .text("Pyramids of Egypt") pyramid.append("g") .attr("transform",`translate(${width/2},${margin.right})`) .selectAll("path") .data(data) .join("path") .attr("transform",(d,i)=>`translate(0,${i*250})`) .attr("d",triangle) .style("fill",t.url()) .style("stroke","#faac75") .style("stroke-width",3) pyramid.append("g").attr("transform",`translate(${width/2},${margin.right})`) .selectAll("path") .data(data) .join("text").attr("transform",(d,i)=>`translate(0,${i*250})`) //.attr("x") .attr("y",(d,i)=>i==3?83:55) .attr("text-anchor","middle") .text(d=>d.Pyramid) return svg.node() }31:Tdb3,annotations = { chart const annotate = [ { type:d3.annotationCustomType( d3.annotationLabel, {"className":"custom", "connector":{"end":"dot"}, "note":{"lineType":"vertical", "align":"middle"}}), note: { title:"Seked: 5 1/2" , label: "Slope: 51° 50' 35\", Tan: 1.2727", wrap:150, }, x:width/2+50, y:130, dx:100, dy:0, color:"#e77d21" }, { type:d3.annotationCustomType( d3.annotationLabel, {"className":"custom", "connector":{"end":"dot"}, "note":{"lineType":"vertical", "align":"middle"}}), note: { title:"Seked: 7 2/5" , label: "Slope: 43° 22', Tan: 0.9446", wrap:120, }, x:width/2+50, y:360, dx:100, dy:0, color:"#e77d21" }, { type:d3.annotationCustomType( d3.annotationLabel, {"className":"custom", "connector":{"end":"dot"}, "note":{"lineType":"vertical", "align":"middle"}}), note: { title:"Seked: 7 2/5" , label: "Slope: 43° 22', Tan: 0.9446", wrap:120, }, x:width/2+50, y:610, dx:100, dy:0, color:"#e77d21" }, { type:d3.annotationCustomType( d3.annotationLabel, {"className":"custom", "connector":{"end":"dot"}, "note":{"lineType":"vertical", "align":"middle"}}), note: { title:"Seked: 5 1/2" , label: "Slope: 51° 50' 40\", Tan: 1.2728", wrap:150, }, x:width/2+50, y:860, dx:100, dy:0, color:"#e77d21" }, { type:d3.annotationCustomType( d3.annotationLabel, {"className":"custom", "connector":{"end":"dot"}, "note":{"lineType":"vertical", "align":"middle"}}), note: { title:"Seked: 5 1/4" , label: "Slope: 53° 10', Tan: 1.3351", wrap:120, }, x:width/2+50, y:1130, dx:100, dy:0, color:"#e77d21" }, { type:d3.annotationCustomType( d3.annotationLabel, {"className":"custom", "connector":{"end":"dot"}, "note":{"lineType":"vertical", "align":"middle"}}), note: { title:"Seked: 5 3/5" , label: "Slope: 51° 20' 25\", Tan: 1.25", wrap:150, }, x:width/2+50, y:1380, dx:100, dy:0, color:"#e77d21" }, ].map(d=>{return d}) const makeAnnot = d3.annotation() .type(d3.annotationLabel) .annotations(annotate) d3.select("svg") .append("g") .attr("transform",(d,i)=>`translate(${margin.top},${margin.left})`) .selectAll("g") .data(data) .join("g") .attr("transform",(d,i)=>`translate(0,${i*250})`) .call(makeAnnot) }32:[{"id":"4d559bdaf44e905844dede049c3e9abd41ea05fee6ab6499e925333ac85ace47c579465f14458bf5af67c2866f6e4cdf74a259966f537d86fd601195c2c8112c","href":"https://static.observableusercontent.com/files/4d559bdaf44e905844dede049c3e9abd41ea05fee6ab6499e925333ac85ace47c579465f14458bf5af67c2866f6e4cdf74a259966f537d86fd601195c2c8112c","name":"slope.csv","type":"text/csv","lastModified":1617614820087.707,"size":1136}] 2e:{"title":"Pyramids of Egypt","cells":[{"id":0,"value":"html`

Pyramids of Egypt

Week 1:Comparisons. Day 5:Slope.

#30daychartchallenge

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"html`\n

The pyramids in Egypt look like they have the same slope to the naked eye but on closer examination it's found that this is not true. Each pyramid has a unique slope. So how did they manage to build these pyramids? Egyptians measured slope in seked. Seked was based on egyptian length measure known as royal cubit. It was subdivided into seven palms, each of which was sub-divided into four digits.
The inclination of measured slopes was therefore expressed as the number of horizontal palms and digits relative to each royal cubit rise.\n
\n
\nFor example seked slope of the Great Pyramid of Giza in Egypt is 5½, or 5 palms and 2 digits, in modern terms equivalent to a slope of 1.27.\n

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"html`
Data Credit:\nList of Egyptian pyramids. In Wikipedia, The Free Encyclopedia.
\n
Data Credit:\nPyramids have Different Slopes by D K Hitchins
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"triangle = d3.symbol()\n .type(d3.symbolTriangle)\n .size(d=>d.Size)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 1500","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"margin = ({top: 20, right: 150, bottom: 30, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment(\"slope.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"textures = require('textures@1.2.0/dist/textures.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@6','d3-svg-annotation')","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}