Document

2b:null 2c:["$","title",null,{"children":"d3 create separate element based on separate data | smpa01 | Observable"}] 31:T552,{ const width = 1280; const height = 720; const svg = d3.select('svg') .attr('xmlns', 'http://www.w3.org/2000/svg') .attr('viewBox', `0 0 ${width} ${height}`) const rect = svg.append('rect') .attr('x', '0') .attr('y', '0') .attr('width', `${width}`) .attr('height', `${height}`) .attr('fill', `#EFEFEF`) //src const dataHorizontal = [ { x: 0, y: 0 }, { x: 1280, y: 0 } ]; const pathVal = d3.line() .x(d => d.x) .y(d => d.y) (dataHorizontal); const index1 = [1, 2, 3]; const index2 = [4, 5, 6, 7, 8, 9, 10, 11] const multiplier = 60; //based on index1 svg.selectAll('path') .data(index1) .join('path') .attr('class', (d) => `ln${d}`) .attr('d', pathVal) .attr('stroke', () => { return `hsla(${Math.random() * 360} , ${((Math.random() + Math.random()/2)*100).toFixed(2)}%, 50%, 1)`; }) .style('transform', (d, i) => { return `translateY(${d*multiplier}px)` }) .attr('stroke-width', '2') //based on index2 svg.selectAll('path') .data(index2) .join('path') .attr('class', (d) => `ln${d}`) .attr('d', pathVal) .attr('stroke', () => { return `hsla(${Math.random() * 360} , ${((Math.random() + Math.random()/2)*100).toFixed(2)}%, 50%, 1)`; }) .style('transform', (d, i) => { return `translateY(${d*multiplier}px)` }) .attr('stroke-width', '2') }32:[] 2f:{"id":"7cd3130cd62ad05d","slug":null,"title":"d3 create separate element based on separate data","thumbnail":"46f5f844d13c509bc7adf9054170e9f2a2c744e803c1068a11aaebd0e710e889","access_level":"unlisted","create_time":"$D2022-07-06T15:50:23.074Z","update_time":"$D2022-07-06T16:03:03.621Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f6f5bab201e9c602","login":"smpa01","name":"smpa01","avatar_url":"https://avatars-next.observableusercontent.com/11fbf12260309afb8ae5e8d35256587cc7ddb704fb72f854fb7ae442be86582a","tier":"starter_2024","bio":""},"version":18,"publish_version":18,"role":null,"authored":false,"authors":[{"type":"individual","id":"de9567210aaa8bfc","login":"smpa01","name":"smpa01","avatar_url":"https://avatars-next.observableusercontent.com/11fbf12260309afb8ae5e8d35256587cc7ddb704fb72f854fb7ae442be86582a","tier":null,"bio":""}],"members":[{"type":"individual","id":"de9567210aaa8bfc","login":"smpa01","name":"smpa01","avatar_url":"https://avatars-next.observableusercontent.com/11fbf12260309afb8ae5e8d35256587cc7ddb704fb72f854fb7ae442be86582a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"d3 create separate element based on separate data","cells":[{"id":0,"value":"# d3 create separate element based on separate data","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"\n\n\n\n \n \n \n Document\n\n\n\n\n\n

\n \n \n \n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"