2c:null 2d:["$","title",null,{"children":"Line Textures | Richard Brath | Observable"}] 32:T632,md`Line are essentially one-dimensional marks in visualizations. They can be long and, for the purposes, of this discussion, they have no width. In many visualizations lines are differentiated by color. But there are a limited numer of colors one can perceive so other ways of differentiating lines is useful. Historically, dashed lines were commonly used, particularly in old books and maps where color may not have been available. Essentially a dash pattern is a *texture* applied to a line. What are the various parameters that can be applied to a one-dimensional texture? In the first example below, the top set of lines vary the amount of ink horizontally (50% ink in the first column, 70% in the second, 90% in the third) while vertically the frequency (dash length) is varied (A,B,...F). A50 has very short strokes with 50% ink, F90 has very long strokes with 90% ink (i.e. short gaps). In the second group of lines, horizontally, the pattern sequence varies. Using line E70 as a starting point (now G0), a simple ABAB pattern become ABCBABCB in the second column with the addition of a dot (e.g. G1); and in the third column the pattern becomes ABCDCBABCDCB with the addition of two dots (e.g G2). Many other sequences could be considered. Verically G,H,...K varies the regularity by adding a bit of randomness. Look closely at the lines in K and it will be noticeable that the long dashes vary in length. The amount of ink stays the same but line lengths and gap lengths vary more the further you approach K. Re-running the cell will result in different random values. ` 33:T4cd,chart = { const svg = d3.select(DOM.svg(800, 300)); svg.append("rect").attr("x",0).attr("y",0).attr("width",800).attr("height",500).attr("fill","#fffbeb"); svg.append("text").attr("x",25).attr("y",30).attr("fill","#263c54").attr("font-family","Lato") .text("Lines varying density (ink) vs. frequency; and dots vs. regularity/randomness") const xpad = 60; const ypad = 50; var plot = svg.append("g").attr("transform", `translate(${xpad},${ypad})`) var linegroup = plot.selectAll("lineGroups") .data(dashdata) .join("g") .attr("transform", (d,i) => `translate(${i%3*250},${Math.floor(i/3)*20})`) linegroup.append("line") .attr("x1",0) .attr("x2",200) .attr("y1",1) .attr("y2",1) .attr("stroke","#263c54") .attr("stroke-width","3") .attr("stroke-dasharray", (d) => d.dash) linegroup.append("text") .attr("x",-5) .attr("y", 5 ) .attr("fill", "#263c54") .attr("font-size", 12) .attr("text-anchor","end") .attr("font-family", "Roboto Slab") .text( (d) => d.name ) // why stochastic, slight manipulation for corner, or content behind. // interleaved/compound // different colors // transparency return svg.node() }34:T639,chart2 = { const svg2 = d3.select(DOM.svg(800, 300)); const defs = svg2.append("defs") console.log(svg2.node()); var gradients = defs.selectAll("myGradients") .data(gradientdata) .join("linearGradient") .attr("id", (d) => d.name) .attr("spreadMethod","repeat") .attr("gradientUnits", "userSpaceOnUse") .attr("x1",0) .attr("y1",0) .attr("x2", (d) => d.interval ) .attr("y2", 0) .selectAll("stop") .data( (d) => d.sequence ) .join("stop") .attr("offset", (d) => d.stop) .attr("stop-color", (d) => d.clr ) svg2.append("rect").attr("x",0).attr("y",0).attr("width",800).attr("height",500).attr("fill","#fffbeb"); svg2.append("text").attr("x",25).attr("y",30).attr("fill","#263c54").attr("font-family","Lato") .text("Lines varying gradients and color (saturation, intensity, hue)") const xpad = 60; const ypad = 50; var plot = svg2.append("g").attr("transform", `translate(${xpad},${ypad})`) var linegroup = plot.selectAll("lineGroups") .data(gradientdata) .join("g") .attr("transform", (d,i) => `translate(${i%3*250},${Math.floor(i/3)*20})`) linegroup.append("line") .attr("x1",0) .attr("x2",200) .attr("y1",1) .attr("y2",1) .attr("stroke",d => `url(#${d.name})`) .attr("stroke-width","3") linegroup.append("text") .attr("x",-5) .attr("y", 5 ) .attr("fill", "#263c54") .attr("font-size", 12) .attr("text-anchor","end") .attr("font-family", "Roboto Slab") .text( (d) => d.name ) return svg2.node() }35:T6ca,// this section makes 1d pattern using SVG dash-array to create dashed lines dashdata = { var dataset= []; // first section. Varying frequency and density: // frequency starts with line + dash lengh of 4 ("2 2", and squares each iteration, e.g. "4 4", "8 8" // density is the amount of ink, e.g. proportion of line and the proportion of gap var frequency, density; for (frequency = 2; frequency < 8; frequency++) { for (density = 0.5; density < 1; density += .2) { dataset.push ({"name":String.fromCharCode(63+frequency) + Math.floor(density*100+.01), "dash": Math.pow( frequency,2) * density + " " + Math.pow(frequency,2) * (1-density) }); } } // a hack to add in a blank line dataset.push({"dash":".0001 1000"},{"dash":".0001 1000"},{"dash":".0001 1000"}) // second section. Vary stochastic pattern and dot pattern var dots, rand, segment; frequency = 6*6; density = 0.7; for (rand = 1; rand<6;rand++) { for (dots = 0; dots<3; dots++) { var obj ={}; var dashSeq = ""; obj["name"] = String.fromCharCode(70+rand) + (dots) for (segment =0; segment < 10; segment++) { dashSeq = dashSeq + // long dash " " + (frequency*density + (Math.random()-.5)*Math.pow(rand,1.6) - dots*2)+ // 1/2 gap " " + ((frequency*(1-density) + (Math.random()-.5)*Math.pow(rand,1.6)) * .5) + //dots and dot gaps " " + (dots == 0? ".00001" : (dots == 1 ? "2" : "2 2 2" )) + // other 1/2 gap post dot(s) " " + ((frequency*(1-density) + (Math.random()-.5)*Math.pow(rand,1.6)) * .5) } obj["dash"] = dashSeq dataset.push(obj); } } return dataset }36:T985,//this section is to create all the gradients, that are applied to plain lines. The underlying texture pattern will be visible as a gradient varying in transparency, saturation, intensity or hue. gradientdata = { var dataset= []; // first section. Varying frequency and density: // frequency starts with line + dash lengh of 4 ("2 2", and squares each iteration, e.g. "4 4", "8 8" // density is the amount of ink, e.g. proportion of line and the proportion of gap var frequency, density,count; for (frequency = 2; frequency < 8; frequency++) { for (density = 0.5; density < 1; density += .2) { dataset.push ({"name":String.fromCharCode(74+frequency) + Math.floor(density*100+.01), "interval": Math.pow( frequency,2), "sequence": [{"stop":0,"clr":"beige"}, {"stop":density*.9,"clr":"#263c54"}, {"stop":density*1.1,"clr":"#263c54"}, {"stop":.95,"clr":"beige"}, {"stop":1.0,"clr":"beige"} ] }); } } // a hack to add in a blank line dataset.push({"dash":".001 1000", "sequence":[]}, {"dash":".001 1000", "sequence":[]}, {"dash":".001 1000", "sequence":[]}) // color section density = 0.5 for (frequency = 2; frequency < 8; frequency++) { for (count = 0; count < 3; count++) { var obj = {}; obj["name"] = String.fromCharCode(80+frequency) + (count == 0? "s" : count == 1? "i" : "h") obj["interval"] = Math.pow( frequency,2) if (count < 1) { // vary saturation obj["sequence"] = [{"stop":0,"clr":"#fa0"}, {"stop":density,"clr":"#aaa"}, {"stop":1.0,"clr":"#fa0"} ] } else if (count < 2) { // vary intensity obj["sequence"] = [{"stop":0,"clr":"#fa0"}, {"stop":density,"clr":"#850"}, {"stop":1.0,"clr":"#fa0"} ] } else { // vary hue (rainbow, but similar intensities) obj["sequence"] = [{"stop":0,"clr":"#f33"}, {"stop":density*.5,"clr":"#cc0"}, {"stop":density,"clr":"#0d0"}, {"stop":density+(1-density)*.5,"clr":"#77f"}, {"stop":1.0,"clr":"#f33"}, ] } dataset.push(obj) } } return dataset }37:[] 30:{"id":"aab7de6ece454232","slug":"line-textures","title":"Line Textures","thumbnail":"4cd1790d2dee574fa1165441ae77423bc10a6ad79162540159eb2fea82785dfc","access_level":"public","create_time":"$D2021-05-02T18:45:09.460Z","update_time":"$D2021-05-28T01:13:36.053Z","view_time":null,"first_public_time":"$D2021-05-28T01:12:44.707Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"8fcdc34ffb173c01","login":"richardbrath","name":"Richard Brath","avatar_url":"https://avatars-next.observableusercontent.com/413b7e024af3685a187ad33c160d83abb9678058a4c10ea927dc73247c4cc984","tier":"starter_2024"},"version":392,"publish_version":392,"role":null,"authored":false,"authors":[{"type":"individual","id":"79a3bb98f70c0b2a","login":"richardbrath","name":"Richard Brath","avatar_url":"https://avatars-next.observableusercontent.com/413b7e024af3685a187ad33c160d83abb9678058a4c10ea927dc73247c4cc984","tier":null}],"members":[{"type":"individual","id":"79a3bb98f70c0b2a","login":"richardbrath","name":"Richard Brath","avatar_url":"https://avatars-next.observableusercontent.com/413b7e024af3685a187ad33c160d83abb9678058a4c10ea927dc73247c4cc984","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Line Textures","cells":[{"id":0,"value":"md`# Line Textures`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"md`The underlying pattern can be depicted by visual attributes other than simple on/off dashes, as shown in the next example below. In the top set of lines L50...Q90 are the same as A50...F90, with a gradient transparency varyinging from opaque to solid. Note that the rate of change in the gradient is visually discernable as a smooth blur in Q50, to a sharp boundary in Q90. The smooth blur and sharp boundary are visible when the dashes are long (Q50, Q70 Q90) but are not discernable when the dash length is short (L50, L70, L90).\n\nThe second set shows the pattern using color gradients. The left column varying saturation (S), center column varying intensity (i) and right column varying hue (h). In all versions the underlying texture rhythm still visible even though not encoded as dashes. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3@5')\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"