Skip to content

Instantly share code, notes, and snippets.

@vertighel

vertighel/Readme.md

Last active December 14, 2015 21:18
Show Gist options
  • Save vertighel/5149663 to your computer and use it in GitHub Desktop.
Save vertighel/5149663 to your computer and use it in GitHub Desktop.
Download ZIP
Input an array and update a list
Raw
Readme.md

By changing the values in the input tag, a list is updated and styled using css an dynamic colors.

Raw
index.html
<!doctype html>
<meta charset="utf-8">
<title>Update a list</title>
<style type="text/css">
body,h1{font-family:"Helvetica Neue",Helvetica,sans-serif; font-weight:300;}
li{ margin:1px; color:white; text-align:right; padding-right:2px; }
li:hover{opacity:0.7;}
:invalid{background-color:pink}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<h1>click on the bars</h1>
<input id="inp" value="1,23,42,20,11,33,21" pattern="(\d+)(,\s*\d+)*" required>
<label for="inp">change me</label>
<script>
var w = {min:"10px",max:"500px"}
var list = d3.select("body").append("ul").style("width",w.max)
var cscale = d3.scale.linear()
.range(["steelblue","orange"])
var wscale = d3.scale.linear()
.range([w.min,w.max])
update()
d3.select("input").on("change",update)
function update(){
var array = d3.select("input")
.property("value").split(",")
.map(function(d) { return(+d) })
cscale.domain(d3.extent(array))
wscale.domain(d3.extent(array))
var elem = list.selectAll("li").data(array);
elem.enter()
.append("li")
.style("width", w.min)
.style("background-color", "green")
elem.text(function(d){return d})
.transition()
.style("width", function(d){return wscale(d)})
.style("background-color", function(d){return cscale(d)})
elem.on("click",function(d,i){d3.select("h1").text("list item "+i+" has value "+d)})
elem.exit()
.transition()
.style("background-color", "red")
.style("width", w.min)
.remove()
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment