All examples By author By category About

ttavni

Full window Github gist

SemanticWordClouds

<!DOCTYPE html>

svg {
    background: #303030;
  }

text {

opacity: 0.5;
}

rect {
  fill: transparent;
  shape-rendering: crispEdges;
}

.axis path,
.axis line {
  fill: none;
  stroke: rgba(0, 0, 0, 0.1);
  shape-rendering: crispEdges;
}

.axisLine {
  fill: none;
  shape-rendering: crispEdges;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 2px;
}

.dot {
  fill-opacity: .5;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

.container {

position: absolute;
  display: block;
  background-color: white;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;

}

input[type=text] {
    background-color: white;
    background-image: url('https://i.imgur.com/kXQdquP.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

.legendOrdinal {

font-family: 'Armata';
  width: 320px;
  text-transform: capitalize;
  transition: all .5s ease;
  position: fixed;

}

path {
  fill: #303030;
  stroke: #fef;
  stroke-width: 0.5px;
}

.textLabels {

text-transform: lowercase;
  fill: white;
  font-family: 'Armata';font-size: 3px;

}

text {

fill: white;
}

text.label {

font-family: 'Armata';
  fill: white;
}

.myButton {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44c767), color-stop(1, #375726));
  background:-moz-linear-gradient(top, #44c767 5%, #375726 100%);
  background:-webkit-linear-gradient(top, #44c767 5%, #375726 100%);
  background:-o-linear-gradient(top, #44c767 5%, #375726 100%);
  background:-ms-linear-gradient(top, #44c767 5%, #375726 100%);
  background:linear-gradient(to bottom, #44c767 5%, #375726 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44c767', endColorstr='#375726',GradientType=0);
  background-color:#44c767;
  -moz-border-radius:28px;
  -webkit-border-radius:28px;
  border-radius:28px;
  border:1px solid #18ab29;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:17px;
  padding:16px 31px;
  text-decoration:none;
  text-shadow:0px 1px 0px #349c24;
}
.myButton:hover {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #375726), color-stop(1, #44c767));
  background:-moz-linear-gradient(top, #375726 5%, #44c767 100%);
  background:-webkit-linear-gradient(top, #375726 5%, #44c767 100%);
  background:-o-linear-gradient(top, #375726 5%, #44c767 100%);
  background:-ms-linear-gradient(top, #375726 5%, #44c767 100%);
  background:linear-gradient(to bottom, #375726 5%, #44c767 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#375726', endColorstr='#44c767',GradientType=0);
  background-color:#375726;
}
.myButton:active {
  position:fixed;
  top:1px;
}

</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" rel="stylesheet"/>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script id="tooltip-template" type="x-jst"></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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.5/d3-legend.js"></script>
<script crossorigin="anonymous" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>

<script src="https://anijs.github.io/lib/anijs/anijs-min.js"></script>

<script src="https://anijs.github.io/lib/anijs/helpers/dom/anijs-helper-dom-min.js"></script>
<body>
<div>
<div class="container" style="display: inline-block; transform: translate(0px, -60px)">
<br/><br/><br/><br/>
<div id="scatter" style="transform: translate(0px, -10px); display: inline-block"></div>
</div>
<script type="text/javascript">

var objects;
  var svg;

var margin = { top: 50, right: 100, bottom: 150, left: 250 },
    outerWidth = 10000,
    outerHeight = 8000,
    width = outerWidth - margin.left - margin.right,
    height = outerHeight - margin.top - margin.bottom;

var x = d3.scaleLinear()
    .range([0, width]).nice();

var y = d3.scaleLinear()
    .range([height, 0]).nice();

var xCat = "X",
    yCat = "Y",
    colorCat = "labels";

svg = d3.select("#scatter")
    .append("svg")
      .attr("width", outerWidth)
      .attr("height", outerHeight)
      .call(d3.zoom().on("zoom", function () {
     svg.attr("transform", d3.event.transform)
 }))
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("rect")
      .attr("width", width)
      .attr("height", height);

d3.csv("data.csv", function(data) {
  data.forEach(function(d) {
    d.X = +d.X;
    d.Y = +d.Y;
    d.labels = +d.labels;

});

color = d3.scaleOrdinal()
    .domain(function(d) { return d.labels; })
    .range(["rgb(6,150,104)", "rgb(52,222,187)", "rgb(7,77,101)", "rgb(141,235,113)", "rgb(27,81,29)", "rgb(145,206,244)", "rgb(27,77,171)", "rgb(218,115,248)", "rgb(104,55,79)", "rgb(223,187,227)", "rgb(116,22,142)", "rgb(202,219,165)", "rgb(122,48,3)", "rgb(234,214,36)", "rgb(32,142,183)", "rgb(52,245,14)", "rgb(183,13,97)", "rgb(101,161,14)", "rgb(192,0,24)", "rgb(246,166,121)", "rgb(124,136,105)", "rgb(255,107,151)", "rgb(63,22,249)", "rgb(101,139,251)", "rgb(166,116,149)", "rgb(242,49,252)"]);

// count members of each group. Groups with less
  // than 3 member will not be considered (creating
  // a convex hull need 3 points at least)
  groupIds = d3.set(data.map(function(n) { return +n.labels; }))
    .values()
    .map( function(groupId) {
      return { 
        groupId : groupId,
        count : data.filter(function(n) { return +n.labels == groupId; }).length
      };
    })
    .filter( function(group) { return group.count > 2;})
    .map( function(group) { return group.groupId; });

var fill = d3.scaleOrdinal()
      .domain([0, 1])
      .range(['#ffffe0','#91F3E0','#C2F8A1','#FFF1D2','#D4ABFF','#b81b34','#8b0000'])

x.domain([xMin, xMax]);
  y.domain([yMin, yMax]);

var xAxis = d3.axisBottom()
      .scale(x);

var yAxis = d3.axisLeft()
      .scale(y);

objects = svg.append("svg")
      .classed("objects", true)
      .attr("width", width)
      .attr("height", height + 100);

paths = objects.selectAll('.path_placeholder')
    .data(groupIds, function(d) { return +d; })
    .enter()
    .append('g')
    .attr('class', 'path_placeholder')
    .append('path')
    .attr("class", "encase")
    .attr("id", function(d) { return "path_" + d;})
    .attr('stroke', function(d) { return color(d); })
    .attr('fill', function(d) { return color(d); });

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

d3.select(this).attr("fill", "white");

});

var texts =  objects.selectAll(".dot")
      .data(data)
    .enter().append("text")
      .attr("class", "textLabels")
      .style("fill", "white")
      .style("opacity", 0.5)
      .attr("pointer-events" , "all")
      .attr("transform", transform)
      .style("font-size", function(d) { return (d.value * 5000) })
      .text(function(d) { return d.text_reference; })
      .on('mouseover', function(d,i) {

var value_ = d.value;

})

simulation
      .nodes(data)
      .on('tick', ticked);

var target = $(".textLabels");
var result = target.position().left + target.width();

//d3.selectAll(".textLabels").on("click", function(d) { return window.open(address + "/" + "/examples/gantRender.html?client=ChristmasVideos&id=" + d.idx); });

d3.selectAll(".textLabels").on("mouseout.text", function(d) {

var selectedGroup = d.labels;

setTimeout(function() {

d3.selectAll('.textLabels').transition(1000).ease(d3.easeLinear).style("opacity", 1.0)

}, 8000);

})

//SCROLL TO VIEW

$(".objects").get(0).scrollIntoView();

//SCROLL TO VIEW

function ticked() {
    
    updateGroups();

}

// select nodes of the group, retrieve its positions
// and return the convex hull of the specified points
// (3 points as minimum, otherwise returns null)
var polygonGenerator = function(groupId) {
  var node_coords = texts
    .filter(function(d) { return d.labels == parseInt(groupId); })
    .data()
    .map(function(d) { return [d.X, d.Y]; });
    
  return d3.polygonHull(node_coords);
};
function updateGroups() {
  groupIds.forEach(function(groupId) {

if (groupId != -1) {

var path = paths.filter(function(d) { return d == parseInt(groupId);})
      .attr('transform', 'scale(1) translate(0,0)')
      .attr('d', function(d) {

polygon = polygonGenerator(d);          
        centroid = d3.polygonCentroid(polygon);
        // to scale the shape properly around its points:
        // move the 'g' element to the centroid point, translate
        // all the path around the center of the 'g' and then
        // we can scale the 'g' element properly
        return valueline(
          polygon.map(function(point) {
            return [  x(point[0]) - x(centroid[0]), y(point[1]) - y(centroid[1]) ];
          })
        );
      });
    d3.select(path.node().parentNode).attr('transform', 'translate('  + x(centroid[0]) + ',' + y(centroid[1]) + ') scale(' + scaleFactor + ')');
  } else {

}
  });
}

function zoom() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);

svg.selectAll(".dot")
        .attr("transform", transform);
  }

function transform(d) {
    return "translate(" + x(d[xCat]) + "," + y(d[yCat]) + ")";
  }

});

function update() {

d3.csv('data.csv', function(data) {
  data.forEach(function(d) {
    d.X = +d.X;
    d.Y = +d.Y;
    d.labels = +d.labels;
    d.title = d.title;
    d.highlight = d.highlight;
    d.href = d.href;
    d.idx = d.idx;
  });

var fill = d3.scaleOrdinal()
      .domain([0, 1])
      .range(['#ffffe0','#91F3E0','#C2F8A1','#FFF1D2','#D4ABFF','#b81b34','#8b0000'])

x.domain([xMin, xMax]);
  y.domain([yMin, yMax]);

var xAxis = d3.axisBottom()
      .scale(x);

var yAxis = d3.axisLeft()
      .scale(y);

objects = svg.select("svg")
      .classed("objects", true)
      .attr("width", width)
      .attr("height", height + 100);

var format = d3.format(",d");

var textSelect = objects.selectAll("text").data(data);

textSelect.exit().remove();

// var newText = textSelect.transition().duration(1000).attr("class", "textLabels")
  //     .style("fill", "white")
  //     //.style("fill", function(d) { return fill(d.idx);})
  //     .attr("pointer-events" , "all")
  //     .attr("transform", transform)
  //     .style("font-size", function(d) { return 204.5  +  (d.value * 0.0055) })
  //     .text(function(d) { return d.text_reference; });

function zoom() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);

svg.selectAll(".dot")
        .attr("transform", transform);
  }

function transform(d) {
    return "translate(" + x(d[xCat]) + "," + y(d[yCat]) + ")";
  }

})

}

function highlighter(i) {

d3.selectAll('.textLabels').transition(100).ease(d3.easeCubic).style("opacity", function(d) {

return (d.labels == i ? 1.0 : 0.0)

});

d3.selectAll('.textLabels').transition(100).style("font-size", function(d) {

return (d.labels == i ? 100.0 : 0.0)

});

setTimeout(function() {

d3.selectAll('.textLabels').transition(100).ease(d3.easeLinear).style("opacity", 1.0)

}, 500);

}

let modes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
let interval = 1500; //one second

modes.forEach((mode, index) => {

setTimeout(() => {
    highlighter(index)
  }, index * interval)
})

// setTimeout(update, 10000);

</script>
</div></body>

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

Updated missing url https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js to https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

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

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

https://d3js.org/d3.v4.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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.5/d3-legend.js

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

https://d3js.org/d3.v4.js

https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js

https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js

https://anijs.github.io/lib/anijs/anijs-min.js

https://anijs.github.io/lib/anijs/helpers/dom/anijs-helper-dom-min.js