rawgraphs = require("@rawgraphs/rawgraphs-core@1.0.0-beta.16")
charts = require("@rawgraphs/rawgraphs-charts@1.0.0-beta.26")
data = d3.tsvParse(rawdata, d3.autoType)
chart = charts[choice]
mapping = {
return {
hierarchy: { value: ["categories", "User Name", "ID"] },
color: {
value: ["categories"],
config: {"aggregation": ["csvDistinct"]}
},
label: {
value: ["User Name","ID" ],
config: {"aggregation": ["csvDistinct","csvDistinct"]}
},
size: {
value: ["Likes"],
config: {"aggregation": ["sum"]}
},
}
}
visualization = rawgraphs.chart(chart, {
data: dataset,
mapping: mapping,
dataTypes: dataTypes,
visualOptions: visualOptions
});
visualization.renderToDOM(document.getElementById("container"))
assetsURLs = {
// get all columns with assets URLs
const keys = Object.keys(dataTypes).filter(key=>dataTypes[key]==="binary")
// get urls and concetenate
let urls = [];
keys.forEach(key=> urls=data.map(d=>d[key]).concat(urls) )
// return unique values
return [...new Set(urls)]
}
base64s = encodeBase64(assetsURLs)
binaries = Object.assign({}, ...assetsURLs.map((url,i) => ({[url]: base64s[i]})));
proxyPrefix = "https://api.allorigins.win/raw?url="
async function encodeBase64(imagesURLs){
const prefixed = imagesURLs.map(d=>{
const url = d
return toBase64(cors_proxy?proxyPrefix+encodeURIComponent(url):url)
})
const base64s = await Promise.all(prefixed)
return base64s
}
toBase64 = (url) => fetch(url)
.then(response => {
return response.blob()
})
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => {
return resolve(reader.result)
}
reader.onerror = reject // TODO: handle rejection cases
reader.readAsDataURL(blob)
}))
.catch(err => { console.warn(err) });
import {form} from "@mbostock/form-input"
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.
