All examples By author By category About

ttavni

Full window Github gist

ScatterViz

<!DOCTYPE html>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

<div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="Modaltitle"></h4>
      </div>
      <div class="modal-body">
        <p id="pExample"> </p>
      </div>
    </div>

</div>
</div>
<h1 id="h1tit" style="font-family:Inconsolata;text-align:center;"> Aspect-Based Sentiment Analysis </h1>
<meta charset="utf-8">
<style>

h1 { 
    font-size: 50px;
    font-family: 'Inconsolata';

}

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

.bar--positive {
  fill: #CEEBC6;
}

.bar--negative {
  fill: #D54B56;
}

#TitleInline {
  text-align: center;
  font-family: 'Inconsolata';

}

#Modaltitle {
  font: 16px sans-serif;
  font-family: 'Karla'; 
  text-align: center;
  font-weight: bold;
}

#pExample {
  font: 12px sans-serif;
  font-family: 'Karla'; 
  letter-spacing: 1.2px;
}

.axis text {
  font: 15px sans-serif;
  font-family: 'Inconsolata'; 
  text-transform: capitalize;
  letter-spacing: 1.2px;

}

.axis path,

.axis line {
  fill: none;
  stroke: gray;
  shape-rendering: auto;
}

.legend {
  font-size: 20px;
  font-family: 'Inconsolata'; 
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

sleep(1000).then(() => {

d3.csv("data.csv", type, function(error, data) {

document.getElementById("h1tit").innerHTML = "  "

var DataLength = data.length;
  var w = window.innerWidth;
  var h = window.innerHeight;

var margin = {top: 20, right: 30, bottom: 40, left: 30},
      width = w - margin.left - margin.right

if (DataLength < 10) {
    height = h - margin.top - margin.bottom;
} else {
    height = (DataLength*20) - margin.top - margin.bottom;
}

var x = d3.scale.linear()
      .range([0, width]);

var y = d3.scale.ordinal()
      .rangeRoundBands([0, height], 0.05);

var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickSize(6, 0);

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// var color = d3.scale.linear()
  //     .domain(-1,1)
  //     .range('red','green');

// x.domain(d3.extent(data, function(d) { return d.value; })).nice(); // AUTOMATICALLY SET DOMAIN
  x.domain([-1,1]).clamp(true); // MANUALLY SET DOMAIN
  y.domain(data.map(function(d) { return d.name; }));

svg.selectAll(".bar")
      .data(data)
      .attr("class", "infoLine info")
      .datum(data)
      .enter().append("rect")
    ///create id for the elements you want to click on 
      .attr("id", "barsText")
      .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); })
      .attr("x", function(d) { return x(Math.min(0, d.value)); })
      .attr("y", function(d) { return y(d.name); })
      .attr("rx", 5)  
      .attr("ry", 5)  
      .style("opacity", function(d) { return Math.abs(d.value) + 0.1; })  
      .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
      .attr("height", y.rangeBand());
    
  d3.selectAll("#barsText").on("click", function(d) {

document.querySelector("#Modaltitle").innerHTML = "Magnitude = " + Math.round(d.magnitude * 100) / 100 + '  |   Salience = ' + Math.round(d.value * 100) / 100 + '  |   Number of Mentions = ' + d.freq 
  document.querySelector("#pExample").innerHTML = d.example
  
  });

// On mouseover and out
  svg.selectAll(".bar")
  .on("mouseover", function(d,i) {d3.select(this).style("opacity", Math.abs(d.value))})
  .on("mouseout", function(d,i) {d3.select(this).style("opacity", Math.abs(d.value) + 0.1)});

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

var tickNegative = svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + x(0) + ",0)")
      .call(yAxis)
      .selectAll(".tick")
      .filter(function(d, i) { return data[i].value < 0; });

tickNegative.select("line")
      .attr("x2", 6);

tickNegative.select("text")
      .attr("x", 9)
      .style("text-anchor", "start");

svg.selectAll('.bar')
    .attr('href', '#')
    .attr('type', 'plants-family')
    .attr('data-toggle', 'modal')
    .attr('data-target', '#myModal').style('cursor', 'pointer');

var legend = svg.append("g")
      .attr("class", "legend")
      .attr("id", "legend");
    
    legend.append("text")
      .text("Instruction Guide")
      .style("opacity", 0.25)
      .attr("id", "legend");

// legend.append("text")
    //   .text("LOVE")
    //   .attr("transform", "translate(" + (width/1.25) + "," + height/2 + ")")
    //   .style("opacity", 0.15)
    //   .style("fill",'green')
    //   .style("font-size", '150px')
    //   .attr("id", "legend");

// legend.append("text")
    //   .text("HATE")
    //   .attr("transform", "translate(" + (width/9) + "," + height/2 + ")")
    //   .style("font-size", '150px')
    //   .style("opacity", 0.15)
    //   .style("fill",'red')
    //   .attr("id", "legend");

d3.selectAll("#legend").on("click", function(d) {

document.querySelector("#Modaltitle").innerHTML = "See how each entity is talked about"
  document.querySelector("#pExample").innerHTML = "<center> This visualisation extracts keywords from text and analyses how positively and negatively they are spoken about <br> <br> Click on any bar to see examples of the entities used in context</center>"

});

svg.selectAll('.legend')
    .attr('href', '#')
    .attr('type', 'plants-family')
    .attr('data-toggle', 'modal')
    .attr('data-target', '#myModal').style('cursor', 'pointer');

});

function type(d) {
  d.value = +d.value;
  return d;
}

// d3.select("#generate")
//     .on("click", writeDownloadLink);

// function writeDownloadLink(){
//     try {
//         var isFileSaverSupported = !!new Blob();
//     } catch (e) {
//         alert("blob not supported");
//     }

//     var html = d3.select("svg")
//         .attr("title", "test2")
//         .attr("version", 1.1)
//         .attr("xmlns", "https://www.w3.org/2000/svg")
//         .node().parentNode.innerHTML;

//     var blob = new Blob([html], {type: "image/svg+xml"});
//     saveAs(blob, "myProfile.svg");
// };

});

</script>

Updated missing url https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js to https://cdn.jsdelivr.net/gh/eligrey/canvas-toblob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toblob.js

Updated missing url https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js to https://cdn.jsdelivr.net/gh/eligrey/filesaver.js/e9d941381475b5df8b7d7691013401e171014e89/filesaver.min.js

https://d3js.org/d3.v3.min.js

https://code.jquery.com/jquery-3.2.1.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js

https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js