Skip to content

Instantly share code, notes, and snippets.

@wwymak
Created July 17, 2016 20:04
Show Gist options
  • Save wwymak/d3caf57910572ba5dc6daead16f3990b to your computer and use it in GitHub Desktop.
Save wwymak/d3caf57910572ba5dc6daead16f3990b to your computer and use it in GitHub Desktop.
sentimentVis with transcript from datastories attempt1
license: gpl-3.0

Basically I am trying to visualise what is going on in a Datastories podcast (transcript from http://datastori.es/transcripts/) I parsed the text with Python using Textblob for sentiment analysis and sentence identification

This is attempt number one-- in part to learn d3v4 as well. At the moment, I am only visualising the speech of one person (enrico)

Plan is to be able to toggle between different speakers and show all the show together.

"[[{\"text\": \"Enrico Bertini: Hey, everyone.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"Welcome to a new episodes of Data Stories.\", \"polarity\": 0.4681818181818182, \"subjectivity\": 0.6772727272727272}, {\"text\": \"Hey, Moritz.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"What's up?\", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: You are touring. \", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: Yep. \", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: Oh, I loved that.\", \"polarity\": 0.7, \"subjectivity\": 0.8}, {\"text\": \"I loved that one. \", \"polarity\": 0.7, \"subjectivity\": 0.8}], [{\"text\": \"EB: Oh, yeah.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"Yeah, yeah, yeah.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"So, when are you going?\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"You're going to IO? \", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: Minneapolis, yeah.\", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: Nice, nice. \", \"polarity\": 0.6, \"subjectivity\": 1.0}], [{\"text\": \"EB: Um, good.\", \"polarity\": 0.7, \"subjectivity\": 0.6000000000000001}, {\"text\": \"Enjoying summer a little bit.\", \"polarity\": 0.15625, \"subjectivity\": 0.55}, {\"text\": \"Still a lot of work to do, but it's fine.\", \"polarity\": 0.4166666666666667, \"subjectivity\": 0.5}, {\"text\": \"I'm done with teaching, which is good.\", \"polarity\": 0.7, \"subjectivity\": 0.6000000000000001}, {\"text\": \"Um, I just have a brief update.\", \"polarity\": 0.0, \"subjectivity\": 0.3333333333333333}, {\"text\": \"I'm really happy about a recent, uh, project.\", \"polarity\": 0.4, \"subjectivity\": 0.625}, {\"text\": \"Um, I don't know if I've ever mentioned that on the podcast, but we are working with ProPublica and developing some software to help them look into millions of reviews from, from Yelp.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"They just published their second article based on the analysis that they conducted with this tool, and I'm really excited.\", \"polarity\": 0.1875, \"subjectivity\": 0.375}, {\"text\": \"Some of the stuff that we do is actually useful, at least to some people within ProPublica.\", \"polarity\": 0.0, \"subjectivity\": 0.2}, {\"text\": \"So they've been analyzing Yelp reviews to actually look into privacy issues, and the fact that doctors sometime reply to reviews, customer reviews, and disclose information that they are not allowed to, to disclose.\", \"polarity\": 0.0, \"subjectivity\": 0.1}, {\"text\": \"So, it's new stuff.\", \"polarity\": 0.13636363636363635, \"subjectivity\": 0.45454545454545453}, {\"text\": \"It's fun, yeah, it's fun. \", \"polarity\": 0.3, \"subjectivity\": 0.2}], [{\"text\": \"EB: I will, of course. \", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: So, let's start with our new guest today.\", \"polarity\": 0.13636363636363635, \"subjectivity\": 0.45454545454545453}, {\"text\": \"I'm really excited to have Matt Daniels on the show, from Polygraph.\", \"polarity\": 0.375, \"subjectivity\": 0.75}, {\"text\": \"Hey, Matt.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"How are you?\", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: I'm good, I'm good.\", \"polarity\": 0.7, \"subjectivity\": 0.6000000000000001}, {\"text\": \"So, uh, Matt is the, is the main person behind Polygraph, and, um, he publishes amazing, um, how do you call that?\", \"polarity\": 0.12222222222222223, \"subjectivity\": 0.6444444444444444}, {\"text\": \"I mean, interactive articles with visualizations and data analysis.\", \"polarity\": -0.3125, \"subjectivity\": 0.6875}, {\"text\": \"Mostly a lot of them on music, and that's one of the reason why I'm so excited, but also many other topics, including, I don't know, gender biases, and stuff like that.\", \"polarity\": 0.3125, \"subjectivity\": 0.53125}, {\"text\": \"So, Matt, can you give us a little bit of an introduction about who you are, what you do, um, maybe even why you do it?\", \"polarity\": -0.1875, \"subjectivity\": 0.5}, {\"text\": \"And then we can move onto a couple of projects we want to talk about. \", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: Wow.\", \"polarity\": 0.1, \"subjectivity\": 1.0}, {\"text\": \"I mean, when I look at what you do on the web, it's amazing.\", \"polarity\": 0.14375000000000004, \"subjectivity\": 0.79375}, {\"text\": \"Congratulations. \", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: Doesn't take long to learn coding. \", \"polarity\": -0.05, \"subjectivity\": 0.4}], [{\"text\": \"EB: No, because, you know, I mean, I'm saying that because you have those people who are, like, do I need to learn coding in order to do visualization?\", \"polarity\": -0.3125, \"subjectivity\": 0.6875}, {\"text\": \"Well, not necessarily, but if you do, I mean, you have so many more options, so.\", \"polarity\": 0.171875, \"subjectivity\": 0.671875}, {\"text\": \"I think it's, you are a good story to tell.\", \"polarity\": 0.7, \"subjectivity\": 0.6000000000000001}, {\"text\": \"So, Matt, I would like to dive into, um, a couple of projects we selected, um, directly.\", \"polarity\": 0.1, \"subjectivity\": 0.4}, {\"text\": \"Uh, you have many, many more, and I really encourage our listeners to just go to your website, which is poly-graph.co and see all the amazing projects you publish there.\", \"polarity\": 0.45999999999999996, \"subjectivity\": 0.52}, {\"text\": \"So, we will be focusing on a couple of them. \", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: And, uh, I would like to start with one about music, and it's called The Most Timeless Songs of All Time.\", \"polarity\": 0.5, \"subjectivity\": 0.5}, {\"text\": \"So, can you briefly introduce this project and tell us how you, you, you got started there?\", \"polarity\": 0.0, \"subjectivity\": 0.3333333333333333}, {\"text\": \"Uh, how you generated the idea, and then how you realized the project? \", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: So, I'm wondering if we can try to describe a little bit how this little page looks like.\", \"polarity\": -0.1875, \"subjectivity\": 0.5}, {\"text\": \"Um, I'll try myself to say something about it.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"So, I think, and please correct me if I'm wrong, most of your projects have a similar style.\", \"polarity\": 0.0, \"subjectivity\": 0.6}, {\"text\": \"You start with a big title, some text, then you have some interactive charts, then more text, then more interactive charts.\", \"polarity\": 0.3333333333333333, \"subjectivity\": 0.3666666666666667}, {\"text\": \"Something I really, really like.\", \"polarity\": 0.2, \"subjectivity\": 0.2}, {\"text\": \"And, um, and you talk about the data analysis behind it, how you collected the data, and provide quite a few details.\", \"polarity\": -0.30000000000000004, \"subjectivity\": 0.39999999999999997}, {\"text\": \"And then you do the analysis itself, and describe what this means.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"So, in this case, you have one chart, where there are, like, um, songs, um, placed in a graph, and you can see how many songs from the '90s, right?\", \"polarity\": 0.39285714285714285, \"subjectivity\": 0.5178571428571428}, {\"text\": \"It's called \\\"What's Remembered from the 90s,\\\" and you have each song represented by one, one dot, with the face of the singer, main singer, behind it.\", \"polarity\": -0.11666666666666668, \"subjectivity\": 0.5166666666666666}, {\"text\": \"And you can see on the far right, there is Kurt Cobain with the most popular song ever, with, what?\", \"polarity\": 0.37142857142857144, \"subjectivity\": 0.7339285714285714}, {\"text\": \"Fifty million, more than 50 millions plays.\", \"polarity\": 0.5, \"subjectivity\": 0.5}, {\"text\": \"And, um, yeah, and you have many others on the left.\", \"polarity\": 0.25, \"subjectivity\": 0.25}, {\"text\": \"Um, yeah, it's, it's very interesting, and I think what I really like of the analysis that you made, and the, and how you comment on this, is that you, you, especially on this specific piece, you've been commenting on the idea that some, there is a difference between, um, songs that are still popular today after many years, and how they scored back then in, uh, in Billboard and similar charts, right?\", \"polarity\": 0.24841269841269842, \"subjectivity\": 0.478968253968254}, {\"text\": \"And not necessarily the most popular song back then are those that, um, are still popular today. \", \"polarity\": 0.34, \"subjectivity\": 0.6599999999999999}], [{\"text\": \"EB: Yeah, so, can you, can you briefly describe how the process works, for instance, for this project, right?\", \"polarity\": 0.14285714285714285, \"subjectivity\": 0.43452380952380953}, {\"text\": \"So, I guess, you start from, from a question, and, uh, then you go about trying to see if you have data to answer this question.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"And, um, and how do you decide on, uh, um, what visualizations to use, how to design the page itself, what is the narrative structure?\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"I mean, it looks to me that you are, uh, playing a lot with different ways of, um, giving a structure to your story.\", \"polarity\": -0.15625, \"subjectivity\": 0.64375}, {\"text\": \"Um, so how do you do that? \", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: But I have to say, Matt, my personal experience reading, using your projects is that I really like the text part that you produce.\", \"polarity\": 0.1, \"subjectivity\": 0.25}, {\"text\": \"And especially the sequence, right?\", \"polarity\": 0.14285714285714285, \"subjectivity\": 0.7678571428571428}, {\"text\": \"So, I, I, for instance, like the fact that you start from a clear question, and it's an interesting question, then you go about trying to answer that specific one, and then you make it broader, right?\", \"polarity\": 0.22142857142857142, \"subjectivity\": 0.3860119047619047}, {\"text\": \"And, um, and another thing I like is that you first try to list the facts, what you can read out of the chart, but towards the end of your article, you kind of try to see, to generate hypotheses about, um, what phenomenon is behind, or what causality exists behind the, the facts that you extracted out of data.\", \"polarity\": 0.012499999999999983, \"subjectivity\": 0.6583333333333333}, {\"text\": \"Um, I don't know if you do this on purpose or just you happen to do it this way, but I find it really, really interesting.\", \"polarity\": 0.5, \"subjectivity\": 0.5}, {\"text\": \"So, for instance, just to give you an example, in the same piece we are talking about, \\\"Timeless Songs,\\\" I think towards the end of your article you talk about, um, why does this happen, right?\", \"polarity\": 0.14285714285714285, \"subjectivity\": 0.33035714285714285}, {\"text\": \"And you come up with hypotheses about why does this happen, that some songs are popular when they are published and but still they don't, um, they are no longer popular after 10 or 20 years.\", \"polarity\": 0.6, \"subjectivity\": 0.9}, {\"text\": \"And, yeah, I found this really interesting. \", \"polarity\": 0.5, \"subjectivity\": 0.5}], [{\"text\": \"EB: Yeah, yeah, and another aspect, I just want to briefly mention that too, you seem to make the charts sometimes so the first chart typically is the one that tries to answer the narrow question that you started with, but then as you progress, you give more freedom to the reader to explore some aspects on his own, right?\", \"polarity\": 0.14613095238095236, \"subjectivity\": 0.500297619047619}, {\"text\": \"Which is also interesting.\", \"polarity\": 0.5, \"subjectivity\": 0.5}, {\"text\": \"I think this is, this has been called in the past something like the martini glass structure, so I guide you through some, some data facts, and as soon as you know enough about it, then you are ready to kind of like explore it on your own a little bit.\", \"polarity\": 0.16041666666666665, \"subjectivity\": 0.6083333333333333}], [{\"text\": \"EB: Yeah, like this time I'm gonna do it right.\", \"polarity\": 0.2857142857142857, \"subjectivity\": 0.5357142857142857}], [{\"text\": \"EB: Yeah, I think that's an aspect that I really like.\", \"polarity\": 0.2, \"subjectivity\": 0.2}, {\"text\": \"I think here you found very nice balance between making the data accessible, right?\", \"polarity\": 0.4802380952380953, \"subjectivity\": 0.6369047619047619}, {\"text\": \"But at the same time not trying to impose any specific, um, outcome, or even a hypothesis, right?\", \"polarity\": 0.09523809523809523, \"subjectivity\": 0.2619047619047619}, {\"text\": \"I really like, I cut this sentence from, from your text.\", \"polarity\": 0.2, \"subjectivity\": 0.2}, {\"text\": \"You write, \\\"We didn't set out trying to prove anything, but rather compile real data.\", \"polarity\": 0.2, \"subjectivity\": 0.30000000000000004}, {\"text\": \"We framed it as a census, rather than a study.\\\"\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"And I really like, I really, really like that.\", \"polarity\": 0.2, \"subjectivity\": 0.2}, {\"text\": \"Um, yeah, maybe you can comment a little bit more on this kind of mindset? \", \"polarity\": 0.30416666666666664, \"subjectivity\": 0.6333333333333333}], [{\"text\": \"EB: It's, it's a fine line, right?\", \"polarity\": 0.35119047619047616, \"subjectivity\": 0.5178571428571428}, {\"text\": \"Because, yeah, I don't know.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"I find that this is a little, a big struggle for people like you, spend a lot of time trying to analyze data and make the result of this analysis, um, digestible by people, right?\", \"polarity\": 0.03273809523809523, \"subjectivity\": 0.37857142857142856}, {\"text\": \"And at the same time, trying to find the right balance between not imposing your own view, but not making the whole thing too hard to understand it.\", \"polarity\": 0.1588095238095238, \"subjectivity\": 0.5204761904761904}, {\"text\": \"You have to start from scratch, right?\", \"polarity\": 0.2857142857142857, \"subjectivity\": 0.5357142857142857}], [{\"text\": \"EB: Yeah.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"Yeah, yeah.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"But I have to say, I think here you are doing something really important, because, I mean, when you think about what kind of, who are the figures out there who are proposing ideas based on data, traditionally, right?\", \"polarity\": 0.24330357142857142, \"subjectivity\": 0.7808035714285714}, {\"text\": \"On the one hand, you have scientists, on the other hand, you have people like journalists, and politicians.\", \"polarity\": -0.125, \"subjectivity\": 0.375}, {\"text\": \"And all of them, one way or another, have some kind of agenda, or at least an hypothesis to, to, to prove, right?\", \"polarity\": 0.1952380952380952, \"subjectivity\": 0.611904761904762}, {\"text\": \"Or an intent to persuade you about something.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"And, and, you're kind of, like, moving away from that here, and still make the data and the ideas behind this data accessible.\", \"polarity\": 0.19166666666666665, \"subjectivity\": 0.6583333333333333}, {\"text\": \"And I find this, this format really, really interesting.\", \"polarity\": 0.5, \"subjectivity\": 0.5}], [{\"text\": \"EB: You have no agenda, I guess, right? \", \"polarity\": 0.2857142857142857, \"subjectivity\": 0.5357142857142857}], [{\"text\": \"EB: Yeah, yeah.\", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: Maybe you can briefly explain how you did, because the data collection and analysis here looks like a daunting task.\", \"polarity\": 0.0, \"subjectivity\": 0.3333333333333333}, {\"text\": \"Like, how did you, how did you collect this data and make sure that it had some, some okay quality at least?\", \"polarity\": 0.2333333333333333, \"subjectivity\": 0.5962962962962962}], [{\"text\": \"EB: Oh, yeah.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"I mean, Matt, I wish you all the best, because the work you are doing is, is honestly amazing, and, uh, it really shows it's clearly a labor of love.\", \"polarity\": 0.3479166666666667, \"subjectivity\": 0.5118055555555556}, {\"text\": \"Every single detail in your work is just shows how much effort there is behind that, and, uh, how much care.\", \"polarity\": -0.017857142857142863, \"subjectivity\": 0.32857142857142857}, {\"text\": \"You can see how deeply you care about everything.\", \"polarity\": 0.0, \"subjectivity\": 0.4}, {\"text\": \"It goes from the data analysis, data collection, the visuals, the narrative, everything is fantastic.\", \"polarity\": 0.4, \"subjectivity\": 0.9}, {\"text\": \"Congratulations. \", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: Seriously, I mean, I even say that lightly.\", \"polarity\": 0.04375000000000001, \"subjectivity\": 0.69375}, {\"text\": \"I'm really impressed by your work.\", \"polarity\": 1.0, \"subjectivity\": 1.0}, {\"text\": \"It's fun and it's inspiring at the same time. \", \"polarity\": 0.26666666666666666, \"subjectivity\": 0.44166666666666665}], [{\"text\": \"EB: Yeah, absolutely.\", \"polarity\": 0.2, \"subjectivity\": 0.9}, {\"text\": \"Absolutely. \", \"polarity\": 0.2, \"subjectivity\": 0.9}], [{\"text\": \"EB: Yeah, I think yesterday, sifting through your website, I found (inaudible) somewhere, where you are imitating keeping track of ideas, and it was like, oh yes, do this, this, this as well.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"Please, do it. \", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: So, if there is anyone who aspires to work with you, what should this person do?\", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: Great.\", \"polarity\": 0.8, \"subjectivity\": 0.75}, {\"text\": \"Uh, well, okay, thanks, thanks a lot for coming on the show.\", \"polarity\": 0.3, \"subjectivity\": 0.3}, {\"text\": \"I mean, we could go on forever.\", \"polarity\": -0.3125, \"subjectivity\": 0.6875}, {\"text\": \"And, um, we are really looking forward to seeing what you are, what you publish next.\", \"polarity\": 0.1, \"subjectivity\": 0.1}, {\"text\": \"And, uh, I wish you the best of luck.\", \"polarity\": 1.0, \"subjectivity\": 0.3}, {\"text\": \"Thanks for coming on the show.\", \"polarity\": 0.2, \"subjectivity\": 0.2}], [{\"text\": \"EB: Bye.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"Bye-bye.\", \"polarity\": 0.0, \"subjectivity\": 0.0}], [{\"text\": \"EB: Hey, guys.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"Thanks for listening to Data Stories again.\", \"polarity\": 0.2, \"subjectivity\": 0.2}, {\"text\": \"Before you leave, we have a request.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"If you can spend a couple of minutes rating us on iTunes, that would be extremely helpful for the show.\", \"polarity\": -0.125, \"subjectivity\": 1.0}], [{\"text\": \"EB: So, one last thing that we want to tell you is that we love to get in touch with our listeners, especially if you want to suggest a way to improve the show or amazing people you want us to invite, or even projects you want to ask to talk about.\", \"polarity\": 0.275, \"subjectivity\": 0.6416666666666666}], [{\"text\": \"EB: This episode is sponsored by CartoDB.\", \"polarity\": 0.0, \"subjectivity\": 0.0}, {\"text\": \"CartoDB is an open, powerful, and intuitive platform for discovering and predicting the key facts underlying the massive location data in our world.\", \"polarity\": 0.075, \"subjectivity\": 0.875}, {\"text\": \"With CartoDB, analyzing and designing beautifully insightful maps has never been easier.\", \"polarity\": 0.85, \"subjectivity\": 1.0}, {\"text\": \"Check out incredible location intelligence projects and get started for free at cartodb.com/gallery.\", \"polarity\": 0.65, \"subjectivity\": 0.8500000000000001}, {\"text\": \"That's c-a-r-t-o-d-b dot com, slash gallery.\", \"polarity\": 0.0, \"subjectivity\": 0.0}]]"
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<link rel="stylesheet" href="simplegrid.css" type="text/css">
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.speech {
font-size: 6px;
}
#textContainer {
overflow: scroll;
height: 100vh;
}
.display-text {
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="grid">
<div class="col-1-1"><h2>Experiment in visualising the sentiment of a transcript from datastories podcast (#77)</h2></div>
<div class="col-2-3">
<div id="vis" class="col-1-1"></div>
<div id="legendTitle" class="col-1-1">Subjectivity</div>
<div id="legend" class="col-1-1"></div>
<div id="mouseover-text" class="col-1-1"></div>
</div>
<div class="col-1-3" id="textContainer"></div>
</div>
<script src="sentiment.js"></script>
</body>
/**
* experimental bar/bubble plot for visualising a transciprt
*/
const q = d3.queue();
const width = 500;
const height = 500;
const xScale = d3.scaleOrdinal();
const yScale = d3.scaleOrdinal([height, 0]);
const margins = {top: 10, bottom: 30, left: 30, right: 30};
const colorScale = d3.scaleSequential( d3.interpolatePlasma).domain([1, -1]); //for sentiment / polarity
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisRight(yScale);
const dispatch = d3.dispatch("textSelect", "textDeselect");
const circleRadius = 8;
q.defer(d3.json, 'eb.json');
q.await((err, eb) => {
const ebSentiment = JSON.parse(eb);
const minSubjectivity = d3.min(ebSentiment.map(d => d3.min(d, f => f.subjectivity)));
console.log(ebSentiment, d3.min(ebSentiment.map(d => d3.min(d, f => f.subjectivity))));
let svg = d3.select("#vis").append('svg').attr('width', (ebSentiment.length * 2 * circleRadius + 100)).attr('height', height)
.append('g').attr('class', 'chart-area');
// let xAxisG = svg.append('g').attr('class', 'x axis')
// .attr('transform', `translate(${margins.left}, ${height- margins.bottom})`)
// .call(xAxis);
// let yAxisG = svg.append('g').attr('class', 'y axis')
// .attr('transform', `translate(${margins.left}, ${margins.top})`)
// .call(yAxis);
let transition = d3.transition().duration(2750);
let dialogueG = svg.selectAll('g.dialogue').data(ebSentiment)
// .attr('transform', (d, i) => `translate(${circleRadius * 2 * i}, ${height - margins.bottom})`)
// .attr('class', 'dialogue');
dialogueG.exit().remove();
dialogueG.enter().append('g')
.attr('transform', (d, i) => `translate(${(circleRadius + 1) * 2 * i }, ${height - margins.bottom})`)
.attr('class', 'dialogue')
.each(function (g, j) {
let svg = d3.select(this);
let circle = svg.selectAll('circle').data(d => d);
circle.exit()
.transition(transition)
.attr("cy", 0)
.style("fill-opacity", 1e-6)
.remove();
circle.style('stroke', d => colorScale(d.subjectivity))
.transition(transition)
.attr('cy', (d, i) => - ( 2 * i + 1) * (circleRadius + 1))
circle.enter().append('circle')
.attr('r', circleRadius)
.attr('cx', circleRadius)
.attr('fill', d => colorScale(d.subjectivity))
.style('stroke', d => colorScale(d.subjectivity))
.style('stroke-width', 0.5)
.on('mouseover', (d, i) => {
console.log(d, i,j, this.parentNode); // j is the parent g index, ie the gth div
dispatch.call("textSelect", this, j, i, d)
})
.on('mouseout', (d, i) => {
dispatch.call("textDeselect", this, j, i)
})
.transition(transition)
.attr('cy', (d, i) => - ( 2 * i + 1) * (circleRadius + 1))
// .merge(circle);
}).merge(dialogueG);
let textContainer = d3.select("#textContainer").selectAll('div.speech').data(ebSentiment);
textContainer.exit().remove();
textContainer.enter().append('div').attr('class', 'speech')
.each(function () {
let div = d3.select(this);
let sentence = div.selectAll('span').data(d => d);
sentence.exit().remove();
sentence.html(d =>{console.log(d); return d.text});
sentence.enter().append('span')
.html(d => d.text)
.on('textSelect', (parentIndex, childIndex) => {
console.log(parentIndex, childIndex)
} );
});
let legendSVG = d3.select('#legend').append('svg').attr('width', 400).attr('height', 50);
let gradient = legendSVG.append('defs').append('linearGradient').attr('id', 'legendGradient')
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%")
.attr("spreadMethod", "pad");
gradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", colorScale(minSubjectivity ))
.attr("stop-opacity", 1);
gradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", colorScale(1))
.attr("stop-opacity", 1);
legendSVG.append('rect')
.attr('x', 0).attr('y', 0)
.attr('width', 300).attr('height', 20)
.attr('fill', "url(#legendGradient)");
legendSVG.append('text').attr('transform', 'translate(0, 45)').text(minSubjectivity);
legendSVG.append('text').attr('transform', 'translate(300, 45)').text(1);
dispatch.on('textSelect', (parentIndex, childIndex, data) => {
console.log(data);
d3.selectAll('div.speech').filter((d, i) => i == parentIndex).classed('selected', true)
.selectAll('span').filter((d, i) => i == childIndex).style('background-color', colorScale(data.subjectivity));
d3.select("#mouseover-text").html(data.text).style('color', colorScale(data.subjectivity));
});
dispatch.on('textDeselect', (parentIndex, childIndex) => {
console.log(`parent: ${parentIndex}, child: ${childIndex}`, "mouseout")
d3.selectAll('div.speech').filter((d, i) => i == parentIndex).classed('selected', false)
.selectAll('span').filter((d, i) => i == childIndex).style('background-color', 'transparent');
d3.select("#mouseover-text").html("&nbsp");
});
});
/*
Simple Grid
Project Page - http://thisisdallas.github.com/Simple-Grid/
Author - Dallas Bass
Site - http://dallasbass.com
*/
[class*='grid'],
[class*='col-'],
[class*='mobile-'],
.grid:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*='col-'] {
float: left;
min-height: 1px;
padding-right: 20px; /* column-space */
}
[class*='col-'] [class*='col-']:last-child {
padding-right: 0;
}
.grid {
width: 100%;
max-width: 1140px;
min-width: 748px; /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
margin: 0 auto;
overflow: hidden;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.grid-pad {
padding-top: 20px;
padding-left: 20px; /* grid-space to left */
padding-right: 0; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}
.push-right {
float: right;
}
/* Content Columns */
.col-1-1 {
width: 100%;
}
.col-2-3, .col-8-12 {
width: 66.66%;
}
.col-1-2, .col-6-12 {
width: 50%;
}
.col-1-3, .col-4-12 {
width: 33.33%;
}
.col-1-4, .col-3-12 {
width: 25%;
}
.col-1-5 {
width: 20%;
}
.col-1-6, .col-2-12 {
width: 16.667%;
}
.col-1-7 {
width: 14.28%;
}
.col-1-8 {
width: 12.5%;
}
.col-1-9 {
width: 11.1%;
}
.col-1-10 {
width: 10%;
}
.col-1-11 {
width: 9.09%;
}
.col-1-12 {
width: 8.33%
}
/* Layout Columns */
.col-11-12 {
width: 91.66%
}
.col-10-12 {
width: 83.333%;
}
.col-9-12 {
width: 75%;
}
.col-5-12 {
width: 41.66%;
}
.col-7-12 {
width: 58.33%
}
/* Pushing blocks */
.push-2-3, .push-8-12 {
margin-left: 66.66%;
}
.push-1-2, .push-6-12 {
margin-left: 50%;
}
.push-1-3, .push-4-12 {
margin-left: 33.33%;
}
.push-1-4, .push-3-12 {
margin-left: 25%;
}
.push-1-5 {
margin-left: 20%;
}
.push-1-6, .push-2-12 {
margin-left: 16.667%;
}
.push-1-7 {
margin-left: 14.28%;
}
.push-1-8 {
margin-left: 12.5%;
}
.push-1-9 {
margin-left: 11.1%;
}
.push-1-10 {
margin-left: 10%;
}
.push-1-11 {
margin-left: 9.09%;
}
.push-1-12 {
margin-left: 8.33%
}
@media handheld, only screen and (max-width: 767px) {
.grid {
width: 100%;
min-width: 0;
margin-left: 0;
margin-right: 0;
padding-left: 20px; /* grid-space to left */
padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
}
[class*='col-'] {
width: auto;
float: none;
margin: 10px 0;
padding-left: 0;
padding-right: 10px; /* column-space */
}
[class*='col-'] [class*='col-'] {
padding-right: 0;
}
/* Mobile Layout */
[class*='mobile-col-'] {
float: left;
margin: 0 0 10px;
padding-left: 0;
padding-right: 10px; /* column-space */
padding-bottom: 0;
}
.mobile-col-1-1 {
width: 100%;
}
.mobile-col-2-3, .mobile-col-8-12 {
width: 66.66%;
}
.mobile-col-1-2, .mobile-col-6-12 {
width: 50%;
}
.mobile-col-1-3, .mobile-col-4-12 {
width: 33.33%;
}
.mobile-col-1-4, .mobile-col-3-12 {
width: 25%;
}
.mobile-col-1-5 {
width: 20%;
}
.mobile-col-1-6, .mobile-col-2-12 {
width: 16.667%;
}
.mobile-col-1-7 {
width: 14.28%;
}
.mobile-col-1-8 {
width: 12.5%;
}
.mobile-col-1-9 {
width: 11.1%;
}
.mobile-col-1-10 {
width: 10%;
}
.mobile-col-1-11 {
width: 9.09%;
}
.mobile-col-1-12 {
width: 8.33%
}
/* Layout Columns */
.mobile-col-11-12 {
width: 91.66%
}
.mobile-col-10-12 {
width: 83.333%;
}
.mobile-col-9-12 {
width: 75%;
}
.mobile-col-5-12 {
width: 41.66%;
}
.mobile-col-7-12 {
width: 58.33%
}
.hide-on-mobile {
display: none !important;
width: 0;
height: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment