Software engineer dabbling in data viz
currentlyReadingUrl = "https://openlibrary.org/people/" +
username +
"/books/currently-reading.json"
recentlyFinishedUrl = "https://openlibrary.org/people/" +
username +
"/books/already-read.json?limit=18"
// recentlyFinishedUrl = "https://openlibrary.org/people/<your-username-here>/books/already-read.json?limit=18"
bookData = Promise.all(
combinedRaw.map((d, i) => {
let id_we_use = null;
if (!d.work.cover_edition_key) {
id_we_use = d.logged_edition.substring(7, 18);
} else id_we_use = d.work.cover_edition_key;
const coverUrl =
"http://covers.openlibrary.org/b/olid/" + id_we_use + "-L.jpg";
const editionUrl = "https://openlibrary.org/books/" + id_we_use + ".json";
d = d.work;
return d3.json(editionUrl).then((editionJson) => {
return getColors(coverUrl)
.then((colors) => {
colors = colors.map((d) => {
return {
red: d._rgb[0],
green: d._rgb[1],
blue: d._rgb[2]
};
});
// if there's no image or we can't get colors for some reason, just skip this book
if (colors.length == 0) return null;
return {
Title: d.title,
NumPages: editionJson.number_of_pages,
CoverColor: colors[COVERCOLOR],
AccentColor: colors[ACCENTCOLOR],
CoverUrl: coverUrl
};
})
.catch(function (err) {
return null;
});
});
})
)
bookData
BOOKDATA = bookData.filter((d) => d).slice(0, NUMBOOKS)
bookPath = 'M -19,20 L 9,20 L 5,1 L -15,1 Z'
html`
<svg width="200" height="100">
<style>
.small { font: italic 13px serif; }
</style>
<linearGradient id="gradient" y1="0%" y2="0%" x1="0%" x2="100%" spreadMethod="pad">
<stop offset="0%" stop-color="Yellow"></stop>
<stop offset="10%" stop-color="#ac840c"></stop>
<stop offset="90%" stop-color="#ac840c"></stop>
<stop offset="100%" stop-color="Yellow"></stop>
</linearGradient>
<rect width="30" height="100" style="fill: url(#gradient)";" />
<text transform="translate(15,50) rotate(90)" x="0" y="0" class="small" fill="#784426">My text</text>
<text transform="translate(20,40) rotate(90)" x="0" y="0" class="small" fill="#784426">My text</text>
<text x="0" y="0" transform="translate(40,40) rotate(90) scale(6)">{</text>
</svg>`
html`
<svg width="100" height="200">
<style>
.small { font: italic 13px serif; }
</style>
<linearGradient id="gradient" y1="0%" y2="0%" x1="0%" x2="100%" spreadMethod="pad">
<stop offset="0%" stop-color="Yellow"></stop>
<stop offset="10%" stop-color="#ac840c"></stop>
<stop offset="90%" stop-color="#ac840c"></stop>
<stop offset="100%" stop-color="Yellow"></stop>
</linearGradient>
<rect width="30" height="100" style="fill: url(#gradient)";" transform="translate(0,20)" />
<text transform="translate(15,50) rotate(90)" x="0" y="0" class="small" fill="#784426">My text</text>
<path transform="translate(20,0)" d="${bookPath}"/>
</svg>`
d3=require('d3');
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.
