data = {
const allData = (d3.csvParse(await FileAttachment("dfsw@1.csv").text(), d3.autoType))
.map(({ state, absorptivity, wavelength}) => ({state, iso: state, absorptivity: absorptivity, wavelength: wavelength }))
return [
allData.filter(({ iso }) => iso === 'Bleached'),
allData.filter(({ iso }) => iso === 'Charged')
]
}
width = 700
height = 500
margin = ({
top: 50,
right: 250,
bottom: 50,
left: 50})
colors = {
const State = data.map(d => d[0].state)
return d3.scaleOrdinal(
State,
d3.schemeSet1
)
}
xScale = {
console.log(data)
const startWavelength = data[0][0].wavelength,
endWavelength = data[0][data.length - 1].wavelength
return d3.scaleLinear(
// domain
[ startWavelength, 800 ],
// range
[ margin.left, width - margin.right ]
)
}
yScale = {
// flatten the data into a single array
const absorptivity = data[0].flat().map(d => d.absorptivity),
// and find the max value from that array
yMax = d3.max( absorptivity )
return d3.scaleLinear(
[ 0, 1 ],
[ height - margin.bottom, margin.top ]
)
}
xAxis = d3.axisBottom(xScale)
yAxis = d3.axisLeft(yScale)
line = d3.line()
.x(d => xScale(d.wavelength))
.y(d => yScale(d.absorptivity))
.curve(d3.curveLinear)
multipleLinear = {
const svg = html `<svg width="500" height="500" />`
d3.select(svg)
.selectAll('path')
.data(data)
.join('path')
.attr('class', 'dfsw')
// Using our line generator here
.attr('d', line)
// Every data point in the array has a name key
// so we just grab the one from d[0]
.style('stroke', d => colors(d[0].state))
.style('stroke-width', 2)
.style('fill', 'transparent')
.style('opacity', '0.5')
/* This places the labels to the right of each line
d3.select(svg)
.selectAll('text.label')
.data( data )
.join('text')
.attr('class', 'label')
// place the ticks to the right of the chart
.attr('x', width - margin.right + 5)//d => xScale(d[0].wavelength))
// Place the ticks at the same y position as
// the last y value of the line (remember, d is our array of points)
.attr('y', d => yScale( d[d.length - 1].emissivity))
.attr('dy', '0.35em')
.style('fill', d => colors(d[0].material))
.style('font-family', 'sans-serif')
.style('font-size', 12)
.text(d => d[0].material)
d3.select(svg).selectAll("g").data(data).join('g')
.selectAll("circle").data(d=>d).join('circle')
.attr('cx', d => xScale(d.wavelength))
.attr('cy', d => yScale( d.emissivity ))
.attr("r",10)
*/
d3.select(svg)
.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0,${ height - margin.bottom })`)
.call(xAxis)
d3.select(svg)
.append('g')
.attr('class', 'y-axis')
.attr('transform', `translate(${ margin.left },0)`)
.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.append('text')
xLabel
.attr('x', 200)
.attr('y', 485)
.attr('font-size', 10)
.attr('fill', 'black')
.text('Wavelength (μm)')
yLabel
.attr('x', 250)
.attr('y', 20)
.attr('font-size', 10)
.attr('fill', 'black')
.text('Absorptivity (α)')
.attr('transform', 'rotate(-90)')
const colorLegendG = g.append('g')
.attr('transform', "translate(" + 400 +", 375)")
const colorLegend = legendcolor.legendColor()
.scale(colors)
.shape('circle')
.shapePadding(35)
colorLegendG.call(colorLegend)
return svg
}
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.
