3e:null 3f:["$","title",null,{"children":"New Rendering Options in datasette-client | Alex Garcia | Observable"}] 45:T408,md`# New Rendering Options in datasette-client [datasette-client](https://observablehq.com/@asg017/datasette-client) is a small library that makes it easy to query and display data from [Datasette instances](https://github.com/simonw/datasette) in Observable notebooks. At first, the only out-of-the-box way in \`datasette-client\` to display data was to use \`.table\`, which rendered a plain HTML table that just displayed the raw values returned from the database. Since then, I've added a few new methods, namely \`.render()\` and \`.table.options()\`, that allows one to have full control of how to render data returned from Datasette. This can be used to create custom maps, data visualizations, image previews, and video downloads without having to write Datasette plugins in Python. This notebook will walk you through on how to use \`.render()\` and \`.table.options()\`, with examples of building maps, image previews, video previews, tweets, and spotify songs, all from data returned from live Datasette instances. `46:T4de,powerPlantsDBClusterMap = powerPlantsDB.render(function*(rows, columns) { const latCol = columns.find(column => /^lat/gi.test(column.toLowerCase())); const lonCol = columns.find(column => /^lon/gi.test(column.toLowerCase())); let container = DOM.element('div', { style: `width:${width}px;height:${(width * 9) / 16}px` }); yield container; let map = L.map(container); let osmLayer = L.tileLayer( 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' } ).addTo(map); const markerClusterGroup = L.markerClusterGroup({ chunkedLoading: true, maxClusterRadius: 50 }); map.addLayer(markerClusterGroup); const markers = []; for (const row of rows) { const marker = L.marker(L.latLng(row[latCol], row[lonCol])); marker.bindPopup( html`

${Object.keys( row ).map(k => html`

${DOM.text(k)}

${DOM.text(row[k])}`)}` ); markers.push(marker); } markerClusterGroup.addLayers(markers); map.fitBounds(markerClusterGroup.getBounds()); invalidation.then(() => map.remove()); })47:[] 43:{"id":"4fb044554b036300","slug":"new-rendering-options-in-datasette-client","title":"New Rendering Options in datasette-client","thumbnail":"c8e55d4ca2cb5ce8ec216200235ebfadb01a1ed9db2ec1c78f8c45249c76307f","access_level":"public","create_time":"$D2020-12-05T01:19:38.803Z","update_time":"$D2020-12-10T07:38:14.400Z","view_time":null,"first_public_time":"$D2020-12-07T05:09:26.373Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"512cbe7209990c30","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":"starter_2024","bio":"Software engineer, available for freelance work! • he/him/his"},"version":1146,"publish_version":1146,"role":null,"authored":false,"authors":[{"type":"individual","id":"113fc3dc69e1f893","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":null,"bio":"Software engineer, available for freelance work! • he/him/his"}],"members":[{"type":"individual","id":"113fc3dc69e1f893","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"2f85d9e4fc377f53","slug":"datasette-client","title":"datasette-client","owner":{"id":"512cbe7209990c30","login":"asg017","name":"Alex Garcia"}},"type":"notebook","body":{"titling":"auto","title":"New Rendering Options in datasette-client","cells":[{"id":0,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"import { DatasetteClient } from '@asg017/datasette-client-core'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"md`## .table.options()`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"md`\\`.table.options()\\` is used to extend the default rendering of the default \\`db.table()\\` mechanism. You can use it to either render specific cells in a different way, or to add extra columns. \n\nLet's use it to render images that are returned by a Datasette instance. This is useful if, for example, your SQLite database as BLOB columns that contain binary data of a PNG image, for example. To try it out, we will use Simon Willison's demo Datasette for the [\\`datasette-render-images\\`](https://github.com/simonw/datasette-render-images) project. We will basically build an entirely client-side replica of that plugin, without the need for installing new Python packages or touching Python code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`### Images`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"md`First, we use \\`DatasetteClient\\` to create a client that interacts with that Datasette instance.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"faviconDB = DatasetteClient(\n 'https://datasette-render-images-demo.datasette.io/favicons'\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"md`Before we dive into the SQL queries, we first need to prepare a utility function for rendering binary data in a webpage. Datasette's JSON API returns binary data from BLOB columns as Base64 encoded strings. To make it easier to work with, we will create a function \\`encodedBase64ToUrl()\\` that converts that difficult-to-work-with Base64 encoded string into a URL, which we can safely use in HTML tags like \\`\\` and \\`