Skip to content

Commit

Permalink
a few color and text-size changes to the javascript
Browse files Browse the repository at this point in the history
  • Loading branch information
kshirley committed Oct 20, 2014
1 parent e75fbbe commit 44acb20
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 13 deletions.
1 change: 1 addition & 0 deletions NAMESPACE
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
export(check.inputs)
export(createJSON)
export(distance)
export(newJSON)
export(runShiny)
export(runVis)
export(serVis)
64 changes: 52 additions & 12 deletions inst/htmljs/ldaviz-lambdatransition.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,17 @@ barwidth = 530,
barheight = 530,
termwidth = 90; // width to add between two panels to display terms


// opacity of topic circles:
var base_opacity = 0.2,
highlight_opacity = 0.6;

// the proportion of the left panel area to cover with the circles under default topic circles
var circle_prop = 0.25;

// the proportion of the left panel area to cover with circles when a word is highlighted
var word_prop = 0.25;

function show_state()
{
console.log(current_clicked, current_hover, current_topic);
Expand Down Expand Up @@ -119,7 +130,6 @@ function change_lambda(event) {
function decrement_lambda(event) {
// read in the new value of lambda from the html button:
var new_lambda = Math.max(0, Math.min(100, Math.floor((current_lambda - 0.1) * 100)))/100;
//var new_lambda = current_lambda - 0.1;
old_lambda = current_lambda;
current_lambda = new_lambda;
document.getElementById("lambda").value = current_lambda;
Expand All @@ -131,7 +141,6 @@ function decrement_lambda(event) {
function increment_lambda(event) {
// read in the new value of lambda from the html button:
var new_lambda = Math.max(0, Math.min(100, Math.floor((current_lambda + 0.1) * 100)))/100;
//var new_lambda = current_lambda + 0.1;
old_lambda = current_lambda;
current_lambda = new_lambda;
document.getElementById("lambda").value = current_lambda;
Expand Down Expand Up @@ -400,7 +409,8 @@ function fancysort(key_name, decreasing) {
function topic_on(d) {

var circle = d3.select(this);
circle.style("opacity", 0.8);
circle.style("opacity", highlight_opacity)
.style("fill", "#FFA500" );

var Freq = Math.round(d.Freq*10)/10, topics = d.topics, cluster = d.cluster;
current_topic = +topics;
Expand Down Expand Up @@ -496,7 +506,13 @@ function topic_on(d) {

function topic_off() {
var circle = d3.select(this);
circle.style("opacity", 0.4); // go back to original opacity
circle.style("opacity", base_opacity) // go back to original opacity
.style("fill", "#1F77B4" );

// change the topic label to bold:
var z = d3.selectAll(".txt")
.style("font-weight", "normal")
.style("font-size", 11);

// remove the tool-tip
d3.selectAll(".bubble-tool").text("Most Salient Terms");
Expand All @@ -518,7 +534,6 @@ function topic_off() {
// Change Total Frequency bars
d3.selectAll(".bar-totals")
.data(dat2)
//.transition()
.attr("x", 0)
.attr("y", function(d) { return y(d.Term); })
.attr("height", y.rangeBand())
Expand All @@ -529,7 +544,6 @@ function topic_off() {
//Change word labels
d3.selectAll(".terms")
.data(dat2)
//.transition()
.attr("x", -5)
.attr("y", function(d) { return y(d.Term) + 12; })
.attr("text-anchor", "end") // right align text - use 'middle' for center alignment
Expand Down Expand Up @@ -565,11 +579,29 @@ function text_on(d) {
radius[dat2[i].Topic - 1] = dat2[i].Freq;
}

var size = [];
for (var i = 0; i < K; ++i) {
size[i] = 0;
}
for (i = 0; i < k; i++) {
size[dat2[i].Topic - 1] = 11;
}

// Change size of bubbles according to the word's distribution over topics
d3.selectAll(".dot")
.data(radius)
.transition()
.attr("r", function(d) { return Math.sqrt(d*280900*0.25/Math.PI); });
.attr("r", function(d) {
return Math.sqrt(d*mdswidth*mdsheight*word_prop/Math.PI);
});

// Change sizes of topic numbers:
d3.selectAll(".txt")
.data(size)
.transition()
.style("font-size", function(d) {
return +d;
});
}


Expand All @@ -580,15 +612,22 @@ function text_off() {
d3.selectAll(".dot")
.data(mdsData)
.transition()
.attr("r", function(d) { return Math.sqrt((d.Freq/100)*280900*0.25/Math.PI); });
.attr("r", function(d) { return Math.sqrt((d.Freq/100)*mdswidth*mdsheight*circle_prop/Math.PI); });

// Change sizes of topic numbers:
d3.selectAll(".txt")
.transition()
.style("font-size", 11);
}


// The actual read-in of the data and main code:
d3.json("lda.json", function(error, data) {

// set the number of topics to global variable k:
// set the number of topics to global variable K:
K = data['mdsDat'].x.length;

// R is the number of top relevant (or salient) words whose bars we display
R = data['R'];

// a (K x 5) matrix with columns x, y, topics, Freq, cluster (where x and y are locations for left panel)
Expand Down Expand Up @@ -686,12 +725,13 @@ d3.json("lda.json", function(error, data) {
// draw circles
points.append("circle")
.attr("class", "dot")
.style("opacity", 0.3)
.style("opacity", 0.2)
.style("fill", function(d) { return color(d.cluster); })
//.attr("r", function(d) { return (400/K)*Math.sqrt(d.Freq) ; }) // circle sizes should get smaller as the # of topics increases
.attr("r", function(d) { return Math.sqrt((d.Freq/100)*280900*0.25/Math.PI) ; }) // circle sizes should get smaller as the # of topics increases
// circle sizes should get smaller as the # of topics increases:
.attr("r", function(d) { return Math.sqrt((d.Freq/100)*mdswidth*mdsheight*circle_prop/Math.PI) ; })
.attr("cx", function(d) { return (xScale(+d.x)); })
.attr("cy", function(d) { return (yScale(+d.y)); })
.attr("stroke", "black")
.attr("id", function(d) { return ('topic' + d.topics) })
.on("mouseover", function(d) {
current_hover.element = this;
Expand Down
2 changes: 1 addition & 1 deletion man/createJSON.Rd
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ the interactive visualization
\description{
This function creates the JSON object that feeds the
javascript visualization that is currently stored in
'path-to-LDAvis/LDAvis/inst/html/'
'path-to-LDAvis/LDAvis/inst/htmljs/'
}
\examples{
# This example uses Newsgroup documents from
Expand Down
92 changes: 92 additions & 0 deletions man/newJSON.Rd
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
% Generated by roxygen2 (4.0.1): do not edit by hand
\name{newJSON}
\alias{newJSON}
\title{Create the JSON object to read into the javascript visualization}
\usage{
newJSON(phi = matrix(), theta = matrix(), alpha = numeric(),
beta = numeric(), doc.length = integer(), vocab = character(),
term.frequency = integer(), R = 30, print.progress = FALSE)
}
\arguments{
\item{phi}{matrix, with each row containing the
distribution over terms for a topic, with as many rows as
there are topics in the model, and as many columns as
there are terms in the vocabulary.}

\item{theta}{matrix, with each row containing the
probability distribution over topics for a document, with
as many rows as there are documents in the corpus, and as
many columns as there are topics in the model.}

\item{alpha}{numeric vector with as many elements as
there are topics in the model, containing the parameters
of the Dirichlet prior distribution over topics for each
document.}

\item{beta}{numeric vector with as many elements as there
are terms in the vocabulary, containing the parameters of
the Dirichlet prior distribution over terms for each
topic.}

\item{doc.length}{integer vector containing the number of
tokens in each document in the corpus.}

\item{vocab}{character vector of the terms in the
vocabulary (in the same order as the columns of
\code{phi} and the elements of \code{beta})}

\item{term.frequency}{integer vector containing the
frequency of each term in the vocabulary}

\item{R}{integer, the number of terms to display in the
barcharts of the interactive viz. Default is 30.
Recommended to be roughly between 10 and 50.}

\item{print.progress}{logical; should the function print
progress to the screen during computation?}
}
\value{
a JSON object in R that can be written to a file to feed
the interactive visualization
}
\description{
This function creates the JSON object that feeds the
javascript visualization that is currently stored in
'path-to-LDAvis/LDAvis/inst/htmljs/'
}
\details{
The function first computes the topic frequencies (across
the whole corpus), and then it reorders the topics in
decreasing order of frequency. The main computation is to
loop through the topics and through 101 values of lambda
(0, 0.01, 0.02, .., 1) to compute the R most relevant terms
for each topic and value of lambda. If \code{print.progress
= TRUE} progress in this loop (which can take a minute or
two) will print to the screen. For more details, see
Sievert and Shirley, 2014, ACL Workshop.
}
\examples{
# This example uses Newsgroup documents from
# http://qwone.com/~jason/20Newsgroups/

#data("Newsgroupdata", package = "LDAvis")

# K = 50 topics
# W = 22524 terms in the vocabulary

#json <- newJSON(...)

# Open vis in a browser!
#serVis(json)

# By default serVis uses a temporary directory
# Instead, we could write files to current working directory
#serVis(json, out.dir = '.', open.browser = FALSE)

# If you have a GitHub account and want to quickly share with others!
serVis(json, as.gist = TRUE)
}
\seealso{
\link{serVis}
}

0 comments on commit 44acb20

Please sign in to comment.