Proportion of tweets that contain unique words on a given topic / sam-hurrell

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

var yPosition =

parseFloat(d3.select(this).attr("y")) +

y.bandwidth() / 2;

var xPosition =

parseFloat(d3.select(this).attr("x")) / 2 + width / 2;

tooltip

.html(

`<div> <strong>Name: </strong>${d.name}</div><div><strong>Proportion:</strong> ${d.name_1}% </div><div><strong>Catgeory:</strong> ${d.name_2}</div>`

)

.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();

}

tooltip = d3

.select('body')

.append('div')

.attr('class', 'tooltip')

.style('position', 'absolute')

.style('z-index', '10')

.style('visibility', 'hidden')

.style('padding', '10px')

.style('background-color', 'white')

.style('border-radius', '4px')

.style('-webkit-border-radius', '10px')

.style('-moz-border-radius', '10px')

.style('-webkit-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('-moz-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('color', "black")

.style('font-family','sans-serif')

.text('a simple tooltip');

filteredData = data.filter(d => d.name_2 == ch)

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:"%"})

options = Array.from(new Set(data.map(d => d.name_2)))

format = x.tickFormat(30, filteredData.format)

x = d3.scaleLinear()

.domain([0, d3.max(filteredData, d => d.value)])

.range([margin.left, width - margin.right])

y = d3.scaleBand()

.domain(d3.range(filteredData.length))

.rangeRound([margin.top, height - margin.bottom])

.padding(0.1)

xAxis = g => g

.attr("transform", `translate(0,${margin.top})`)

.call(d3.axisTop(x).ticks(width / 100, filteredData.format))

.call(g => g.select(".domain").remove())

.attr("font-size", 16)

yAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(y).tickFormat(i => filteredData[i].name).tickSizeOuter(0))

.attr("font-size", 20)

barHeight = 10

height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom

margin = ({top: 30, right: 0, bottom: 10, left: 120})

d3 = require("d3@5")

import {radio} from "@jashkenas/inputs"

Purpose-built for displays of data