D3 Examples - ScatterViz

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
​
    <!-- Modal content-->
    <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>
<!--   <script src="https://cdn.jsdelivr.net/gh/eligrey/canvas-toblob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toblob.js"></script>
   <script src="https://cdn.jsdelivr.net/gh/eligrey/filesaver.js/e9d941381475b5df8b7d7691013401e171014e89/filesaver.min.js"></script>
   <button id="generate">Save as SVG</button> -->
​
​
<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>
​
    