Public
Edited
Aug 25, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
interptype
Insert cell
d3[`interpolate${colorScheme}`](0.5)
Insert cell
import {ramp} from "@d3/color-schemes"
Insert cell
// chosen_colorscale = interptype === 'linear' ? linear_colorscale : log_colorscale;
Insert cell
chosen_colorscale = d => d3[`interpolate${colorScheme}`](chosen_domainscale(d))
Insert cell
chosen_domainscale = {
switch(interptype) {
case 'linear':
return linear_domainscale;
case 'log':
return log_domainscale;
case 'equalized':
return equalized_domainscale;
default:
return linear_domainscale;
}
}
Insert cell
d3.extent(value_counts_array, d => d.x)
Insert cell
// linear_colorscale = d3.scaleQuantize()
// .domain(pickups_extent)
// .range(colors)
Insert cell
linear_colorscale = d => d3[`interpolate${colorScheme}`](linear_domainscale(d))
Insert cell
linear_domainscale = d3.scaleLinear().domain(pickups_extent)
Insert cell
log_domainscale = d3.scaleLog().domain(pickups_extent)
Insert cell
get_cdf(grid.data.map(d => d.pickup))
Insert cell
function get_cdf(data) {
const pdf = {};
const cdf = {};
const unique_values = Array.from(new Set(data)).sort((a,b) => a-b);

// const rolling_sum
for (let x of data) {
pdf[x] = pdf[x] ? pdf[x]+1 : 1
}

let rolling_sum = 0;
for (let xu of unique_values) {
rolling_sum += pdf[xu];
cdf[xu] = rolling_sum;
}
return cdf
}
Insert cell
equalized_domainscale = get_equalized_domainscale(grid.data.map(d => d.pickup))
Insert cell
function get_equalized_domainscale(data) {
const num_obs = data.length;
const cdf = get_cdf(data);
const cdf_min = d3.min( Object.values(cdf) )
return (d) => {
return (cdf[d] - cdf_min)/(num_obs - cdf_min);
};
}
Insert cell
log_colorscale = d3.scaleLog()
.domain(pickups_extent)
.range(colors)
Insert cell
colorScheme
Insert cell
ncolors = 256
Insert cell
// function capitalize(str) {
// return str.charAt(0).toUpperCase() + str.slice(1);
// }
Insert cell
// capitalize(colorScheme)
Insert cell
d3[`scheme${colorScheme}`]
Insert cell
colors = get_colors(colorScheme)
Insert cell
function get_colors(name) {
let canvas;
let colors;
let dark;
if (d3[`scheme${name}`] && d3[`scheme${name}`][ncolors]) {
colors = d3[`scheme${name}`][ncolors];
dark = d3.lab(colors[0]).l < 50;
} else if (d3[`scheme${name}`] && schemeType === 'categorical') {
return d3[`scheme${name}`];
} else {
const interpolate = d3[`interpolate${name}`];
colors = [];
dark = d3.lab(interpolate(0)).l < 50;
for (let i = 0; i < ncolors; ++i) {
colors.push(d3.rgb(interpolate(i / (ncolors - 1))).hex());
}
}
return colors
}
Insert cell
schemeMap
Insert cell
// import {schemes} from "@observablehq/plot-cheatsheets-colors"
Insert cell
Insert cell
[...Array(10).keys()]
Insert cell
value_counts = {
const dataarr = grid.data.map(d => d.pickup);
const counts = {};

for (let x of dataarr) {
counts[x] = counts[x] ? counts[x]+1 : 1;
}
return counts
}
Insert cell
value_counts_array = Object.keys(value_counts).map(d => {
return {x: +d, y: value_counts[d], ypct: value_counts[d]/grid.num_data}
})
Insert cell
observed_values = Object.keys(value_counts).map(d => +d).sort((a, b) => a - b)
Insert cell
cdf_counts = {
const cdf_counts = {};
let rolling_sum = 0;

for (let x of observed_values) {
rolling_sum += value_counts[x];
cdf_counts[x] = rolling_sum;
}

return cdf_counts;
}
Insert cell
cdf_array = observed_values.map(d => {
return {x: d, y: cdf_counts[d], ypct: cdf_counts[d]/grid.num_data}
})
Insert cell
Insert cell
Insert cell
Plot.binX({y: 'count'},
{x: 'pickup', tip: true,
// channels: {'y': 'count'}
})
Insert cell
{
return Plot.plot({
title: 'Data can change very unevenly',
subtitle: 'yikes',
color: {
legend: true,
},
x: {
label: '...at or under these pickups'
},
y: {
label: 'Percent of areas...',
tickFormat: '.0%',
},
marginLeft: 70,
marks: [
// Plot.rectY(grid.data, Plot.binX({y: 'count'}, {x: 'pickup'})),
Plot.ruleY([0]),
Plot.lineY(cdf_array, { x: "x", y: "ypct", tip: false }),
Plot.dot(cdf_array, { x: "x", y: "ypct", tip: true,
channels: {'y': 'y', x: 'wowX'}
}),
]
})
}
Insert cell
Insert cell
pickupany = FileAttachment("pickupAny@1.json").json()
Insert cell
pickups_extent = d3.extent(cdf_array.map(d => d.x))
Insert cell
grid = {
return {
data: pickupany,
num_data: pickupany.length,
width: 1000,
height: 1000,
}
}
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