[ Launch: Bar chart skeleton ] 8975269 by Cynddl
-
-
Save cynddl/8975269 to your computer and use it in GitHub Desktop.
Bar chart skeleton
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment