Document

2b:null 2c:["$","title",null,{"children":"Missing Data Test3 | smpa01 | Observable"}] 31:T12c1,{//////////////////////////////////////////////////////////// //////////////////////// 1 DATA /////////////////////////// //////////////////////////////////////////////////////////// const data = [ { "x": 50, "y": 97.04013083865155 }, { "x": 100, "y": null }, { "x": 150, "y": 98.62594214598816 }, { "x": 200, "y": 76.49419950954189 }, { "x": 250, "y": 29.30639006661442 }, { "x": 300, "y": 29.366842697148176 }, { "x": 350, "y": 51.587600132998325 }, { "x": 400, "y": null }, { "x": 450, "y": null }, { "x": 500, "y": 26.90860254816283 }, { "x": 550, "y": null }, { "x": 600, "y": 99.1622268038577 } ] const height = 400; const width = 720; const padding = { top: 70, bottom: 50, left: 70, right: 70 } const boundHeight = height - padding.top - padding.bottom; const boundWidth = width - padding.right - padding.left; //////////////////////////////////////////////////////////// //////////////////////// 2 CREATE SCALE //////////////////// //////////////////////////////////////////////////////////// //scale converts a domain (data) to range (pixel) const scaleX = d3.scaleLinear() .range([0, boundWidth]) .domain(d3.extent(data, d => d.x)) const scaleY = d3.scaleLinear() .range([boundHeight, 0]) .domain(d3.extent(data, d => d.y)) //////////////////////////////////////////////////////////// //////////////////////// 3 SVG// /////////////////////////// //////////////////////////////////////////////////////////// const svgns = 'http://www.w3.org/2000/svg' const svg = d3.select('svg') svg .attr('xmlns', svgns) .attr('viewBox', `0 0 ${width} ${height}`) svg.append('rect') .attr('class', 'vBoxRect') .style("overflow", "visible") .attr('width', `${width}`) .attr('height', `${height}`) .attr('stroke', 'red') .attr('fill', 'none') //create BOUND rect -- to be deleted later svg.append('rect') .attr('class', 'boundRect') .attr('x', `${padding.left}`) .attr('y', `${padding.top}`) .attr('width', `${boundWidth}`) .attr('height', `${boundHeight}`) .attr('fill', 'none') .attr('stroke', 'black') //create bound element const bound = svg.append('g') .attr('class', 'bound') //specify transform, must be .style and not .attr, px needs to be mentioned .style('transform', `translate(${padding.left}px,${padding.top}px)`) //construct line generators //////////////////////////////////////////////////////////// ////////////////////////NO SCALE// ///////////////////////// //////////////////////////////////////////////////////////// const noScale = d3.line() .x(d => d.x) .y(d => d.y) (data) const noScaleWithDefinedFilter = d3.line() .x(d => d.x) .y(d => d.y) .defined(d => d.y) (data.filter((a) => a.y !== null)) const noScaleWithDefined = d3.line() .x(d => d.x) .y(d => d.y) .defined(d => d.y) (data) //no Scale bound.append('path') .attr('class', 'Black-noScale') .attr('d', noScale) .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', '2') //shows complete line bound.append('path') .attr('class', 'Violet-noScale+defined+filter') .attr('d', noScaleWithDefinedFilter) .attr('fill', 'none') .attr('stroke', 'violet') .attr('stroke-width', '2') .style('transform', 'translateY(50px)') //does not show null Y bound.append('path') .attr('class', 'Red-noScale+defined') .attr('d', noScaleWithDefined) .attr('fill', 'none') .attr('stroke', 'red') .attr('stroke-width', '2') .style('transform', 'translateY(75px)') //////////////////////////////////////////////////////////// ////////////////////////WITH SCALE// ///////////////////////// //////////////////////////////////////////////////////////// const withScale = d3.line() .x(d => scaleX(d.x)) .y(d => scaleY(d.y)) (data) const withScaleWithDefined = d3.line() .x(d => scaleX(d.x)) .y(d => scaleY(d.y)) .defined(d => d.y) (data) const withScaleWithDefinedFilter = d3.line() .x(d => scaleX(d.x)) .y(d => scaleY(d.y)) .defined(d => d.y) (data.filter((a) => a.y !== null)) bound.append('path') .attr('class', 'Salmon-withScale+Defined+Filter') .attr('d', withScaleWithDefinedFilter) .attr('fill', 'none') .attr('stroke', 'salmon') .attr('stroke-width', '2') bound.append('path') .attr('class', 'Blue-withScale+Defined') .attr('d', withScaleWithDefined) .attr('fill', 'none') .attr('stroke', 'blue') .attr('stroke-width', '2') .style('transform', 'translateY(-25px)') bound.append('path') .attr('class', 'Orange-withScale') .attr('d', withScale) .attr('fill', 'none') .attr('stroke', 'orange') .attr('stroke-width', '2') }32:[] 2f:{"id":"3261de2d85febec5","slug":null,"title":"Missing Data Test3","thumbnail":"bbbd8833b0bcddf08c389d007ac4b5858443971ac87a37289b9ba5ebc6ed0e79","access_level":"unlisted","create_time":"$D2022-06-08T19:44:39.992Z","update_time":"$D2022-06-08T20:50:00.419Z","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"},"version":53,"publish_version":53,"role":null,"authored":false,"authors":[{"type":"individual","id":"de9567210aaa8bfc","login":"smpa01","name":"smpa01","avatar_url":"https://avatars-next.observableusercontent.com/11fbf12260309afb8ae5e8d35256587cc7ddb704fb72f854fb7ae442be86582a","tier":null}],"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":0,"collection":null,"type":"notebook","body":{"title":"Missing Data Test3","cells":[{"id":0,"value":"# Missing Data Test3","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"\n\n\n\n \n \n \n Document\n\n\n\n

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