27:null 28:["$","title",null,{"children":"Curves / distance color gradient - Final project | Kelsey Matsik | Observable"}] 2d:T440,d3.select(gdmockup).selectAll("g.person") .data(gdmockdata) .join("g") .each((d,i,nodes) => { let g = d3.select(nodes[i]); let ageDeathPercent = Math.round(d.ageDeath / d.ageProjected * 100); let gradient = g.append("defs").append("linearGradient"); gradient.attr("id", "g" + i); gradient.attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%"); gradient.append("stop").attr("offset","0%").attr("stop-color",color1); gradient.append("stop").attr("offset",ageDeathPercent + "%").attr("stop-color",color1); gradient.append("stop").attr("offset",ageDeathPercent + "%").attr("stop-color",color1).attr("stop-opacity",0.2); gradient.append("stop").attr("offset","100%").attr("stop-color",color1).attr("stop-opacity",0.2); let arcRadius = d.ageProjected * 5; let arcEndX = d.ageProjected * 7; g.append("path") .attr("d", "M 20,200 A " + arcRadius + " " + arcRadius + " 0 0 1 " + arcEndX + ",200") .style("fill","none") .style("stroke", "url(#g" + i + ")") })2e:[] 2b:{"id":"0aad953ff0ed28e0","slug":null,"title":"Curves / distance color gradient - Final project","thumbnail":"6408b5ace76c5c990ed864bee93fb9e0a51d08d56308e5d693d8c65ad60f5004","access_level":"public","create_time":"$D2023-04-19T01:13:45.510Z","update_time":"$D2023-04-19T01:14:07.514Z","view_time":null,"first_public_time":"$D2023-04-19T01:13:45.510Z","has_unpublished_edits":null,"fork":{"id":"a00099f33ab99572","slug":null,"title":"Curves / distance color gradient","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3a250540e32fc4a3","login":"kcm7zp","name":"Kelsey Matsik","avatar_url":"https://avatars-next.observableusercontent.com/087274b5df91839f6552703a070aa445a2f2a8665e2cd83b7a5615bed1e1da0e","tier":"starter_2024"},"version":273,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b997944b5a70ab9d","login":"kcm7zp","name":"Kelsey Matsik","avatar_url":"https://avatars-next.observableusercontent.com/087274b5df91839f6552703a070aa445a2f2a8665e2cd83b7a5615bed1e1da0e","tier":null}],"members":[{"type":"individual","id":"b997944b5a70ab9d","login":"kcm7zp","name":"Kelsey Matsik","avatar_url":"https://avatars-next.observableusercontent.com/087274b5df91839f6552703a070aa445a2f2a8665e2cd83b7a5615bed1e1da0e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Curves / distance color gradient - Final project","cells":[{"id":0,"value":"# Curves / distance color gradient - Final project \nHow to implement a core part of [Periscope's US Gun Deaths](https://guns.periscopic.com/?year=2013) \n(though those are arcs, here I'm testing with a spline. For arcs, see below.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"svg","database":"$undefined"},{"id":14,"value":"### Static version - for syntax","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"The above is a specific implementation of a more general SVG gradient (the rectangle right here below). The one above just adds extra `stop` points along the way, including in this case a hard switch at 55% between colors rather than a progression between stops.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"## Find the location (x distance) of the point along it.\nBut the gradient above is just a left-to-right progression, and the 55% is along the x-axis left to right, not along the T-value curvature length of the spline. They are not the same. If we want to figure out where 55% is along the curve itself, and set the gradient position to that, we need to find that position along the curve.\n\nThis will only work because the curve is left-to-right, and does not flip back on itself. This would not work for that circumstance and we would need a different approach, such as: \n[https://gist.github.com/mbostock/4163057](https://gist.github.com/mbostock/4163057) \n[https://github.com/cereallarceny/gradient-path](https://github.com/cereallarceny/gradient-path)\n\nThe svg path attribute of `pathLength` doesn't seem to help here either.\n\nAnd so we'll try this approximation. It's a hack but might just work for this (since it's just left to right anyway)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"**path.getPointAtLength(distance)** \n[https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength)\n\nAlso see [this](https://stackoverflow.com/questions/52005065/get-point-coordination-using-path-getpointatlength-after-rotation-in-d3-and-svg)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"path = d3.select(svg).selectAll(\"path\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"startX = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"endX = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"totalLength = path.node().getTotalLength()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"lengthAtPercent = percent/100 * totalLength","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"pointAtLength = path.node().getPointAtLength(lengthAtPercent)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"xAtPercent = pointAtLength.x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"xDistanceAtPercent = xAtPercent - startX","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"pathTotalWidth = endX - startX","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"gradientStop = xDistanceAtPercent/pathTotalWidth * 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"d3.select(svg2).select(\"#firstStop\").attr(\"offset\", gradientStop + \"%\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"d3.select(svg2).select(\"#secondStart\").attr(\"offset\", gradientStop + \"%\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"viewof percent = Inputs.range([0, 100], {label: \"percent\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"svg2","database":"$undefined"},{"id":116,"value":"d3.select(svg2).selectAll(\".markline\")\n .data(d3.range(startX,endX+1,pathTotalWidth/10))\n .join(\"line\")\n .attr(\"x1\", d=>d)\n .attr(\"x2\", d=>d)\n .attr(\"y1\", 200)\n .attr(\"y2\", 20)\n .style(\"stroke\",\"#eee\")\n .classed(\"markline\",true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"d3.select(svg2).append(\"circle\")\n .attr(\"cx\", pointAtLength.x)\n .attr(\"cy\", pointAtLength.y)\n .attr(\"r\", 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"# Arcs\nSame thing, just with constant radius arc rather than bezier curve","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"## Mockup of Periscope's Gun Deaths\n[https://guns.periscopic.com/?year=2013](https://guns.periscopic.com/?year=2013) \nSo now how do we use that concept to mockup the arcs in Periscope's visual? \n\nThis generates a new `` for each data element (data is made up here, below, just to demonstrate). \nInside each `` we add a new Arc (`` the stops of which are calculated from the data. The arc path then references the gradient name using `stroke: url(#gradientName)`. In this case the gradient name is simply g plus the data index of the record. (g1, g2, ... g100)\n\nIn this case I'm using opacity in the stop to change the look, and keeping the color the same, but I could have switched to a different color also, like above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"gdmockup","database":"$undefined"},{"id":199,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"viewof color1 = Inputs.color({label: \"Favorite color\", value: \"#a77b00\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"gdmockdata = {\n let mockdata = [];\n for (let i = 0; i<100; i++) {\n let person = {};\n person.id = i;\n person.ageDeath = Math.round(Math.random() * 100);\n person.ageProjected = Math.round(person.ageDeath + Math.random() * (100 - person.ageDeath));\n mockdata.push(person);\n }\n return mockdata;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"gdmockdata","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"