bars

_.md

[ Launch: test ] 5bdabf12f6fa0999d3a0 by janesconference
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"bars","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var svg = d3.select("svg")

//Width and height
var w = 500;
var h = 100;
var barPadding = 1;

var dataset = [ 0.5, 0.10, 0.13, 0.19, 0.21, 0.25, 0.22, 0.18, 0.15, 0.13,
               0.11, 0.12, 0.15, 0.20, 0.18, 0.17, 0.16, 0.18, 0.23, 0.25 ];

//Create SVG element
svg.attr("width", w)
.attr("height", h);

var bars = svg.selectAll("rect")


bars.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
  return i * (w / dataset.length);
})
.attr("y", function(d) {
  return h - (d * h);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
  return d * h;
});

function render () {
  svg.selectAll("rect")
           .data(dataset)
           .attr("y", function(d) {
                return h - (d * h);
           })
           .attr("height", function(d) {
                return d * h;
           });
}

svg.on('click', clickHandler)

function clickHandler () {
	var ev = d3.mouse(this),
        x = ev[0],
        y = ev[1],
        index,
        value
    
    index = Math.floor(x / w *  dataset.length)
    value = (h - y) / h
    console.log ('index is', index, 'value is', value)
    
    ////
    dataset[index] = value;
  	render();
    
}