// TODO: apply the color scale from task 3
//This Map object is to set each attribute a color scale
//https://observablehq.com/@d3/sequential-scales
//https://github.com/d3/d3-scale-chromatic
//https://www.d3indepth.com/scales/
colorScale = {
let colorScale = new Map();
attributes.forEach(function(attribute){
//https://observablehq.com/@d3/d3-scaleordinal
//For discrete set
if(attribute === "origin"){
colorScale.set(
attribute,
d3.scaleOrdinal(d3.schemeTableau10)
.domain(data.map(d => d.origin))
//.interpolator(d3.interpolateRainbow)
);
} else {
// For continuous data set
colorScale.set(
attribute,
d3.scaleSequential()
.domain(d3.extent(data, d => d[attribute]))
.interpolator(d3.interpolateViridis)
);
}
});
return colorScale;
}
console.log("data.map(d => d.origin):" + data.map(d => d.origin));
console.log("colorAttribute: " + colorAttribute);
console.log();
md`## Appendix`
height = 500
margin = ({ top: 10, right: 30, bottom: 10, left: 10 })
data = d3.csvParse(await FileAttachment("testCustom.csv").text(), d3.autoType)
attributes = data.columns.filter(d => d !== "name")
shortAttributeNames = new Map(
Object.entries({
mpg: "MPG",
cylinders: "CYL",
displacement: "DPL",
horsepower: "HP",
weight: "WGT",
acceleration: "ACL",
year: "YEAR",
origin: "OGN"
})
)
import { select } from "@jashkenas/inputs"
d3 = require("d3@5")
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.
