The avatar for @wattenberger2
Amelia Wattenberger
Published
Edited
Aug 12, 2021
1 fork
38 stars
8
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
Insert cell
Insert cell
Insert cell
sampleDatapoint = data[0]
Insert cell
yAccessor = d => d.temperatureHigh
Insert cell
yAccessor(sampleDatapoint)
Insert cell
xAccessor = d => new Date(d.time * 1000)
Insert cell
xAccessor(sampleDatapoint)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
boundsWidth = width - margins.left - margins.right
Insert cell
boundsHeight = height - margins.top - margins.bottom
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
styleAttributes = ({
// fill: "white",
// stroke: "black"
// "stroke-width": 1,
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
svg = htl.svg`<svg></svg>`
Insert cell
svgSelectionObject = d3.select(svg)
Insert cell
svgSelectionObject
.attr("width", width)
.attr("height", height)
Insert cell
svgSelectionObject
// .style("border", "1px solid green")
// .append("g")
// .attr("transform", `translate(${margins.left}, ${margins.top})`)
// .append("rect")
// .attr("width", boundsWidth)
// .attr("height", boundsHeight)
// .attr("fill", "pink")
Insert cell
Insert cell
Insert cell
Insert cell
firstDate = d3.min(data, xAccessor)
Insert cell
lastDate = d3.max(data, xAccessor)
Insert cell
xScale = d3.scaleLinear()
.domain([firstDate, lastDate])
.range([0, boundsWidth])
Insert cell
xScale(new Date("06/06/2020"))
Insert cell
Insert cell
minTemp = d3.min(data, yAccessor)
Insert cell
maxTemp = d3.max(data, yAccessor)
Insert cell
yScale = d3.scaleLinear()
.domain([minTemp, maxTemp])
.range([boundsHeight, 0])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
bounds.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => xScale(xAccessor(d)))
.attr("cy", d => yScale(yAccessor(d)))
.attr("r", 4)
Insert cell
Insert cell
Insert cell
Insert cell
boundsWithPeripherals = d3.select(chartWithPeripherals).select("#bounds")
Insert cell
xAxisGenerator = d3.axisBottom()
.scale(xScale)
.ticks(5)
.tickFormat(d3.timeFormat("%-m/%-d/%Y"))
Insert cell
xAxis = boundsWithPeripherals.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0, ${boundsHeight})`)
Insert cell
xAxisGenerator(xAxis)
Insert cell
yAxisGenerator = d3.axisLeft()
.scale(yScale)
.ticks(5)
Insert cell
boundsWithPeripherals.append("g")
.attr("class", "y-axis")
.call(yAxisGenerator)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
boundsWithInteractions.selectAll("circle")
.on("mouseover", (e, datum) => {
console.log(datum, hoveredDatum)
mutable hoveredDatum = datum

const allCircles = this
allCircles.attr("fill", "black")
const thisCircle = d3.select(e.target)
thisCircle.attr("fill", "red")
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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