Public
Edited
Jan 29
1 fork
// on a regular web page you would instead install a dependency from npm
// npm i @vizabi/reader-ddfcsv
// and use a ES6 import like so:
// import "@vizabi/reader-ddfcsv/dist/reader-ddfcsv.js";
DDFCsvReader = require('https://unpkg.com/@vizabi/reader-ddfcsv@4.5.2')
DDFCsvReader.versionInfo
DDFCsvReader.version
readerInstance = {
const reader = new DDFCsvReader.getDDFCsvReaderObject();
reader.init({path: "https://github.com/open-numbers/ddf--gapminder--fasttrack.git"})
return reader;
}
data = readerInstance.read({
from: "datapoints",
language: "en",
select: {key: ["country", "time"], value: ["gdp_pcap", "lex", "pop"]},
where: {}
})
chart = Plot.plot({
width,
y: { type: "linear", grid: true },
x: { type: "log", grid: true },
marks: [
Plot.dot(data, {
filter: (f) => f.time - d3.utcParse("%Y")("" + time) == 0,
x: "gdp_pcap",
y: "lex",
r: "pop",
title: "country",
tip: true
})
]
})
{
//hover effect
d3.select(chart)
.append("svg:style")
.text(`
circle {pointer-events: visible;}
circle:hover {fill:pink;}
`)
}
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.
