Old school D3 from simpler times

All examples By author By category About

aaizemberg

Full window Github gist

2019 Annual Data Visualization Survey Results - leaders (full list)

<!doctype html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="viz"></div>

<script>
var data = [
{"name":"Alberto Cairo","value":140,"gender":"M","twitter":"https://twitter.com/albertocairo","url_img":"https://pbs.twimg.com/profile_images/1069593505553633281/hoG3VcMt.jpg"},
{"name":"Edward Tufte","value":68,"gender":"M","twitter":"https://twitter.com/edwardtufte","url_img":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYaI-XgI8UWdMFTpPmc77ZdxHvSMybQLQ9b9R9Vt3CmrOWjPVa"},
{"name":"Elijah Meeks","value":65,"gender":"M","twitter":"https://twitter.com/elijah_meeks","url_img":"https://miro.medium.com/max/3150/0*T9XkUm9rdJC0ZY3g.jpeg"},
{"name":"Nadieh Bremer","value":61,"gender":"F","twitter":"https://twitter.com/nadiehbremer","url_img":"https://pbs.twimg.com/profile_images/814801665056505856/N1tzpocQ.jpg"},
{"name":"Mike Bostock","value":56,"gender":"M","twitter":"https://twitter.com/mbostock","url_img":"https://pbs.twimg.com/profile_images/883703183297490945/UP4f6j-b.jpg"},
{"name":"Cole Knaflic","value":53,"gender":"F","twitter":"https://twitter.com/storywithdata","url_img":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTeaoOmLkvfkEe_cLXkwL5A5OsfS724RGUyUiZ6B0e37fH3vE3K"},
{"name":"Stephen Few","value":45,"gender":"M","twitter":"https://twitter.com/fakestephenfew","url_img":"https://images-na.ssl-images-amazon.com/images/I/B13Ubwq-PGS._UX250_.jpg"},
{"name":"Stephanie Evergreen","value":41,"gender":"F","twitter":"https://twitter.com/evergreendata","url_img":"https://pbs.twimg.com/profile_images/524940755245101056/EPi-pGaJ.jpeg"},
{"name":"Giorgia Lupi","value":34,"gender":"F","twitter":"https://twitter.com/giorgialupi","url_img":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSt8d2Gprxi-2RgMZOyjseNbPT7pm2N-LS6UOG92P_T5lLTdClN"},
{"name":"Hadley Wickham","value":30,"gender":"M","twitter":"https://twitter.com/hadleywickham","url_img":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWL_hr4W0rguKUka2bAt-kA2yOPOVbKGFe3eIon7Q_htLXGBf5Xg"},
{"name":"Moritz Stefaner","value":29,"gender":"M","twitter":"https://twitter.com/moritz_stefaner","url_img":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKwVCf2aJGhvi7jwWR4nxR_CNns4yQU2LrkqhBteX4qM8saMw"},
{"name":"Andy Kirk","value":29,"gender":"M","twitter":"https://twitter.com/visualisingdata","url_img":"https://www.visualisingdata.com/images/AndyKirk-Pic1.png"},
{"name":"Andy Kriebel","value":23,"gender":"M","twitter":"https://twitter.com/vizwizbi","url_img":"https://public.tableau.com/avatar/49476319-a731-4729-b76d-0b9ee2844430.jpeg"},
{"name":"Nathan Yau","value":22,"gender":"M","twitter":"https://twitter.com/flowingdata","url_img":"https://datastori.es/wp-content/uploads/2018/09/Nathan-Yau-nathan-yau.jpg"},
{"name":"Enrico Bertini","value":18,"gender":"M","twitter":"https://twitter.com/filwd","url_img":"https://www.dis.uniroma1.it/~dottoratoii/media/students/image_362.jpg"},
{"name":"Tamara Munzner","value":17,"gender":"F","twitter":"https://twitter.com/tamaramunzner","url_img":"https://yt3.ggpht.com/a/AGF-l79w7Ys9goHmYlT99x9bVfhKmJ6gjsHz4FQwrw=s900-c-k-c0xffffffff-no-rj-mo"},
{"name":"Ann Emery","value":17,"gender":"F","twitter":"https://twitter.com/annkemery","url_img":"https://pbs.twimg.com/profile_images/817358459125514240/uOIcMVKr_200x200.jpg"},
{"name":"New York Times","value":15,"gender":"","twitter":"https://twitter.com/nytimes","url_img":"https://pbs.twimg.com/profile_images/1098244578472280064/gjkVMelR_200x200.png"},
{"name":"Shirley Wu","value":15,"gender":"F","twitter":"https://twitter.com/sxywu","url_img":"https://pbs.twimg.com/profile_images/961124286504275968/J9pDUCiy_200x200.jpg"},
{"name":"RJ Andrews","value":15,"gender":"M","twitter":"https://twitter.com/infowetrust","url_img":"https://pbs.twimg.com/profile_images/1106597568010547201/sGfhC6U9_200x200.jpg"},
{"name":"Eva Murray","value":14,"gender":"F","twitter":"https://twitter.com/trimydata","url_img":"https://pbs.twimg.com/profile_images/1062442587221573633/8u4ZImJ7_200x200.jpg"},
{"name":"Andy Cotgreave","value":13,"gender":"M","twitter":"https://twitter.com/acotgreave","url_img":"https://cdnl.tblsft.com/sites/default/files/andy.cotgreave_400x_400.jpg"},
{"name":"Mona Chalabi","value":13,"gender":"M","twitter":"https://twitter.com/monachalabi","url_img":"https://pbs.twimg.com/profile_images/910637215981686789/ZG3J5NxU_200x200.jpg"},
{"name":"David McCandless","value":12,"gender":"M","twitter":"https://twitter.com/mccandelish","url_img":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdVi6d5Jwoe9gc1rozQoTnjdkllXiBek3fxy7iZ2_ok698NSlo3A"},
{"name":"Lisa Charlotte Rost","value":12,"gender":"F","twitter":"https://twitter.com/lisacrost","url_img":"https://pbs.twimg.com/profile_images/1087108693789831169/XknuFyzZ.jpg"},
{"name":"Amanda Cox","value":12,"gender":"F","twitter":"https://twitter.com/amandacox","url_img":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZFOlv6ZYYt0obda6PuUlQrrfbVX8_OZFnJ9VSjlbjWsOrZvlWxA"},
{"name":"Ben Jones","value":11,"gender":"M","twitter":"https://twitter.com/DataRemixed","url_img":"https://pbs.twimg.com/profile_images/1148915199119962122/AV5RdrOj_400x400.jpg"},
{"name":"The Pudding","value":11,"gender":"","twitter":"https://twitter.com/puddingviz","url_img":"https://pbs.twimg.com/profile_images/1092842742831505408/1h0IpHhs_400x400.jpg"},
{"name":"Ryan Sleeper","value":8,"gender":"M","twitter":"https://twitter.com/ryanvizzes","url_img":"https://gravatar.com/avatar/09fe49d31ab2b4e9354af7001fd3ae92"},
{"name":"Jeff Heer","value":8,"gender":"M","twitter":"https://twitter.com/jeffrey_heer","url_img":"https://news.cs.washington.edu/wp-content/uploads/2017/09/Jeffrey-Heer-portrait.png"}];

var colors = {'M' : "#1FC3AA", 'F' : "#8624F5"}

var svg = d3.select("div#viz")
              .append("svg")
                .attr("width",800).attr("height",100*30)
                .attr("xmlns","https://www.w3.org/2000/svg")
                .attr("xmlns:xlink","https://www.w3.org/1999/xlink");

svg.selectAll('rect').data(data).enter().append("rect")
   .attr("width",function(d) { return d.value;})
   .attr("height",function(d,i) { return 99;})
   .attr("x", 10)
   .attr("y", function(d,i) {return i*100;})
   .attr("fill", function(d) { if (d.gender !== '') { return(colors[d.gender]); } else return "#aaaaaa";})
       .append("title").text(function(d){return d.name;});

svg.selectAll("img").data(data).enter().append("image")
     .attr("xlink:href", function(d) {return d.url_img;})
     .attr("border-radius", "50%")
     .attr("width", "100px")
     .attr("height", "99px")
     .attr("x", function(d) { return 12 + d.value;})
     .attr("y", function(d,i) {return i*100;})
       .append("title").text(function(d){return d.name;});
  
</script>

https://d3js.org/d3.v5.min.js