fleur / Rebecca Sutton Koeser

Lead Research Software Engineer @Princeton-CDH. Previously software engineer at @emory-libraries and contributor to @ecds, @emory-lits-labs

Workspace

Public

Edited

Jun 9, 2023

// load the data from attached file

data = FileAttachment("gd_projects_dates.csv").csv()

// convert date strings to date time objects

data_dt = data.map(x => {x.date = new Date(x.date); return x});

degree_per_month = 360/12;

function toRadians(degrees) {

return (Math.PI/180) * degrees; // convert degrees to radians

}

data.filter(x => x.project == "lenape-timetree");

data.filter(x => x.project == "lenape-timetree").map(x => [new Date(x.date).getMonth(), x.issue]);

data.filter(x => x.project == "lenape-timetree").map(x => [new Date(x.date).getMonth() * degree_per_month, x.issue]);

Math.max(...data.map(x => x.issue))

// determine earliest year in our dataset

minYear = Math.min(...data_dt.map(x => x.date.getFullYear()))

// create a d3 scale to map issues to petal size

petalScale = d3.scaleLinear([0, Math.max(...data.map(x => x.issue))], [15, 350]);

petal = {

let petal = data_dt.filter(x => x.project == "lenape-timetree").map(x => [toRadians(x.date.getMonth() * degree_per_month), petalScale(x.issue)]);

petal.push(...data_dt.reverse().map(x => [toRadians(x.date.getMonth()), petalScale(0)]));

return petal;

}

{

let preDate = new Date(data_dt[0].date.getTime());

preDate.setMonth(data_dt[0].date.getMonth() - 1);

return preDate;

}

function monthToAngle(month) {

// our angles are zero-based but months are not, so adjust

return toRadians((month - 1) * degree_per_month)

}

function yearOffset(year) {

return (year - minYear) * 10;

}

yearOffset(2019) + petalScale(1)

function generatePetal(project,year) {

let project_data = data_dt.filter(x => x.project == project);

if (year != undefined) {

project_data = project_data.filter(x => x.date.getFullYear() == year);

}

// add zero counts to the month before and after the data, to make it look more like a petal

let monthOffset = (24*60*60*1000) * 31; // 31 days - we don't care where in the month it is, just previous month

let preDate = new Date(project_data[0].date.getTime() - monthOffset);

let afterDate = new Date(project_data[project_data.length - 1].date.getTime() + monthOffset);

project_data.unshift({date: preDate, issue: 0});

project_data.push({date: afterDate, issue: 0});

let petal = project_data.map(x => [

monthToAngle(x.date.getMonth()),

yearOffset(x.date.getFullYear()) + petalScale(x.issue)

]);

// petal.push(...project_data.reverse().map(x => [x[0], petalScale(0)]));

petal.push(...project_data.reverse().map(x => [

monthToAngle(x.date.getMonth()),

yearOffset(x.date.getFullYear()) + petalScale(0)]));

return petal;

}

data_dt.filter(x => x.project == "mep-django").filter(x => x.date.getFullYear() == 2019)

generatePetal("mep-django", 2019)

data_dt.filter(x => x.project == "cdh-web")

generatePetal("cdh-web")

svg`<svg width=800 height=700>

</g>

</svg>`

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more