data = {
const allData = (d3.csvParse(await FileAttachment("12.22_reflectivity@3.csv").text(), d3.autoType))
.map(({ Reflectivity, Wavelength, Material}) => ({Material, iso: Material, Property_name: "Reflectivity", Property: Reflectivity, Wavelength: Wavelength }))
return [
allData.filter(({ iso }) => iso === 'Fused quartz over aluminum substrate'),
allData.filter(({ iso }) => iso === 'Stainless steel, as received, dull'),
allData.filter(({ iso }) => iso === 'White paint'),
allData.filter(({ iso }) => iso === 'Aluminum evaporated film'),
allData.filter(({ iso }) => iso === 'Snow'),
allData.filter(({ iso }) => iso === 'Human skin, Caucasian'),
allData.filter(({ iso }) => iso === 'Red brick'),
allData.filter(({ iso }) => iso === 'Black paint'),
]
}
yScale = {
return d3.scaleLinear(
[ 0, 1 ],
[ height - margin.bottom, margin.top ]
)
}
logFormat10 = xScale.tickFormat(10, "")
xScale.ticks(10).map(logFormat10)
xAxis = d3.axisBottom(xScale.copy().range([margin.left, width-margin.right])).tickFormat(logFormat10)
yAxis = d3.axisLeft(yScale)
line = d3.line()
.x(d => xScale(d.Wavelength))
.y(d => yScale(d.Property))
.curve(d3.curveBasis)
multipleSpline = {
const heightWindow = 500+35*data.length
const svg = html `<svg width="1000" height="${heightWindow}" />`
const line = d3.line()
.x(d => xScale(d.Wavelength))
.y(d => yScale(d.Property))
//.curve(d3.curveBasis)
const defStroke = 3;
d3.select(svg)
.selectAll('path')
.data(data)
.join("path")
.attr('class', 'data')
.attr('d', (d) => line(d) )
.style('stroke', d => colors(d[0].Material))
.style('stroke-width', defStroke)
.style('fill', 'transparent')
.on('mouseover', function() {
d3.select(this)
.transition()
.duration(100)
.style("stroke-width", 6)
})
.on('mouseout', function() {
d3.select(this)
.transition()
.duration(100)
.style("stroke-width", defStroke)
})
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].length; j++) {
d3.select(svg)
.append("circle")
.attr('cx', xScale(data[i][j].Wavelength))
.attr('cy', yScale(data[i][j].Property))
.attr('r', 10)
.style('fill', colors(data[i][j].Material))
}
}
d3.select(svg)
.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0,${ height - margin.bottom })`)
.style('stroke-width', 2)
.style('opacity', 0.5)
.call(xAxis)
d3.select(svg)
.append('g')
.attr('class', 'y-axis')
.attr('transform', `translate(${ margin.left },0)`)
.style('stroke-width', 2)
.style('opacity', 0.5)
.call(yAxis)
const g = d3.select(svg).append('g');
const xAxisG = g.append('g')
const yAxisG = g.append('g')
const xLabel = xAxisG.append('text')
const yLabel = yAxisG.selectAll("text.yaxisLabel").data(data[0]).enter().append('text')
yAxisG.attr("stroke-width", 3)
xLabel
.attr('x', 450)
.attr('y', 485)
.attr('font-size', 12)
.attr('fill', 'black')
.text('Wavelength (μm)')
yAxisG.selectAll("text.yaxisLabel").data(data[0]).enter().append('text')
.attr("class","yaxisLabel")
.attr('x', 10)
.attr('font-size', 10)
.attr('fill', 'black')
.style("font", "Source Sans Pro")
.style("text-align","center")
.text(d => d.Property_name)
.attr('transform', 'rotate(-90, 150, 140)')
const colorLegendG = g.append('g')
.attr('transform', "translate(" + 50 +", 510)")
const colorLegend = legendcolor.legendColor()
.scale(colors)
.shape('circle')
.shapePadding(35)
colorLegendG.call(colorLegend)
return svg
}
data[0]
data
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.
