2a:null 2b:["$","title",null,{"children":"Datapackage 📦 Tables 🗗 Diagram | Taras Novak | Observable"}] 30:[] 2e:{"id":"6000a4ce749701fa","slug":"datapackage-diagram","title":"Datapackage 📦 Tables 🗗 Diagram","thumbnail":"db248a130172bf6828abd9bf2826826d01959075705dadc3c044420913fd2f8f","access_level":"public","create_time":"$D2022-07-05T14:56:34.621Z","update_time":"$D2022-12-24T14:34:08.964Z","view_time":null,"first_public_time":"$D2022-07-06T14:01:00.153Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":"starter_2024"},"version":520,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"17b72db66175b428","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":null}],"members":[{"type":"individual","id":"17b72db66175b428","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"729de16217a66212","slug":"tables","title":"Tables","owner":{"id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak"}},"type":"notebook","body":{"title":"Datapackage 📦 Tables 🗗 Diagram","cells":[{"id":0,"value":"# Datapackage 📦 Tables 🗗 Diagram\n\nThis notebook creates [Data Package 📦](https://observablehq.com/@randomfractals/data-package) [Graphviz](https://graphviz.org/) and [Mermaid ER](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram) diagrams of [Tabular Data Resources](https://specs.frictionlessdata.io/tabular-data-resource/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"## Data Package 📦","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"dataPackageUrl = 'https://gitlab.com/wgms/glathida/-/raw/main/datapackage.yml'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"dataPackage = loadDataPackage(dataPackageUrl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"async function loadDataPackage(dataPackageUrl) {\n if (dataPackageUrl.endsWith('.yml')) {\n // load datapackage.yml config\n return await DataPackage.Package.load(await yaml.load(await fetchYamlConfig(dataPackageUrl)))\n }\n return await DataPackage.Package.load(dataPackageUrl);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"## Datapackage 📦 Resource Tables 🗗 Diagram\n\n### ${dataPackage.descriptor.title}\n\n${dataPackage.descriptor.description ? dataPackage.descriptor.description : ''}\n\n**Note:** click on the `diagram` cell vertical **...** menu below to download it in SVG or PNG format.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"packageDiagram = diagram(dataPackage)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"async function diagram(dataPackage) {\n const tables = dataPackage.resources.filter(resource => resource.tabular);\n const tableNodes = tables.map((table) =>\n `\"${table.name}\" [shape=none, label=<\n \n \n \n ${table.schema.fields.map((field) => `\n \n \n \n `).join('')}}\n

\n ${table.name}\n
${field.name}	${field.type}

\n >]`).join('\\n');\n\n const tableRefs = tableReferences(dataPackage);\n const tableConnections = tableRefs.map(reference =>\n `${reference.fromTable}:${reference.fromField} -> ${reference.toTable}:${reference.toField}`\n ).join('\\n');\n \n return dot`digraph \"${dataPackage.descriptor.title}\" {\n node [fontsize=12]\n rankdir = LR;\n ${tableNodes}\n ${tableConnections}\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"function tableReferences(dataPackage) {\n let tableReferences = [];\n dataPackage.resources.filter(resource => resource.schema?.foreignKeys?.length > 0)\n .forEach(resource => {\n resource.schema.foreignKeys.forEach(foreignKey => {\n tableReferences.push({\n fromTable: resource.name,\n fromField: foreignKey?.fields[0],\n toTable: foreignKey?.reference?.resource,\n toField: foreignKey?.reference?.fields[0]\n });\n })\n });\n return tableReferences;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"## Datapackage Mermaid ER Diagram\n\n[Mermaid ER Diagram](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"packageERDiagram = erDiagram(dataPackage)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"html`\n${DOM.download(await rasterize(packageERDiagram), `${dataPackage.descriptor.name}-diagram.png`, \"Save as PNG\")}\n${DOM.download(await serialize(packageERDiagram), `${dataPackage.descriptor.name}-diagram.svg`, \"Save as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"async function erDiagram(dataPackage) {\n const tables = dataPackage.resources.filter(resource => resource.tabular);\n const tableNodes = tables.map((table) =>\n `${table.name} {\n ${table.schema.fields.map((field) => `${field.name} ${field.type}`).join('\\n')}\n }`).join('\\n');\n \n const tableRefs = tableReferences(dataPackage);\n const tableConnections = tableRefs.map(reference =>\n `${reference.toTable} ||--|| ${reference.fromTable} : ${reference.fromField}`\n ).join('\\n');\n \n return mermaid`erDiagram\n ${tableNodes}\n ${tableConnections}\n `; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"## Resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"resourceNames = dataPackage.resourceNames","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"viewof resourceName = Inputs.select(dataPackage.resourceNames.filter(resourceName => resourceName !== 'validation_report'), {\n label: html`Resource`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"resourceTable = Inputs.table([resource.descriptor], {\n format: {\n datahub: d => d.type\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"resource = dataPackage.getResource(resourceName);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"resourcePath = md`Resource data path: **${resource.descriptor.path}**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"resource.schema","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"Inputs.table(resourceFields)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"resourceFields = resource.descriptor.schema.fields","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"resources = dataPackage.resources","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"primaryKeys = resources.filter(resource => resource.schema?.primaryKey?.length > 0)\n .map(resource => ({\n resource: resource.name,\n primaryKey: resource.schema.primaryKey[0]\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"foreignKeys = resources.filter(resource => resource.schema?.foreignKeys?.length > 0)\n .map(resource => ({\n resource: resource.name,\n foreignKeys: resource.schema.foreignKeys\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"tableRefs = tableReferences(dataPackage)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"import {dot} from '@gordonsmith/graphviz'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"import {rasterize, serialize} from '@mbostock/saving-svg'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"import {displayDot} from '@oscar6echo/zoom-and-pan-graphviz-dot'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"import {fetchYamlConfig} from '@randomfractals/datapackage-yaml'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"yaml = require('js-yaml@4.1.0/dist/js-yaml.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"DataPackage = require('https://unpkg.com/datapackage@1.1.10/dist/datapackage.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"