Sentiment Analysis : BewareTopic Analysis : BewareSentiment Analysis : CostTopic Segmentation : CostSentiment Analysis : DisappointedTopic Segmentation : DisappointedSentiment Analysis : SupportTopic Segmentation : SupportSentiment Analysis : InteractSentiment Analysis : RestaurantTopic Segmentation : Restaurant
Topic Segmentation : Interact
cellAreaExtent = d3.extent(cells.filter(d => d), d => d3.polygonArea(d))
shape = d3.scaleOrdinal(data.map(d => d.category), d3.symbols.map(s => d3.symbol().type(s)()))
orient = ({
top: text => text.attr("text-anchor", "middle").attr("y", -6),
right: text =>
text
.attr("text-anchor", "start")
.attr("dy", "0.35em")
.attr("x", 6),
bottom: text =>
text
.attr("text-anchor", "middle")
.attr("dy", "0.71em")
.attr("y", 6),
left: text =>
text
.attr("text-anchor", "end")
.attr("dy", "0.35em")
.attr("x", -6)
})
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", width)
.attr("y", margin.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(data.x))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.y))
grid = g => g
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.1)
.call(g => g.append("g")
.selectAll("line")
.data(x.ticks())
.join("line")
.attr("x1", d => 0.5 + x(d))
.attr("x2", d => 0.5 + x(d))
.attr("y1", margin.top)
.attr("y2", height - margin.bottom))
.call(g => g.append("g")
.selectAll("line")
.data(y.ticks())
.join("line")
.attr("y1", d => 0.5 + y(d))
.attr("y2", d => 0.5 + y(d))
.attr("x1", margin.left)
.attr("x2", width - margin.right));
elTooltip = d3
.select("body")
.append("div")
.attr("class", "svg-tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
tooltipValueFormat = d3.format("-.4")
function toggleTooltip(d, bShow) {
if (bShow) {
let tpl = `Sentiment Mean: ${tooltipValueFormat(d.sentiment_mean)}`,
x = d3.event.pageX > width / 2 ? d3.event.pageX - 200 : d3.event.pageX;
elTooltip
.html(`<b>${d.ngrams}</b><br/><small>${tpl}</small>`)
.style("visibility", "visible")
.style("top", d3.event.pageY - 10 + "px")
.style("left", x + 10 + "px");
} else {
elTooltip.style("visibility", "hidden");
}
}
margin = ({top: 25, right: 20, bottom: 35, left: 40})
height = 600
import { select, slider, radio } from "@jashkenas/inputs"
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
