31:Tc45,viz = { const w = 954; const h = w; const svg = d3.select(DOM.svg(width, width)); const margin = 40; const lastPosition = d3.max(data.map(d => d.locations).flat()); const insetScale = d3.scaleLinear() .domain([0, 360]) .range([w / 2 - margin, 100]); const inset = insetScale(slideToExpand); const position = d3.scaleLinear() .domain([0, lastPosition]) .range([w / 2 - margin, inset]); const radial = d3.scaleLinear() .domain([0, data.length]) .range([0, slideToExpand]); const area = svg.append('g'); const ringGroup = area.append('g') .attr('transform', `translate(${width / 2}, ${h / 2}) rotate(-90)`) const timeline = ringGroup.selectAll('.timeline') .data(data) .join('g') .attr('class', 'timeline') .attr('transform', (d, i) => `rotate(${radial(i)})`); const dotGroup = ringGroup.selectAll('.dot-group') .data(data) .join('g') .attr('class', 'dot-group') .attr('transform', (d, i) => `rotate(${radial(i)})`); const lines = timeline.append('line') .attr('class', 'line-stroke') .attr('x1', d => { const lastUseOfWord = position(d3.max(d.locations)); return lastUseOfWord; }) .attr('y1', 0) .attr('x2', position(0)) .attr('y2', 0) .style('stroke', '#e9e8ea') .style('stroke-width', 0.75) .style('stroke-linecap', 'round'); const dots = dotGroup.selectAll('.dot') .data(d => d.locations) .join('ellipse') .attr('class', 'dot') .attr('cx', d => position(d)) .attr('cy', 0) .attr('rx', 1.6) .attr('ry', 0.75) .style('fill', 'black') .style('fill-opacity', 0.6); const words = timeline.append('text') .attr('class', 'word') .attr('x', 0) .attr('y', 0) .text(d => d.word.toUpperCase()) .style('fill', 'black') .style('font-family', 'monospace') .style('font-size', '4.5px') .style('text-anchor', (d, i) => i <= data.length / 2 ? 'start' : 'end') .style('pointer-events', 'none') .attr('transform', (d, i) => { const halfWay = i <= data.length / 2; const rotation = halfWay ? 0 : 180; const tX = halfWay ? position(0) + 3 : -position(0) - 3; const tY = halfWay ? 1.25 : 1.25; return `rotate(${rotation}) translate(${tX}, ${tY})`; }); const zoom = d3.zoom() .extent([[0, 0], [w, h]]) .scaleExtent([1, 8]) .on("zoom", zoomed); svg.call(zoom); function reset() { svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([w / 2, h / 2]) ); } function clicked(event, [x, y]) { event.stopPropagation(); svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity.translate(w / 2, h / 2).scale(40).translate(-x, -y), d3.mouse(svg.node()) ); } function zoomed({transform}) { area.attr("transform", transform); } return Object.assign(svg.node(), { zoomIn: () => svg.transition().call(zoom.scaleBy, 2), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.75), zoomReset: reset }); }32:[{"id":"9e24b25ac17edf5c9c16eed3da0ae0caeed51d984b2a138f83a47c6326c09100d6b0d4f557f4e80a56280bdca2326cf7cc96c1963883681420161c0e49d9ad1b","href":"https://static.observableusercontent.com/files/9e24b25ac17edf5c9c16eed3da0ae0caeed51d984b2a138f83a47c6326c09100d6b0d4f557f4e80a56280bdca2326cf7cc96c1963883681420161c0e49d9ad1b","name":"clean-list.txt","type":"text/plain","lastModified":1620247499620.562,"size":23911}] 2f:{"title":"Adjectives of The Road","cells":[{"id":0,"value":"md`# Adjectives of _The Road_\nThe adjectives used in Cormac McCarthy's novel *The Road*. Dots on the outer edge of the ring represent adjectives that occur at the beginning of the novel. Dots at the center of the ring represent adjectives that occur toward the end of the novel. Adjectives are arranged alphabetically.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"{\n const form = html``;\n form.in.onclick = () => viz.zoomIn();\n form.out.onclick = () => viz.zoomOut();\n form.reset.onclick = () => viz.zoomReset();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`I originally created this visualization in Processing in 2011 and ported it to Observable and D3.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"// Adjective counts for this visualization are approximations. Precise adjective detection with NLP was not used at the time this data was generated.\ndata = {\n const listString = await FileAttachment(\"clean-list.txt\").text();\n \n const lines = listString.split('\\n').map(row => {\n const parts = row.split(' ');\n\n const locations = parts.slice(1, parts.length).map(str => parseInt(str));\n\n return {\n 'word': parts[0],\n 'locations': locations\n }\n });\n \n lines.sort((a, b) => d3.ascending(a.word, b.word));\n \n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"import {Input, Range} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"viewof slideToExpand = {\n const rangeForm = Range([0, 360], {step: 0.5, label: 'slideToExpand (fun)', value: 360});\n \n rangeForm.style.width = '100%';\n d3.select(rangeForm).select('[type=number]').node().style.width = '7%';\n d3.select(rangeForm).select('[type=range]').node().style.width = '93%';\n \n return rangeForm;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}