2c:null 2d:["$","title",null,{"children":"Proportion of tweets that contain unique words on a given topic | sam-hurrell | Observable"}] 32:Ta7d,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width + 200, height + 50]); svg.append("g") .attr("fill", "orange") .selectAll("rect") .data(filteredData) .join("rect") .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "black") .attr("text-anchor", "start") .attr("dx", +15) .attr("font-family", "sans-serif") .attr("font-size", 18) .selectAll("text") .data(filteredData) .join("text") .attr("x", d => x(d.value)) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", +5) .text(d => format(d.value)) .attr("font-size", 18) .call(text => text.filter(d => x(d.value) - x(0) < 20) // short bars .attr("font-size", 18) .attr("dx", +5) .attr("fill", "black") .attr("text-anchor", "start")) .on("mouseover", function(d) { d3.select(this).attr("fill", "magenta"); //Get this bar's x/y values, then augment for the tooltip //Get this bar's x/y values, then augment for the tooltip var yPosition = parseFloat(d3.select(this).attr("y")) + y.bandwidth() / 2; var xPosition = parseFloat(d3.select(this).attr("x")) / 2 + width / 2; tooltip .html( `

Name: ${d.name}

Proportion: ${d.name_1}%

Catgeory: ${d.name_2}

` ) .style('visibility', 'visible'); //Update the tooltip position and value //d3.select("#tooltip") // .style("left", xPosition + "px") // .style("top", yPosition + "px") // .select("#value") // .text(d.violation); //Show the tooltip //d3.select("#tooltip").classed("hidden", false); }) .on('mousemove', function () { tooltip .style('top', d3.event.pageY - 10 + 'px') .style('left', d3.event.pageX + 10 + 'px'); }) .on('mouseout', function () { tooltip.html(``).style('visibility', 'hidden'); d3.select(this).transition().attr('fill', "black"); }); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }33:[{"id":"d53cb84662e4457db125d843394b8c098b7ea2dba87393322efa3ac37fadd800dfa53948d8d65bcd05cd662f171b31fdeaa519141c372b9663bd0fe3a6665135","href":"https://static.observableusercontent.com/files/d53cb84662e4457db125d843394b8c098b7ea2dba87393322efa3ac37fadd800dfa53948d8d65bcd05cd662f171b31fdeaa519141c372b9663bd0fe3a6665135","name":"tweet_frequency@4.csv","type":"text/csv","lastModified":1596613085852.392,"size":312},{"id":"31ebabf3df16cfabe78d23a837cc20f7d1fbee36d9baad10bef85f9b1eff3af7a5ef666eacc7fd1199092438b887983f326f32e590ce29021fe2bc4f8e779767","href":"https://static.observableusercontent.com/files/31ebabf3df16cfabe78d23a837cc20f7d1fbee36d9baad10bef85f9b1eff3af7a5ef666eacc7fd1199092438b887983f326f32e590ce29021fe2bc4f8e779767","name":"all unique tweets text 1.csv","type":"text/csv","lastModified":1596707503607.572,"size":5097}] 30:{"id":"b3875d1b55134d83","slug":"untitled","title":"Proportion of tweets that contain unique words on a given topic","thumbnail":"107027ef99d9ddb23d997fa499cb06f397e3fa3afb841ec61f787eb7bcdeaa76","access_level":"public","create_time":"$D2020-08-05T07:38:05.852Z","update_time":"$D2020-08-06T12:58:37.333Z","view_time":null,"first_public_time":"$D2020-08-05T08:07:12.071Z","has_unpublished_edits":null,"fork":{"id":"017fdad65b87874a","slug":"thanks-to-video-games","title":"Horizontal Bar Chart","owner":{"id":"e1857478dfb8f13a","login":"sam-hurrell","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"e1857478dfb8f13a","login":"sam-hurrell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c042dc169d2e37cdaafd306242e1ed6c33d9be59a49a58f2641b557c719e0588","tier":"starter_2024","bio":""},"version":533,"publish_version":533,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec229c186e95ffda","login":"sam-hurrell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c042dc169d2e37cdaafd306242e1ed6c33d9be59a49a58f2641b557c719e0588","tier":null,"bio":""}],"members":[{"type":"individual","id":"ec229c186e95ffda","login":"sam-hurrell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c042dc169d2e37cdaafd306242e1ed6c33d9be59a49a58f2641b557c719e0588","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Proportion of tweets that contain unique words on a given topic","cells":[{"id":1,"value":"md`# Proportion of tweets that contain unique words on a given topic`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"viewof ch = radio({\n title: 'Select a topic',\n options: options,\n value: \"Connecting with others\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background-color', 'white')\n .style('border-radius', '4px')\n .style('-webkit-border-radius', '10px')\n .style('-moz-border-radius', '10px')\n .style('-webkit-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')\n .style('-moz-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')\n .style('box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')\n .style('color', \"black\")\n .style('font-family','sans-serif')\n .text('a simple tooltip');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"filteredData = data.filter(d => d.name_2 == ch)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"all unique tweets text 1.csv\").text(), ({word,frequency,percentage,category}) => ({name: word, value: +percentage, name_1: +percentage, name_2: category})).sort((a, b) => d3.descending(a.value, b.value)), {format:\"%\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"options = Array.from(new Set(data.map(d => d.name_2)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"format = x.tickFormat(30, filteredData.format)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(filteredData, d => d.value)])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"y = d3.scaleBand()\n .domain(d3.range(filteredData.length))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 100, filteredData.format))\n .call(g => g.select(\".domain\").remove())\n .attr(\"font-size\", 16)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickFormat(i => filteredData[i].name).tickSizeOuter(0))\n .attr(\"font-size\", 20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"barHeight = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"margin = ({top: 30, right: 0, bottom: 10, left: 120})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"