Published unlisted
Edited
Jun 8, 2022
Missing Data Test3
{////////////////////////////////////////////////////////////
//////////////////////// 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')
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
