')"
]
},
{
"cell_type": "code",
"execution_count": 8,
"id": "d3c03776",
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
"require.config({paths: {\n",
" d3: \"http://d3js.org/d3.v3.min\"\n",
"}});\n",
"\n",
"function visjsonld(file, selector){\n",
" \n",
" require([\"d3\"], function(d3) {\n",
" \n",
" d3.json(file, (err, jsonld) => {\n",
" \n",
" var config = {};\n",
" \n",
" var h = config.h || 800\n",
" , w = config.w || 3000\n",
" , maxLabelWidth = config.maxLabelWidth || 200\n",
" , transitionDuration = config.transitionDuration || 750\n",
" , transitionEase = config.transitionEase || 'cubic-in-out'\n",
" , minRadius = config.minRadius || 5\n",
" , scalingFactor = config.scalingFactor || 2;\n",
" \n",
" var i = 0;\n",
"\n",
" var tree = d3.layout.tree()\n",
" .size([h, w]);\n",
" \n",
" var diagonal = d3.svg.diagonal()\n",
" .projection(function(d) { return [d.y, d.x]; });\n",
" \n",
" d3.select(selector).selectAll(\"svg\").remove();\n",
" \n",
" var svg = d3.select(selector).append('svg')\n",
" .attr('width', w)\n",
" .attr('height', h)\n",
" .attr('style', 'background-color:#446a7f')\n",
" .append('g')\n",
" .attr('transform', 'translate(' + maxLabelWidth + ',0)');\n",
" \n",
" var root = jsonldTree(jsonld);\n",
" root.x0 = h / 2;\n",
" root.y0 = 0;\n",
" root.children.forEach(collapse);\n",
" \n",
" function changeSVGWidth(newWidth) {\n",
" if (w !== newWidth) {\n",
" d3.select(selector + ' > svg').attr('width', newWidth);\n",
" }\n",
" }\n",
" \n",
" function jsonldTree(source) {\n",
" var tree = {};\n",
" \n",
" if ('@id' in source) {\n",
" tree.isIdNode = true;\n",
" tree.name = source['@id'];\n",
" if (tree.name.length > maxLabelWidth / 9) {\n",
" tree.valueExtended = tree.name;\n",
" tree.name = '...' + tree.valueExtended.slice(-Math.floor(maxLabelWidth / 9));\n",
" }\n",
" } else {\n",
" tree.isIdNode = true;\n",
" tree.isBlankNode = true;\n",
" // random id, can replace with actual uuid generator if needed\n",
" tree.name = '_' + Math.random().toString(10).slice(-7);\n",
" }\n",
" \n",
" var children = [];\n",
" Object.keys(source).forEach(function(key) {\n",
" if (key === '@id' || key === '@context' || source[key] === null) return;\n",
" \n",
" var valueExtended, value;\n",
" if (typeof source[key] === 'object' && !Array.isArray(source[key])) {\n",
" children.push({\n",
" name: key,\n",
" children: [jsonldTree(source[key])]\n",
" });\n",
" } else if (Array.isArray(source[key])) {\n",
" children.push({\n",
" name: key,\n",
" children: source[key].map(function(item) {\n",
" if (typeof item === 'object') {\n",
" return jsonldTree(item);\n",
" } else {\n",
" return { name: item };\n",
" }\n",
" })\n",
" });\n",
" } else {\n",
" valueExtended = source[key];\n",
" value = valueExtended;\n",
" if (value.length > maxLabelWidth / 9) {\n",
" value = value.slice(0, Math.floor(maxLabelWidth / 2)) + '...';\n",
" children.push({\n",
" name: key,\n",
" value: value,\n",
" valueExtended: valueExtended\n",
" });\n",
" } else {\n",
" children.push({\n",
" name: key,\n",
" value: value\n",
" });\n",
" }\n",
" }\n",
" });\n",
" \n",
" if (children.length) {\n",
" tree.children = children;\n",
" }\n",
" \n",
" return tree;\n",
" }\n",
" \n",
" function update(source) {\n",
" var nodes = tree.nodes(root).reverse();\n",
" var links = tree.links(nodes);\n",
" \n",
" nodes.forEach(function(d) { d.y = d.depth * maxLabelWidth; });\n",
" \n",
" var node = svg.selectAll('g.node')\n",
" .data(nodes, function(d) { return d.id || (d.id = ++i); });\n",
" \n",
" var nodeEnter = node.enter()\n",
" .append('g')\n",
" .attr('class', 'node')\n",
" .attr('transform', function(d) { return 'translate(' + source.y0 + ',' + source.x0 + ')'; })\n",
" .on('click', click);\n",
" \n",
" nodeEnter.append('circle')\n",
" .attr('r', 0)\n",
" .style('stroke-width', function(d) {\n",
" return d.isIdNode ? '2px' : '1px';\n",
" })\n",
" .style('stroke', function(d) {\n",
" return d.isIdNode ? 'navy' : '#78BE21';\n",
" })\n",
" .style('fill', function(d) {\n",
" if (d.isIdNode) {\n",
" return d._children ? 'white' : 'white';\n",
" } else {\n",
" return d._children ? 'white' : 'white';\n",
" }\n",
" })\n",
" \n",
" \n",
" nodeEnter.append('text')\n",
" .attr('x', function(d) {\n",
" var spacing = computeRadius(d) + 5;\n",
" return d.children || d._children ? -spacing : spacing;\n",
" })\n",
" .attr('dy', '4')\n",
" .attr('text-anchor', function(d) { return d.children || d._children ? 'end' : 'start'; })\n",
" .text(function(d) { return d.name + (d.value ? ': ' + d.value : ''); })\n",
" .style('fill-opacity', 0)\n",
" \n",
";\n",
" \n",
" var maxSpan = Math.max.apply(Math, nodes.map(function(d) { return d.y + maxLabelWidth; }));\n",
" if (maxSpan + maxLabelWidth + 20 > w) {\n",
" changeSVGWidth(maxSpan + maxLabelWidth);\n",
" d3.select(selector).node().scrollLeft = source.y0;\n",
" }\n",
" \n",
" var nodeUpdate = node.transition()\n",
" .duration(transitionDuration)\n",
" .ease(transitionEase)\n",
" .attr('transform', function(d) { return 'translate(' + d.y + ',' + d.x + ')'; });\n",
" \n",
" nodeUpdate.select('circle')\n",
" .attr('r', function(d) { return computeRadius(d); })\n",
" .style('stroke-width', function(d) {\n",
" return d.isIdNode ? '2px' : '1px';\n",
" })\n",
" .style('stroke', function(d) {\n",
" return d.isIdNode ? '#78BE21' : '#78BE21';\n",
" })\n",
" .style('fill', function(d) {\n",
" if (d.isIdNode) {\n",
" return d._children ? 'navy' : '#78BE21';\n",
" } else {\n",
" return d._children ? 'navy' : '#78BE21';\n",
" }\n",
" });\n",
" \n",
" nodeUpdate.select('text').style('fill-opacity', 1);\n",
" nodeUpdate.select('text').style('font-family', \"'Open Sans', 'Helvetica Neue', Helvetica, sans-serif\");\n",
" nodeUpdate.select('text').style('fill', 'white');\n",
" nodeUpdate.select('text').style('font-size', '12px');\n",
" \n",
" \n",
" \n",
" \n",
" \n",
" \n",
" \n",
" \n",
" var nodeExit = node.exit().transition()\n",
" .duration(transitionDuration)\n",
" .ease(transitionEase)\n",
" .attr('transform', function(d) { return 'translate(' + source.y + ',' + source.x + ')'; })\n",
" .remove();\n",
" \n",
" nodeExit.select('circle').attr('r', 0);\n",
" nodeExit.select('text').style('fill-opacity', 0);\n",
" \n",
" var link = svg.selectAll('path.link')\n",
" .data(links, function(d) { return d.target.id; });\n",
" \n",
" link.enter().insert('path', 'g')\n",
" .attr('class', 'link')\n",
" .attr('style', 'fill: none;stroke: #DADFE1;stroke-width: 1px;')\n",
" .attr('d', function(d) {\n",
" var o = { x: source.x0, y: source.y0 };\n",
" return diagonal({ source: o, target: o });\n",
" });\n",
" \n",
" link.transition()\n",
" .duration(transitionDuration)\n",
" .ease(transitionEase)\n",
" .attr('d', diagonal);\n",
" \n",
" link.exit().transition()\n",
" .duration(transitionDuration)\n",
" .ease(transitionEase)\n",
" .attr('d', function(d) {\n",
" var o = { x: source.x, y: source.y };\n",
" return diagonal({ source: o, target: o });\n",
" })\n",
" .remove();\n",
" \n",
" nodes.forEach(function(d) {\n",
" d.x0 = d.x;\n",
" d.y0 = d.y;\n",
" });\n",
" }\n",
" \n",
" function computeRadius(d) {\n",
" if (d.children || d._children) {\n",
" return minRadius + (numEndNodes(d) / scalingFactor);\n",
" } else {\n",
" return minRadius;\n",
" }\n",
" }\n",
" \n",
" function numEndNodes(n) {\n",
" var num = 0;\n",
" if (n.children) {\n",
" n.children.forEach(function(c) {\n",
" num += numEndNodes(c);\n",
" });\n",
" } else if (n._children) {\n",
" n._children.forEach(function(c) {\n",
" num += numEndNodes(c);\n",
" });\n",
" } else {\n",
" num++;\n",
" }\n",
" return num;\n",
" }\n",
" \n",
" function click(d) {\n",
" if (d.children) {\n",
" d._children = d.children;\n",
" d.children = null;\n",
" } else {\n",
" d.children = d._children;\n",
" d._children = null;\n",
" }\n",
" \n",
" update(d);\n",
" \n",
" // fast-forward blank nodes\n",
" if (d.children) {\n",
" d.children.forEach(function(child) {\n",
" if (child.isBlankNode && child._children) {\n",
" click(child);\n",
" }\n",
" });\n",
" }\n",
" }\n",
" \n",
" function collapse(d) {\n",
" if (d.children) {\n",
" d._children = d.children;\n",
" d._children.forEach(collapse);\n",
" d.children = null;\n",
" }\n",
" }\n",
" \n",
" update(root);\n",
" \n",
" \n",
" })\n",
"\n",
"\n",
"\n",
"\n",
"})}\n",
"var file = './data/cma/output/json/all/74576.json';var selector = '#example';visjsonld(file, selector); "
],
"text/plain": [
"
"
]
},
"execution_count": 8,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from IPython.core.display import Javascript\n",
"\n",
"code2 = \"var file = './data/cma/output/json/all/\" + id + \".json';\"\\\n",
" \"var selector = '#example';\" \\\n",
" \"visjsonld(file, selector); \" \n",
"\n",
"with open('src/js/visld.js', 'r') as _jscript:\n",
" code = _jscript.read() + code2\n",
"\n",
"Javascript(code)\n",
"\n",
"\n"
]
},
{
"cell_type": "code",
"execution_count": 9,
"id": "6cf3e2db",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"File list
Click on a link to view created Linked Art JSON-LD file
"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"74572.json"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"74554.json"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"0.json"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"74540.json"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"74576.json"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"74570.json"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from IPython.core.display import Javascript, HTML\n",
"\n",
"\n",
"def fn(fpath): # 1.Get file names from directory\n",
" file_list=os.listdir(r\"\" + fpath)\n",
" cnt =1 \n",
" for file in file_list:\n",
" cnt = cnt+1\n",
" \n",
" display(HTML(\"\" + file + \"\"))\n",
"\n",
"\n",
"display(HTML(\"File list
Click on a link to view created Linked Art JSON-LD file
\"))\n",
" \n",
"fn(\"./data/cma/output/json/all/\")\n",
"\n",
"\n",
" "
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "66976acc-8d11-493d-bec0-439069a7ecd7",
"metadata": {},
"outputs": [],
"source": []
},
{
"cell_type": "code",
"execution_count": null,
"id": "0867f3a2-2edf-478f-9ea9-e094a5100464",
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"finalized": {
"timestamp": 1650627649583,
"trusted": true
},
"interpreter": {
"hash": "40d3a090f54c6569ab1632332b64b2c03c39dcf918b08424e98f38b5ae0af88f"
},
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.8.8"
},
"widgets": {
"application/vnd.jupyter.widget-state+json": {
"state": {},
"version_major": 2,
"version_minor": 0
}
}
},
"nbformat": 4,
"nbformat_minor": 5
}