31:Tc45,viewof rawdata = Inputs.textarea({placeholder: "Paste here your data", rows: 4, value:`ID User Name categories Date Likes URL stabile solarpunk_001 cyberfuturepunk layer•diameter•slogan 2012-04-30 15176 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_001.jpeg solarpunk_002 dedouze develop 2012-05-25 12539 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_002.jpeg solarpunk_003 space_and_fantasy develop•diameter 2012-06-19 8878 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_003.jpeg solarpunk_004 catinawitchhat slogan 2012-07-14 8208 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_004.jpeg solarpunk_005 catinawitchhat pavement 2012-08-08 8225 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_005.jpeg solarpunk_006 scifi.inside pavement•slogan 2012-09-02 7706 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_006.jpeg solarpunk_007 cyberfuturepunk diameter•layer 2012-09-27 6442 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_007.jpeg solarpunk_008 heavymetal slogan 2012-10-22 6246 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_008.jpeg solarpunk_009 hencethefuture slogan 2012-11-16 4786 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_009.jpeg solarpunk_010 arts_offuture slogan•pavement 2012-12-11 2833 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_010.jpeg solarpunk_011 christopherscott_365 diameter 2013-01-05 2615 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_011.jpeg solarpunk_012 tamifischerr diameter 2013-01-30 2472 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_012.jpeg solarpunk_013 dank.lloyd.wright layer 2013-02-24 2263 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_013.jpeg solarpunk_014 scifi.inside layer 2013-03-21 1553 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_014.jpeg solarpunk_015 notnooted develop•diameter 2013-04-15 1409 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_015.jpeg solarpunk_016 dank.lloyd.wright slogan 2013-05-10 809 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_016.jpeg solarpunk_017 athrbeautyco slogan 2013-06-04 815 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_017.jpeg solarpunk_018 athrbeautyco slogan 2013-06-29 826 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_018.jpeg solarpunk_019 getlostwithbrooks pavement 2013-07-24 799 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_019.jpeg solarpunk_020 queer_ecofeminism diameter•layer 2013-08-18 752 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_020.jpeg solarpunk_021 pastelae diameter•layer 2013-09-12 624 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_021.jpeg solarpunk_022 dopblog diameter•layer 2013-10-07 387 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_022.jpeg solarpunk_023 dopblog pavement 2013-11-01 371 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_023.jpeg solarpunk_024 ynhoia pavement 2013-11-26 357 https://aquaalta.densitydesign.org/rawgraphsimages/solarpunk_024.jpeg`})32:[] 2f:{"title":"RAWGraphs made within Observable","cells":[{"id":0,"value":"# RAWGraphs made within Observable\nThe notebook demonstrates how to use the RAWGraphs libraries from within Observable and recreates the tool under an Observable-ish guise. The final goal would be to use it to develop and demonstrate new charts, we'll start from direct data visualizations of images. ","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"*Import RAWGraphs core + charts libraries*","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"rawgraphs = require(\"@rawgraphs/rawgraphs-core@1.0.0-beta.16\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"charts = require(\"@rawgraphs/rawgraphs-charts@1.0.0-beta.26\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"## 1. Load your data\n*Paste a tsv*","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"*Adjust data types, in case d3.autoType fails. Use 'binary' for images*","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"data = d3.tsvParse(rawdata, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof dataTypes = {\n return form(html``)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"tableData = Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"## 2. Choose a chart","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"viewof choice = Inputs.select(Object.keys(charts), {value: \"treemap\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"chart = charts[choice]","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"## 3. Mapping","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"mapping = {\n return {\n hierarchy: { value: [\"categories\", \"User Name\", \"ID\"] },\n color: {\n value: [\"categories\"],\n config: {\"aggregation\": [\"csvDistinct\"]}\n },\n label: {\n value: [\"User Name\",\"ID\" ],\n config: {\"aggregation\": [\"csvDistinct\",\"csvDistinct\"]}\n },\n size: {\n value: [\"Likes\"],\n config: {\"aggregation\": [\"sum\"]}\n },\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"## 4. Customize","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"visualOptions = {\n return {\n width: 900,\n height: 600\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"## 5. Your visualization\n*Instantiate the chart*","pinned":false,"hidden":false,"mode":"md"},{"id":443,"value":"visualization = rawgraphs.chart(chart, {\n data: dataset,\n mapping: mapping,\n dataTypes: dataTypes,\n visualOptions: visualOptions\n}); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"visualization.renderToDOM(document.getElementById(\"container\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"html`

🗺 The chart will appear here 🗺

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"## *Dietro le quinte*","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"*1 Get images URLs (remove duplicates, merge all related columns)*","pinned":false,"hidden":false,"mode":"md"},{"id":186,"value":"assetsURLs = {\n // get all columns with assets URLs\n const keys = Object.keys(dataTypes).filter(key=>dataTypes[key]===\"binary\")\n // get urls and concetenate\n let urls = [];\n keys.forEach(key=> urls=data.map(d=>d[key]).concat(urls) )\n // return unique values\n return [...new Set(urls)]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"*2 Fetch assets and encode them as base64 binaries (uses allorigins.win)*","pinned":false,"hidden":false,"mode":"md"},{"id":509,"value":"⚠️ The CORS proxy looks down, you can uncheck the following option and bypass the problem with a [browser extension](https://mybrowseraddon.com/access-control-allow-origin.html). Downloads will also be faster.","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"viewof cors_proxy = Inputs.toggle({label: \"Use CORS proxy\", value:proxyPrefix})","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"base64s = encodeBase64(assetsURLs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"*3 Create a dictionary* `{url: base64}`","pinned":false,"hidden":false,"mode":"md"},{"id":255,"value":"binaries = Object.assign({}, ...assetsURLs.map((url,i) => ({[url]: base64s[i]})));","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"*3 Apply data types and add columns for binaries*","pinned":false,"hidden":false,"mode":"md"},{"id":293,"value":"dataset = {\n const clonedData = JSON.parse(JSON.stringify(data))\n clonedData.forEach(d=>{ \n for (let key in dataTypes) {\n switch (dataTypes[key]) {\n case \"number\":\n d[key] = Number(d[key])\n break;\n case \"date\":\n d[key] = new Date(d[key])\n break;\n case \"binary\":\n d[key] = d[key];\n const header = \"binary \"+key\n d[header] = binaries[d[key]];\n break;\n default:\n d[key] = d[key].toString();\n }\n }\n })\n return clonedData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"tableDataset = Inputs.table(dataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"proxyPrefix = \"https://api.allorigins.win/raw?url=\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"async function encodeBase64(imagesURLs){\n const prefixed = imagesURLs.map(d=>{\n const url = d\n return toBase64(cors_proxy?proxyPrefix+encodeURIComponent(url):url)\n })\n const base64s = await Promise.all(prefixed)\n return base64s\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"toBase64 = (url) => fetch(url)\n .then(response => {\n return response.blob()\n })\n .then(blob => new Promise((resolve, reject) => {\n const reader = new FileReader()\n reader.onloadend = () => {\n return resolve(reader.result)\n }\n reader.onerror = reject // TODO: handle rejection cases\n reader.readAsDataURL(blob)\n }))\n .catch(err => { console.warn(err) });","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}