Published
Edited
Nov 29, 2020
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dataset = FileAttachment("my_weather_data.json").json()
Insert cell
Insert cell
xAccessor = d => d.dewPoint
Insert cell
yAccessor = d => d.humidity
Insert cell
colorAccessor = d => d.cloudCover
Insert cell
Insert cell
dimensions = {
let dimensions = {
width: width,
height: 500,
marginTop: 10,
marginRight: 10,
marginBottom: 50,
marginLeft: 58
};
dimensions.boundedWidth = dimensions.width - dimensions.marginLeft - dimensions.marginRight;
dimensions.boundedHeight = dimensions.height - dimensions.marginTop - dimensions.marginBottom;

return dimensions;
}
Insert cell
Insert cell
wrapper = d3.create("div")
Insert cell
svg = wrapper.append("svg")
.attr("viewBox", [0, 0, dimensions.width, dimensions.height])
Insert cell
bounds = svg
.append("g")
.style("transform", `translate(${dimensions.marginLeft}px, ${dimensions.marginRight}px)`)
Insert cell
Insert cell
xScale = d3
.scaleLinear()
.domain(d3.extent(dataset, xAccessor))
.range([0, dimensions.boundedWidth])
.nice()
Insert cell
yScale = d3
.scaleLinear()
.domain(d3.extent(dataset, yAccessor))
.range([dimensions.boundedHeight, 0])
.nice()
Insert cell
colorScale = d3.scaleLinear()
.domain(d3.extent(dataset, colorAccessor))
.range([lowColor, highColor])
Insert cell
Insert cell
xAxisGenerator = d3.axisBottom(xScale)
Insert cell
xAxis = bounds.append("g")
.call(xAxisGenerator)
.style("transform", `translateY(${dimensions.boundedHeight}px)`)
Insert cell
xAxisLabel = xAxis
.append('text')
.attr('x', dimensions.boundedWidth / 2)
.attr('y', dimensions.marginBottom - 10)
.attr('fill', 'black')
.style('font-size', '1.4em')
.html('Dew Point (°F)')
Insert cell
yAxisGenerator = d3.axisLeft(yScale)
Insert cell
yAxis = bounds.append("g")
.call(yAxisGenerator)
Insert cell
yAxisLabel = yAxis.append('text')
.attr('x', -dimensions.boundedHeight / 2)
.attr('y', -dimensions.marginLeft + 10)
.attr('fill', 'black')
.style('font-size', '1.4em')
.text('Relative Humidity')
.style('transform', 'rotate(-90deg)')
.style('text-anchor', 'middle')
Insert cell
Insert cell
x = d => xScale(xAccessor(d))
Insert cell
y = d => yScale(yAccessor(d))
Insert cell
fill = d => colorScale(colorAccessor(d))
Insert cell
addData = bounds
.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", x)
.attr("cy", y)
.attr("r", radius)
.attr("fill", fill)
.attr("opacity", 0.5)
Insert cell

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.
Learn more