data = {
var rappeurs = [
['Rapper','1987-01-01','2023-12-01'],
['10KDunkin','2017-01-01','2022-12-01'],
['12 Gauge','1994-01-01','1995-12-01'],
['1504 Mutebaby','2021-01-01','2023-12-01'],
['2 Chainz','2007-01-01','2023-12-01'],
['21 Lil Harold','2020-01-01','2023-12-01'],
['21 Savage','2015-01-01','2022-12-01'],
['2Feet Bino2019','2021-01-01','2023-12-01'],
['4L Quan','2023-01-01','2023-12-01'],
['645AR','2017-01-01','2022-12-01'],
['6lack','2016-01-01','2023-12-01'],
['Alley Boy','2011-01-01','2019-12-01'],
['André 3000','2003-01-01','2023-12-01'],
['Atl Smook','2016-01-01','2023-12-01'],
['B.o.B.','2007-01-01','2023-12-01'],
['Baby D','1996-01-01','2008-12-01'],
['BabyDrill','2022-01-01','2023-12-01'],
['Baby Tate','2015-01-01','2023-12-01'],
['Bankroll Fresh','2012-01-01','2020-12-01'],
['Bermuda Yae','2019-01-01','2021-12-01'],
['Big Gipp','2003-01-01','2023-12-01'],
['Bktherula','2020-01-01','2023-12-01'],
['Big Boi','2003-01-01','2021-12-01'],
['Bslime','2019-01-01','2023-12-01'],
['CashCache!','2020-01-01','2021-12-01'],
['Cee-Lo Green','2002-01-01','2020-12-01'],
['CEO Trayle','2016-01-01','2023-12-01'],
['Destroy Lonely','2017-01-01','2023-12-01'],
['Digital Nas','2016-01-01','2022-12-01'],
['Duwap Kaine','2012-01-01','2023-12-01'],
['Future','2010-01-01','2022-12-01'],
['Goodie Mob','1995-01-01','2020-12-01'],
['Guap Tarantino','2016-01-01','2023-12-01'],
['Gucci Mane','2001-01-01','2023-12-01'],
['Gunna','2013-01-01','2023-12-01'],
['Homixide Gang','2021-01-01','2023-12-01'],
['ILoveMakonnen','2013-01-01','2023-12-01'],
['Jeezy','2001-01-01','2022-12-01'],
['JiD','2010-01-01','2023-12-01'],
['K$upreme','2016-01-01','2023-12-01'],
['Ken Carson','2020-01-01','2023-12-01'],
['Killer Mike','2003-01-01','2023-12-01'],
['Latto','2016-01-01','2022-12-01'],
['Lil Baby','2017-01-01','2022-12-01'],
['Lil Duke','2017-01-01','2021-12-01'],
['Lil Gnar','2018-01-01','2023-12-01'],
['Lil Gotit','2028-01-01','2022-12-01'],
['Lil Jon','2006-01-01','2016-12-01'],
['Lil Keed','2018-01-01','2023-12-01'],
['Lil Yachty','2015-01-01','2023-12-01'],
['Ludacris','1999-01-01','2015-12-01'],
['MadeinTYO','2016-01-01','2023-12-01'],
['Mango Foo','2016-01-01','2022-12-01'],
['Marlo','2017-01-01','2020-12-01'],
['MC Shy D','1987-01-01','1988-12-01'],
['Metro Boomin','2013-01-01','2023-12-01'],
['MexikoDro','2018-01-01','2023-12-01'],
['Migos','2011-01-01','2021-12-01'],
['Offset','2019-01-01','2023-12-01'],
['OJ da Juiceman','2008-01-01','2021-12-01'],
['Outkast','1994-01-01','2003-12-01'],
['Peewee Longway','2013-01-01','2023-12-01'],
['Pierre Bourne','2010-01-01','2023-12-01'],
['Playboi Carti','2016-01-01','2020-12-01'],
['Quavo','2017-01-01','2023-12-01'],
['Rae Sremmurd','2015-01-01','2023-12-01'],
['Rich Homie Quan','2012-01-01','2022-12-01'],
['Rich the Kid','2010-01-01','2021-12-01'],
['SahBabii','2012-01-01','2022-12-01'],
['Slimesito','2017-01-01','2023-12-01'],
['Soulja Boy','2007-01-01','2023-12-01'],
['T.I.','2001-01-01','2023-12-01'],
['Takeoff','2018-01-01','2022-12-01'],
['Thouxanbanfauani','2015-01-01','2023-12-01'],
['Tony Shhnow','2017-01-01','2023-12-01'],
['UnoTheActivist','2013-01-01','2023-12-01'],
['Waka Flocka Flame','2009-01-01','2020-12-01'],
['Warhol.SS','2015-01-01','2023-12-01'],
['Yak Gotti','2015-01-01','2020-12-01'],
['Young Nudy','2015-01-01','2023-12-01'],
['Young Scooter','2011-01-01','2023-12-01'],
['Young Thug','2011-01-01','2023-12-01'],
['Yung Bans','2017-01-01','2019-12-01'],
];
var arr = [
['Category', 'Started', 'Ended'],
];
for (var i = 0; i < rappeurs.length; i++) {
var rap_start = new Date(rappeurs[i][1]).valueOf();
var rap_end = new Date(rappeurs[i][2]).valueOf();
arr.push([
rappeurs[i][0],
rap_start,
rap_end
]);
}
return [{
type: 'matrix',
data: arr
}];
}
picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
scales: {
y: {
data: { extract: { field: 'Category' } }
},
t: {
data: { fields: ['Started', 'Ended'] },
expand: 0.1
},
},
components: [{
type: 'grid-line',
x: 't'
},{
type: 'axis',
dock: 'left',
scale: 'y',
},{
type: 'axis',
dock: 'bottom',
scale: 't',
formatter: {
type: 'd3-time',
format: '%Y-%m'
},
},{
key: 'bars',
type: 'box',
data: {
extract: {
field: 'Category',
props: {
start: { field: 'Started' },
end: { field: 'Ended' }
}
}
},
settings: {
orientation: 'horizontal',
major: { scale: 'y' },
minor: { scale: 't' },
box: {
fill: "orange",
width: 1.1
}
}
}, {
type: 'labels',
displayOrder: 2,
settings: {
sources: [{
component: 'bars',
selector: 'rect',
strategy: {
type: 'bar',
settings: {
direction: 'right',
labels: [{
placements: [{
position: 'outside'
}],
label: node => `${Math.round((node.data.end.value - node.data.start.value))} years`
}]
}
}
}]
}
}]
}
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
