Published
Edited
Sep 17, 2020
md`# Temperatures`
records = d3.csvParse(await FileAttachment("temperatures (2).csv").text(), d3.autoType)
temperatures = {
const temperatures = [];
records.forEach(student => {
keys.forEach(key => {
if (student[key] != null) {
const gender = student["gender"] ? student["gender"].toLowerCase() : "not-specified";
temperatures.push({
"hour": parseInt(key.substring(1)),
"temperature": student[key],
"gender": gender,
"alias": student["alias"],
"id": student["alias"] + "-" + student["day"]
})
}
});
});
return temperatures;
}
keys = {
let keys = Object.keys(records[0]);
keys.splice(0, 4);
return keys
}
vegaEmbed = require("vega-embed@6")
vegaEmbed({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "test",
"data": { "values": temperatures },
"mark": "circle",
"encoding": {
"x": {"field": "hour", "type": "quantitative", "scale": {"domain": [7, 24]}},
"y": {"field": "temperature", "type": "quantitative", "scale": {"domain": [96, 99.5]}},
"color": {
"field": "gender",
"type": "nominal",
"scale": {
"domain": ["m", "f", "not-specified"],
"range": ["#ff0000", "#0000ff", "#000000"]
}
},
}
})
vegaEmbed({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Temperature vs Hour",
"width": 300,
"height": 300,
"layer": [{
"data": { "values": temperatures },
"mark": { "type": "circle", "tooltip": {"content": "data"} },
"encoding": {
"y": {
"field": "hour",
"type": "quantitative",
"scale": {"domain": [5, 24]},
"sort": "descending"
},
"x": {
"field": "temperature",
"type": "quantitative",
"scale": {"domain": [96, 99.5]},
},
"color": {
"field": "gender",
"type": "nominal",
"scale": {
"domain": ["f", "m", "not-specified"],
"range": ["#ff0000", "#0000ff", "#000000"]
}
},
}
}, {
"mark": {"type": "rule", "strokeDash": [2 ,2] },
"encoding": {
"x": { "datum": 99 },
"size": { "value": 1 },
"color": { "value": "red"}
}
}]
})
males = temperatures.filter(d => d.gender == 'm')
females = temperatures.filter(d => d.gender == 'f')
nbs = temperatures.filter(d => d.gender == 'not-specified')
vegaEmbed({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Temperature vs Hour",
"width": 500,
"height": 500,
"layer": [ {
"data": { "values": females },
"mark": {
"type": "line",
"stroke": "red",
},
"encoding": {
"y": {
"field": "hour",
"type": "quantitative",
"scale": {"domain": [5, 24]},
},
"x": {
"field": "temperature",
"type": "quantitative",
"scale": {"domain": [96.5, 99.5]},
},
"strokeOpacity": {
"field": "id",
"type": "nominal",
}
}
},{
"data": { "values": males },
"mark": {"type": "line", "stroke": "blue"},
"encoding": {
"y": {
"field": "hour",
"type": "quantitative",
"scale": {"domain": [5, 24]},
},
"x": {
"field": "temperature",
"type": "quantitative",
"scale": {"domain": [96.5, 99.5]},
},
"strokeOpacity": {
"field": "id",
"type": "nominal",
}
}
}, {
"data": { "values": nbs },
"mark": {"type": "line", "stroke": "black"},
"encoding": {
"y": {
"field": "hour",
"type": "quantitative",
"scale": {"domain": [5, 24]},
},
"x": {
"field": "temperature",
"type": "quantitative",
"scale": {"domain": [96.5, 99.5]},
},
"color": {
"field": "id",
"type": "nominal",
}
}
},
{
"data": { "values": temperatures },
"mark": { "type": "circle", "tooltip": {
"signal": "{'title': datum.id,'temperature': datum.temperature, 'gender': datum.gender, 'hour': datum.hour}"
}, },
"encoding": {
"y": {
"field": "hour",
"type": "quantitative",
"sort": "descending",
"scale": {"domain": [7, 24]},
},
"x": {
"field": "temperature",
"type": "quantitative",
},
"color": {
"field": "gender",
"type": "nominal",
"scale": {
"domain": ["f", "m", "not-specified"],
"range": ["#ff0000", "#0000ff", "#000000"]
}
},
}
},
{
"mark": {"type": "rule", "strokeDash": [2 ,2] },
"encoding": {
"x": { "datum": 99 },
"size": { "value": 1 },
"color": { "value": "red"}
}
}]
})
md`## Improvements
* Calculate the axis extent based on the array values.
`
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.
