25:["$","title",null,{"children":"Bl.ocks Viewer | Yuichi Yazaki | Observable"}] 49:Td34,// https://gist.github.com/search?l=HTML&o=desc&q=filename%3A.block&s=forks viewof preset = { const entries = Object.entries({ 'https://gist.github.com/mbostock/4062045': 'Force-Directed Graph', 'https://gist.github.com/mbostock/1353700': 'Epicyclic Gearing', 'https://gist.github.com/kerryrodden/7090426': 'Sequences sunburst', 'https://gist.github.com/mbostock/4339083': 'Collapsible Tree', 'https://gist.github.com/mbostock/7555321': 'Wrapping Long Labels', 'https://gist.github.com/mbostock/4063318': 'Calendar View', 'https://gist.github.com/nbremer/21746a9668ffdf6d8242': 'Radar Chart Redesign', 'https://gist.github.com/mbostock/7607535': 'Zoomable Circle Packing', 'https://gist.github.com/mbostock/1044242': 'Hierarchical Edge Bundling', 'https://gist.github.com/mbostock/1642874': 'Line Transition', 'https://gist.github.com/mbostock/4063269': 'Bubble Chart', 'https://gist.github.com/mbostock/899711': 'Google Maps + D3', 'https://gist.github.com/mbostock/1153292': 'Mobile Patent Suits', 'https://gist.github.com/mbostock/4061961': 'Bullet Charts', 'https://gist.github.com/mbostock/4348373': 'Zoomable Sunburst', 'https://gist.github.com/mbostock/3887118': 'Scatterplot', 'https://gist.github.com/nbremer/21746a9668ffdf6d8242': 'Radar Chart Redesign', 'https://gist.github.com/mbostock/3231298': 'Collision Detection', 'https://gist.github.com/mbostock/1062288': 'Collapsible Force Layout', 'https://gist.github.com/kerryrodden/766f8f6d31f645c39f488a0befa1e3c8': 'Sequences sunburst (d3 v4)', 'https://gist.github.com/mbostock/950642': 'Labeled Force Layout', 'https://gist.github.com/mbostock/34f08d5e11952a80609169b7917d4172': 'Brush & Zoom', 'https://gist.github.com/mbostock/4060954': 'Streamgraph', 'https://gist.github.com/mbostock/4062006': 'Chord Diagram', 'https://gist.github.com/mbostock/4062085': 'Population Pyramid', 'https://gist.github.com/mbostock/4163057': 'Gradient Along Stroke', 'https://gist.github.com/mbostock/1256572': 'D3 Show Reel', 'https://gist.github.com/mbostock/1283663': 'Hierarchical Bar Chart', 'https://gist.github.com/mbostock/1096355': 'Polar Clock', 'https://gist.github.com/mbostock/5577023': 'Every ColorBrewer Scale', 'https://gist.github.com/mbostock/1005873': 'Zoomable Icicle', 'https://gist.github.com/mbostock/4060366': 'Voronoi Tessellation', 'https://gist.github.com/mbostock/4679202': 'Stacked-to-Multiples', 'https://gist.github.com/anilnairxyz/a51393d7c51342abe8d4e3f4cbab7ae1': 'Candlestick Chart', 'https://gist.github.com/drzax/81fff35393fb65255621fd0ab8d11bd7': 'Narrative Charts', 'https://gist.github.com/mootari/fb37437067fbfaa7ad3d23c07d726057': 'Random trees without RNGs', 'https://gist.github.com/rpgove/8c8b08cc0ae1e1e969f5d2904a6a0e26': 'Force Directed Layout Quality Convergence', // ['URL', 'TITLE'], }).map( ([k, v]) => [k, `${k.match(/\.com\/([^\/]+?)\//)[1]}: ${v}`] ).sort((a, b) => a[1].localeCompare(b[1])); const {url} = params; if(url && !entries.some(d => d[0] === url)) entries.unshift([url, 'URL preset']); return Inputs.select(entries, { label: 'Example', valueof: d => d[0], format: d => d[1], width: '100%', value: url ?? 'https://gist.github.com/mootari/fb37437067fbfaa7ad3d23c07d726057' }); }4a:Td9e,info = { const html = htl.html; const plural = (n, s, p) => `${n} ${n === 1 ? s : p}`; const date = d3.timeFormat('%Y-%m-%d'); const dateTime = d3.timeFormat('%Y-%m-%d, %H:%M'); const link = ({text, title, href, icon = icons.link, name}) => html`${raw(icon)}${text}`; const scope = DOM.uid().id; const {description, owner, files, forks, fork_of, history, comments, created_at: created, updated_at: updated} = gist; const updatedForks = forks.filter(d => d.created_at !== d.updated_at).length; const url = `https://gist.github.com/${owner.login}/${gist.id}`; const thumb = files['thumbnail.png']?.raw_url; const readme = files['README.md']?.content; const dateTitle = `Created ${dateTime(new Date(created))}\nUpdated ${dateTime(new Date(updated))}` + `\n${history.length} revisions`; const stars = link({ name: "stars", icon: icons.star, text: "?", title: "View stargazers", href: `${url}/stargazers` }); getStargazers(owner.login, gist.id).then(n => { stars.lastElementChild.title = `View ${n} stargazers`; stars.lastElementChild.textContent = n; }); return html`

${titleOf(gist)}

${owner.login} ${raw(icons.clock)}${date(new Date(updated))} ${stars} ${link({ name: "comments", icon: icons.comment, text: comments, title: `View ${plural(comments, 'comment', 'comments')}`, href: `${url}#comments` })} ${link({ name: "forks", icon: icons.fork, text: forks.length, title: `View ${plural(forks.length, 'fork', 'forks')} (${updatedForks} updated)`, href: `${url}/forks` })} ${!fork_of ? '' : html`${raw(icons.fork)}Fork of ${titleOf(fork_of)}`} ${link({name: "block", title: "Open directly", text: "block", href: doc})} ${link({name: "gist", title: "Open the gist", text: "gist", href: url})}

${!thumb ? '' : html`

${!readme ? '' : html`

${md`${readme}`}`}