md`# July 2020 temperature data`
d3 = require("d3@7")
chart = {
//draw chart
const svg = d3.create("svg")
.attr("viewBox",[0, 0, width, height]);
//draw x-axis and y-axis
svg.append('g').call(xAxis)
svg.append('g').call(yAxis)
//draw line
svg.append('path')
.datum(series)
.attr('d', line)
.style('stroke', (d, i) => colors(d[i].topic))
//.style('stroke', function(d) {return colors(d.topic)})
.style('fill', 'transparent');
return svg.node();
}
mutable data = FileAttachment("july2020.json").json();
d3.max(data, d => d.value)
d3.extent(data, d => d.time)
temp = data.map(d => d.value)
//function(data){
// data.forEach(function(d){
// d.value = +d.value;
// d.topic = d.topic;
// d.time = d3.isoParse(d.time["$date"]);
// })
// return [
// data.filter(function(d){ return d.topic == "sensor/moisture" }),
// data.filter(function(d){ return d.topic == "sensor/temperature" }),
// data.filter(function(d){ return d.topic == "sensor/humidity" })
// ]
// } , {
// y: " °F",
// conditions: ["sensor/moisture", "sensor/temperature", "sensor/humidity"],
// labels: ["moisture", "temperature", "humidity"],
// colors: ["deepskyblue", "lightskyblue", "lightblue"]
// series = Array.from(
// d3.group(data, d => d.topic)
// );
// function(data){
// data.map(({ time, topic, value }) => ({
// time : d3.isoParse(time["$date"]),
// topic : topic,
// value: value
// }))
series = data.filter(({ topic }) => topic === 'sensor/temperature')
//series2 = data.filter(({ topic }) => topic === 'sensor/temperature')
//series = data.filter(({ topic }) => topic === 'sensor/humidity')
//}
// Group the entries by symbol
// dataNest = Array.from(
// d3.group(data, d => d.symbol), ([key, value]) => ({key, value})
// );
series.map(({time, topic, value}) => ({
time : d3.isoParse(time["$date"]),
topic : topic,
value : value
}))
series2 = data.filter(({ topic }) => topic === 'sensor/temperature')
series2.map(({time, topic, value}) => ({
time : d3.isoParse(time["$date"]),
topic : topic,
value : value
}))
data.filter(({topic}) => topic === 'sensor/moisture')
data.filter(function(d){ return d.topic == "sensor/humidity" })
data[1].topic
d3.isoParse(data[1].time["$date"])
data[1].value
margin = ({ top: 0, right: 0, bottom: 20, left: 30})
d3.extent(data, (d) => d3.isoParse(d.time["$date"]))
xScale = d3.scaleTime()
.domain(d3.extent(data, (d) => d3.isoParse(d.time["$date"])))
.range([margin.left, width - margin.right])
d3.max(data, (d) => d.value)
yScale = d3.scaleLinear()
.domain([0, d3.max(data, (d) => d.value)])
.range([height - margin.bottom, margin.top]);
xAxis = (g) => g
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale)
.tickFormat(d3.timeFormat("%B %e, %Y")))
yAxis = (g) => g
.attr('transform', `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale))
height = 200;
value = data[0].value
format = d3.isoParse("2020-07-14T13:55:13.226Z")
time = d3.isoParse(data[0].time["$date"])
topic = data[0].topic
line = d3.line()
.x(d => xScale(d3.isoParse(d.time["$date"])))
.y(d => yScale(d.value))
colors = d3.scaleOrdinal(d3.schemeSet1)
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.
