The avatar for @jswatsch
Janet Swatscheno
Associate Director for Outreach and Education at the HathiTrust Research Center
Public
Edited
May 21, 2024
5 forks
Comments locked
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
htid2 = "uva.x001016358"
Insert cell
htid = 'mdp.39015067702061'; //assigning the HathiTrust ID to the variable htid
Insert cell
Insert cell
Insert cell
function cleanId(id) {
const i = id.indexOf('.');
if (i == -1) throw `Invalid clean htid: ${id}`;
const lib = id.substring(0, i);
const libId = id.substring(i+1);
return `${lib}.${libId.replaceAll(':', '+').replaceAll('/', '=').replaceAll('.', ',')}`;
}
Insert cell
cleanHTID = cleanId(htid); //Now we pass our HathiTrust ID throught he clean id function so we can use it in our API calls
Insert cell
Insert cell
Insert cell
data1 = fetch(`https://data.htrc.illinois.edu/ef-api/volumes/${cleanHTID}`).then((response) => response.json())
Insert cell
response = fetch(`https://data.htrc.illinois.edu/ef-api/volumes/${cleanHTID}`).then(resp => resp.json()) //In our API call, we're passing the cleanHTID into the URL for the API call using ${cleanHTID}. Must use back tick ` aroundd the url
Insert cell
Insert cell
Insert cell
data = response.data //looking specifically at the data property
Insert cell
Insert cell
Insert cell
hd = data.features.pages //looking specifically at the pages within the features property
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart1 = Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(hd, {x: "seq", y: "tokenCount"}) //here is where we can swap out the preloaded data and put in our hd array and plot the token count You can swap out tokenCount for lineCount, sentenceCount, etc.!
]
})
Insert cell
Insert cell
Insert cell
comparison_id = "uiug.30112064412874"
Insert cell
comparison_htid = cleanId(comparison_id)
Insert cell
comparison_response = fetch(`https://data.htrc.illinois.edu/ef-api/volumes/${comparison_htid}`).then(resp => resp.json())
Insert cell
comparison_data = comparison_response.data
Insert cell
comparison_hd = comparison_data.features.pages
Insert cell
Insert cell
chart2 = Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.line(hd, {x: "seq", y: "tokenCount", stroke: "blue"}),
Plot.line(comparison_hd, {x: "seq", y: "tokenCount", stroke: "#e15759"}),
]
})
Insert cell
Insert cell
Insert cell
Insert cell
import {Histogram} from "@d3/histogram"
Insert cell
chart = Histogram(hd, { //taking this from https://observablehq.com/@d3/histogram
value: d => d.tokenCount,
label: "Number of Tokens",
width,
height: 400,
color: "steelblue"
})
Insert cell
chart3 = Histogram(hd, {
value: d => d.tokenCount,
label: "Number of Tokens",
width,
height: 500,
color: "steelblue"
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
worksetid = '66477bae2600005807132b25';
Insert cell
Insert cell
workset_response = fetch(`https://data.htrc.illinois.edu/ef-api/worksets/${worksetid}/volumes`).then(resp => resp.json())
Insert cell
Insert cell
Insert cell
workset_metadata_response = fetch(`https://data.htrc.illinois.edu/ef-api/worksets/${worksetid}/metadata`).then(resp => resp.json())
Insert cell
Insert cell
workset_pubdates_response = fetch(`https://data.htrc.illinois.edu/ef-api/worksets/${worksetid}/metadata?fields=metadata.title%2Cmetadata.pubDate`).then(resp => resp.json())
Insert cell
Insert cell
wprd = workset_pubdates_response.data
Insert cell
Insert cell
pubDates = wprd.map(obj => obj.metadata);
Insert cell
// import {BeeswarmChart} from "@d3/beeswarm"
Insert cell
Insert cell
PubDateTimeline = BeeswarmChart(pubDates, {
x: d => d3.timeParse("%Y")(d.pubDate), // d3.timeParse("%Y")(d.pubDate) this needed to be added for the dates to show up correctly
label: "Year",
type: d3.scaleTime,
title: d => d.title,
range: [0, width]
})
Insert cell
Insert cell
Insert cell
Insert cell
agg_data = fetch(`https://data.htrc.illinois.edu/ef-api/worksets/${worksetid}/volumes/aggregated`).then((response) => response.json())
Insert cell
Insert cell
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