Bar chart skeleton

_.md

[ Launch: Bar chart skeleton ] 8975269 by Cynddl

config.json

{"description":"Bar chart skeleton","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var width = tributary.sw,
    height = tributary.sh;

var svg = d3.select("svg")
            .attr("width", width)
            .attr("height", height);


var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];


// 1. Construire des rectangles pour chaque valeur
// => faire une selection
// Propriété à ajouter :
// - attr('width', ...)
// - attr('height', ...)
// - attr('x', ...)
// - attr('y', ...)


// Exemple de rectangle
var rects = svg
   .append("rect")
   .attr('width', 127)
   .attr('height', 194);


// 2. Ajouter de la couleur
//
// Propriété attr('fill')


// 3. Ajouter du texte (valeur) au dessus de chaque barre