D3 Examples - text diff

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
body{
  font-family: monospace;
}
.seg{
  stroke-width: 4px;
}
​
.q{
  stroke: black;
  stroke-dasharray: 10 10;
}
​
.point{
  stroke: black;
}
​
​
.commit{
  margin: 10px;
  width: 450px;
  border: 1px solid lightgrey;
  padding: 10px;
}
​
.commit span{
  color: darkgrey;
}
​
.commit span.added{
  color: green;
  font-weight: bold;
}
​
.commit span.removed{
  color: red;
  font-weight: bold; 
}
​
#edit-container{
  position: absolute;
  right: 5px;
  top: 0px;
  width: 450px;
}
​
#falling, #falling-v{
  margin-top: 200px;
  margin-bottom: 200px;
  height: 200px;
}
.falling{
  position: relative;
  display: inline-block;
}
#falling-v, #width-calc{
  font-family: sans-serif;
}
​
#falling-v{
  font-size: 0 !important;
}
#falling-v span, #width-calc span{
  font-size: 14px;
  float: left;
}
</style>
​
​
<body>
  <h3>Char Diff</h3>
  <div id='char-diff'></div>
  
  <h3>Word Diff</h3>
  <div id='word-diff'></div>
​
  <div id='google-diffs'></div>
​
​
​
  <div id='edit-container'>
    <h3>Make changes!</h3>
    <div id='editable' contentEditable="true"></div>
    <button id='commit'>Commit</div>
  </div>
​
  <h3>Falling transition</h3>
  <div id='falling' class='commit'></div>
​
  <div id='slider'></div>
​
​
  <h3>Falling not fixed</h3>
  <div id='falling-v' class='commit'></div>
​
  <div id='width-calc'></div>
​
  <div id='slider'></div>
</body>
​
​
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
​
<script src='diff.js'></script>
<script src='dif_match_patch.js'></script>
​
<script src='text-diff.js'></script>
    