D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
w34
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>w34</title> </head> <body> <div id="q1"></div> <script src="https://d3js.org/d3.v5.min.js"></script> <script> var url = "https://download.data.world/s/rxdnwucvhs5ugosaslbed6a6uty4wg"; d3.csv(url).then( function(data) { data.forEach(function(d) { d.response = +d.response; }); visualizar(data); } ) var txt2emoji = { "Teens" : "🧒", "Parents" : "👨"} function rep(n,type) { var text = "" for (var i = 0; i < n; i++) { text = text + txt2emoji[type]; } return(text) } function visualizar(data) { var q1 = "Q1: % of US teens/parents who say they spend too much time on their cellphone"; d3.select("div#q1").text(q1); d3.select("div#q1") .selectAll("p") .data(data.filter(function(d){return d.frequency == "na";})) .enter() .append("p") .text(function(d) {return rep(100*d.response, d.respondent) + " " + (100*d.response).toString() + "% " + d.respondent; }) } </script> </body> </html>
https://d3js.org/d3.v5.min.js