md`# Observable Assignment 1`
d3 = require("d3@5")
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
topojson = require("topojson-client@3")
jamaica = FileAttachment("jam_admbnd.json").json()
jamaica_features = topojson.feature(jamaica, jamaica.objects.jam_admbndl_ALL)
csv_data = d3.csvParse(await FileAttachment("PopParish.csv").text(),({Name,y2011,y2018}) => [Name,[((+y2018)-(+y2011))/(+y2011), y2011, y2018]])
//this is how to take the values of a variable (column) from all variables you created from the csv file
PcIncrease = Array.from(csv_data.values(), d => d[1][0])
//this is how you map the id column to the values. We will use this for joining with topojson later.
data = Object.assign(new Map(csv_data), {title: ["Name", "PcIncrease"]})
blues4 = [d3.color("#eff3ff"), d3.color("#bdd7e7"), d3.color("#6baed6"), d3.color("#2171b5")]
md`# Linear Scale (Unclassed)`
linear = d3.scaleLinear()
.domain([d3.min(PcIncrease) , d3.max(PcIncrease)])
.range(blues4)
chart(numericSort(PcIncrease), linear)
md`# Quantile`
quantile = d3.scaleQuantile()
.domain(PcIncrease)
.range(blues4)
chart(numericSort(PcIncrease), quantile)
naturalbreaks = simple.ckmeans(PcIncrease, 4).map(v => v.pop())
md`# Natural Breaks`
chart(numericSort(PcIncrease), jenks)
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(blues4)
md`# Equal Interval (Quantize)`
chart(numericSort(PcIncrease), quantize)
quantize = d3.scaleQuantize()
.domain(d3.extent(PcIncrease))
.range(blues4)
function numericSort(x) {
return (
x
// ensure the array is not changed in-place
.slice()
// comparator function that treats input as numeric
.sort((a, b) => a - b)
);
}
function chart(data, scale) {
const w = 30,
cols = Math.floor(Math.min(600, width) / w),
lines = Math.ceil(100 / cols);
const chart = d3
.create("svg")
.attr("width", cols * w)
.attr("height", lines * w);
chart
.append("g")
.attr("transform", "translate(2,2)")
.attr("style", "stroke:black; fill:white;")
.selectAll("rect")
.data(data)
.join("rect")
.attr("width", w - 3)
.attr("height", w - 3)
.attr("x", (_, i) => w * (i % cols))
.attr("y", (_, i) => w * ((i / cols) | 0))
.style("fill", d => (scale ? scale(d) : "#ddd"));
return chart.node();
}
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.
