2d:null 2e:["$","title",null,{"children":"Speaker Tags | Peter Beshai | Observable"}] 33:T1876,chart = { const fullXDomain = fullTimeExtent // a bit of wiggle room const minimapHeight = 6 * numDays + 15; const minimapMargin = 20; const tagHeight = 15; const tagDayMargin = 30; const padding = { top: 20 + minimapHeight + minimapMargin, right: 50, bottom: 20, left: 50 }; const height = numDays * (tagHeight + tagDayMargin) + padding.top + padding.bottom; const plotAreaHeight = height - padding.top - padding.bottom; const plotAreaWidth = width - padding.left - padding.right; console.log(height, padding, plotAreaHeight, tagHeight) const svg = d3.select(DOM.svg(width, height)); // xScale.range([0, plotAreaWidth]); const xScale = d3.scaleLinear().domain(fullXDomain).range([0, plotAreaWidth]); const yScale = d3.scaleBand().domain(d3.range(numDays)).range([0, plotAreaHeight]); const g = svg.append('g') .attr('transform', `translate(${padding.left}, ${padding.top})`); const gTags = g.append('g').attr('class', 'g-tags'); const xAxis = d3.axisBottom(xScale).tickFormat(timeOfDayFormat); g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + plotAreaHeight + ")") const gDayLabels = g.append('g').attr('class', 'g-day-labels'); const gHighlight = g.append('g').attr('class', 'highlight'); gHighlight.append('text') .attr('text-anchor', 'middle') .attr('dy', tagHeight + 12) .style('font-family', 'helvetica') .style('font-size', 13) .style('font-weight', 'bold') .text(''); gHighlight.append('rect') .attr('class', 'highlight-rect') .attr('height', tagHeight); draw(); g.selectAll('.highlighted').raise(); function draw() { const tagsBinding = gTags.selectAll('.tag').data(flatTagData, d=> d.index); const tagsEnter = tagsBinding.enter() .append('rect') .attr('class', 'tag'); tagsEnter.merge(tagsBinding) .attr('x', d => xScale(tagTimeWithinDay(d)[0])) .attr('y', d => yScale(tagDayIndex(d))) .attr('width', d => { const time = tagTimeWithinDay(d); return xScale(time[1]) - xScale(time[0]); }) .attr('height', tagHeight) .style('fill', getColorForTag) .style('stroke', d => d.speaker_id === highlightSpeaker ? 'tomato' : 'rgba(0, 0, 0, 0.2)') .classed('highlighted', d => d.speaker_id === highlightSpeaker) .on('click', d => { mutable selectedTag = d; console.log('you clicked', d); }) .on('mouseenter', d => { const xMin = xScale(tagTimeWithinDay(d)[0]); const xMax = xScale(tagTimeWithinDay(d)[1]); const tagWidth = (xMax - xMin); const y = yScale(tagDayIndex(d)); gHighlight.attr('transform', `translate(${xMin}, ${y})`) .style('display', '') .select('text') .attr('dx', tagWidth / 2) .text(d.speaker_id); gHighlight.select('rect') .attr('width', tagWidth) }) .on('mouseleave', d => { gHighlight.style('display', 'none'); }); g.select(".axis--x").call(xAxis); // draw day labels const days = d3.range(numDays).map(i => dateExtent[0].clone().add(i, 'days')); const daysBinding = gDayLabels.selectAll('.day-label').data(days); const daysEnter = daysBinding.enter().append('text') .attr('class', 'day-label') .text(d => d.format('MMM D, YYYY')) daysEnter.merge(daysBinding) .attr('y', (d, i)=> yScale(i)) .attr('x', 0) .attr('dy', -5) } // render minimap const plotAreaHeight2 = minimapHeight; const xScale2 = d3.scaleLinear().domain(fullXDomain).range([0, plotAreaWidth]); const yScale2 = d3.scaleBand().domain(d3.range(numDays)).range([0, plotAreaHeight2]); const gMinimap = svg.append('g') .attr('transform', `translate(${padding.left}, ${padding.top - plotAreaHeight2 - minimapMargin})`); function drawMinimap(g) { // background gMinimap.append('rect') .attr('width', plotAreaWidth) .attr('height', plotAreaHeight2) .style('fill', '#f6f6f6') const tagHeightAvailable = Math.floor(plotAreaHeight2 / numDays); const tagHeight = tagHeightAvailable * 0.8; // margin const gTags = g.append('g').attr('class', 'tags'); const tagsBinding = gTags.selectAll('.tag').data(flatTagData); const tagsEnter = tagsBinding.enter() .append('rect') .attr('class', 'tag') .attr('x', d => xScale2(tagTimeWithinDay(d)[0])) .attr('y', d => yScale2(tagDayIndex(d))) .attr('width', d => { const time = tagTimeWithinDay(d); return xScale2(time[1]) - xScale2(time[0]); }) .attr('height', tagHeight) .style('fill', getColorForTag) } drawMinimap(gMinimap); // brush const brush = d3.brushX() .extent([[0, 0], [plotAreaWidth, plotAreaHeight2]]) .on("brush end", brushed); // zoom const zoom = d3.zoom() .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [plotAreaWidth, plotAreaHeight]]) .extent([[0, 0], [plotAreaWidth, plotAreaHeight]]) .on("zoom", zoomed); // brush control gMinimap.append("g") .attr("class", "brush") .call(brush); function brushed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom const s = d3.event.selection || xScale2.range(); const newDomain = s.map(xScale2.invert, xScale2); xScale.domain(newDomain); draw(); svg.select(".zoom").call(zoom.transform, d3.zoomIdentity .scale(width / (s[1] - s[0])) .translate(-s[0], 0)); } // zoom control svg.append("rect") .attr("class", "zoom") .attr("width", plotAreaWidth) .attr("height", plotAreaHeight) .attr("transform", "translate(" + padding.left + "," + padding.top + ")") .call(zoom); g.raise(); function zoomed() { if (d3.event.sourceEvent && (d3.event.sourceEvent.type === "brush" || d3.event.sourceEvent.type === "end")) return; // ignore zoom-by-brush var t = d3.event.transform; xScale.domain(t.rescaleX(xScale2).domain()); draw(); gMinimap.select(".brush").call(brush.move, xScale.range().map(t.invertX, t)); } return svg.node(); }34:[] 31:{"id":"61822c92f2a76b48","slug":"speaker-tags","title":"Speaker Tags","thumbnail":"c83f5a3437910a121538185f561e43cb8a4131031d7f807dd0799c2cf306a2e8","access_level":"public","create_time":"$D2018-05-03T21:17:21.451Z","update_time":"$D2018-05-11T17:34:18.863Z","view_time":null,"first_public_time":"$D2018-05-04T02:39:45.479Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6acf8922a00de1ff","login":"pbeshai","name":"Peter Beshai","avatar_url":"https://avatars-next.observableusercontent.com/db43a100f98fe00872d57f02fe3deb1fe4d5305239db9310ba983a9c7d6efb65","tier":"starter_2024"},"version":461,"publish_version":461,"role":null,"authored":false,"authors":[{"type":"individual","id":"26ab57b8a43a5dda","login":"pbeshai","name":"Peter Beshai","avatar_url":"https://avatars-next.observableusercontent.com/db43a100f98fe00872d57f02fe3deb1fe4d5305239db9310ba983a9c7d6efb65","tier":null}],"members":[{"type":"individual","id":"26ab57b8a43a5dda","login":"pbeshai","name":"Peter Beshai","avatar_url":"https://avatars-next.observableusercontent.com/db43a100f98fe00872d57f02fe3deb1fe4d5305239db9310ba983a9c7d6efb65","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Speaker Tags","cells":[{"id":0,"value":"md`# Speaker Tags`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`Specify a JSON file to read the speaker tag data from.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof tagFile = DOM.input('file')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`### Speakers\n\nLet's see each speaker and how many times they were tagged`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"{\n const maxCount = d3.max(tagDataBySpeaker, d => d.values.length)\n return html`\n\n \n \n ${tagDataBySpeaker.map(speaker => `\n \n \n \n`)}\n \n

Speaker ID	Tag Count
${speaker.key}	${speaker.values.length}

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`### Timeline\n\nNow let's visualize by day where each speaker shows up.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`The highlighted speaker is ${highlightSpeaker}. Modify by using the dropdown below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"viewof highlightSpeaker = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"md`#### ${highlightSpeaker === \"none\" ? \"All speakers\" : \"Speaker \" + highlightSpeaker} frequency by time of day`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"histogram","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"md`#### All speakers by time of day, split by day vertically\n\nYou can zoom and pan in the whitespace in the main area or by clicking and dragging in the minimap at the top.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"{\n if (!selectedTag) {\n return html`

Select a tag to listen.

`;\n }\n \n const chunk = selectedTag.chunk;\n const speakerId = selectedTag.speaker_id;\n const audioUrl = chunk.audio_url;\n const allHtml = html`\n

Speaker: ${speakerId}
Tag Time: ${formatTime(selectedTag.start_time)} to ${formatTime(selectedTag.end_time)}
Chunk Time: ${chunk.start_time.toString()}
URL: ${audioUrl}

\n\n

`;\n allHtml.querySelector('audio').currentTime = selectedTag.start_time;\n return allHtml;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"md`\n### And that's it!\n\nYou can ignore all the below stuff, it's used to generate the things above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"highlightSpeakerTags = highlightSpeaker === \"none\" ? flatTagData : flatTagData.filter(tag => tag.speaker_id === highlightSpeaker)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"highlightSpeakerTimesWithinDay = highlightSpeakerTags.map(tag => tagTimeWithinDay(tag)[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"histogramHeight = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"import {chart as histogram}\nwith {\n highlightSpeakerTimesWithinDay as data, \n timeOfDayFormat as xTickFormat,\n histogramHeight as height}\nfrom \"@pbeshai/d3-histogram\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"mutable selectedTag = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"fullTimeExtent = {\n const paddingSeconds = 200;\n const allTimes = flatTagData.map(tagTimeWithinDay);\n const min = Math.max(0, Math.floor(d3.min(allTimes, d => d[0]) - paddingSeconds));\n const max = Math.ceil(d3.max(allTimes, d => d[1])) + paddingSeconds;\n return [min, max];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"tagData = Files.text(tagFile)\n .then(text => {\n const data = JSON.parse(text);\n data.forEach(d => {\n d.start_time = moment(d.start_time);\n d.end_time = moment(d.end_time);\n });\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"flatTagData = {\n let flat = [];\n for (const chunk of tagData) {\n const { tags } = chunk;\n flat = flat.concat(tags.map(tag => ({ ...tag, chunk })))\n }\n flat.forEach((tag, i) => { tag.index = i; })\n return flat\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"function getColorForTag(tag) {\n if (tag.speaker_id === highlightSpeaker) {\n return 'tomato';\n }\n const bandScale = d3.scaleBand().domain(speakerIds).range([0.3, 1]);\n return d3.scaleSequential(d3.interpolateGreys)(bandScale(tag.speaker_id))\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"tagDataBySpeaker = d3.nest()\n .key(d => d.speaker_id)\n .entries(flatTagData)\n .sort((a, b) => b.values.length - a.values.length)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"speakerIds = tagDataBySpeaker.map(d => d.key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"dateExtent = d3.extent(tagData, d => d.start_time)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"numDays = dateExtent[1].diff(dateExtent[0], 'days') + 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"function tagDayIndex(tag) {\n return tag.chunk.start_time.diff(dateExtent[0], 'days')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"\n function timeWithinDay(date) {\n return date.hours() * 60 * 60 + date.minutes() * 60 + date.seconds();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"function tagTimeWithinDay(tag) {\n const chunkStartTime = timeWithinDay(tag.chunk.start_time)\n return [chunkStartTime + tag.start_time,\n chunkStartTime + tag.end_time]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"function leftPad(num) {\n if (num < 10) {\n return `0${num}`;\n }\n\n return `${num}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"function timeOfDayFormat(time) {\n time = time % 86400;\n const hours = Math.floor(time / (60 * 60));\n const minutes = Math.floor((time % (60 * 60)) / 60);\n const seconds = Math.floor(time % 60);\n\n const parts = [hours, minutes, seconds];\n\n // don't leftpad biggest number\n return parts.map((d, i) => (i > 0 ? leftPad(d) : d)).join(':');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"function formatTime(time) {\n const hours = Math.floor(time / (60 * 60));\n const minutes = Math.floor((time % (60 * 60)) / 60);\n const seconds = Math.floor(time % 60);\n\n const parts = [minutes, seconds];\n if (hours > 0) {\n parts.unshift(hours);\n }\n\n // don't leftpad biggest number\n return parts.map((d, i) => (i > 0 ? leftPad(d) : d)).join(':');\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"