Created
September 13, 2019 20:14
-
-
Save maartenzam/d5159a20062087b8f5bce35c3bc4821a to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/nipefeb
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <style id="jsbin-css"> | |
| .Asia { | |
| fill: #FF265C | |
| } | |
| .Europe { | |
| fill: #FFE700 | |
| } | |
| .Africa { | |
| fill: #4ED7E9 | |
| } | |
| .Americas { | |
| fill: #70ED02 | |
| } | |
| .Oceania { | |
| fill: purple | |
| } | |
| .tick line { | |
| stroke: #DDEAED | |
| } | |
| .tick text { | |
| color: #878787; | |
| font-size: 14px | |
| } | |
| #year { | |
| font-size: 300px; | |
| text-anchor: middle; | |
| fill: #DADADA; | |
| letter-spacing: 40px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>A bubble chart with D3</h1> | |
| <script id="jsbin-javascript"> | |
| "use strict"; | |
| var svg = d3.select("svg"); | |
| //D3 margin convention, see https://bl.ocks.org/mbostock/3019563 | |
| var margin = { top: 20, right: 10, bottom: 20, left: 10 }; | |
| var width = 800 - margin.left - margin.right; | |
| var height = 600 - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var dataUrl = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRpzJYEJv9hkwx3ZLaimdpZmrHK_hyPGXlAho_BaM2p_qsWRygvorbif1KvyPP_k0mt6j04vIL0ANUT/pub?gid=43247911&single=true&output=csv"; | |
| d3.csv(dataUrl).then(function (data) { | |
| data.forEach(function (d) { | |
| d.income = +d.income; | |
| d.lifeexp = +d.lifeexp; | |
| d.population = +d.population; | |
| }); | |
| var maxpop = d3.max(data, function (d) { | |
| return d.population; | |
| }); | |
| data.sort(function (a, b) { | |
| return b.population - a.population; | |
| }); | |
| svg.append("text").attr("x", width / 2).attr("y", height * 2 / 3).text("2018").attr("id", "year"); | |
| var xScale = d3.scaleLog().domain([400, 100000]).range([0, width]); | |
| var yScale = d3.scaleLinear().domain([15, 90]).range([height, 0]); | |
| var rScale = d3.scaleSqrt().domain([0, maxpop]).range([0, 50]); | |
| var yAxis = d3.axisLeft(yScale).tickSizeInner(-width); | |
| svg.append("g").attr("transform", "translate(10,0)").call(yAxis); | |
| var xAxis = d3.axisBottom(xScale).tickValues([500, 1000, 2000, 4000, 8000, 16000, 32000, 64000]).tickFormat(d3.format(".1s")).tickSizeInner(-height); | |
| svg.append("g").attr("transform", "translate(10," + height + ")").call(xAxis); | |
| var colors = ["#FF265C", "#FFE700", "#4ED7E9", "#70ED02", "purple"]; | |
| var colorScale = d3.scaleOrdinal().domain(["Asia", "Europe", "Africa", "Americas", "Oceania"]).range(colors); | |
| svg.selectAll("circle").data(data).enter().append("circle") | |
| //.attr("class", (d) => d.continent) | |
| .attr("cx", function (d) { | |
| return xScale(d.income); | |
| }).attr("cy", function (d) { | |
| return yScale(d.lifeexp); | |
| }).attr("r", function (d) { | |
| return rScale(d.population); | |
| }).style("fill", function (d) { | |
| return colorScale(d.continent); | |
| }).style("stroke", "black"); | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.Asia { | |
| fill: #FF265C | |
| } | |
| .Europe { | |
| fill: #FFE700 | |
| } | |
| .Africa { | |
| fill: #4ED7E9 | |
| } | |
| .Americas { | |
| fill: #70ED02 | |
| } | |
| .Oceania { | |
| fill: purple | |
| } | |
| .tick line { | |
| stroke: #DDEAED | |
| } | |
| .tick text { | |
| color: #878787; | |
| font-size: 14px | |
| } | |
| #year { | |
| font-size: 300px; | |
| text-anchor: middle; | |
| fill: #DADADA; | |
| letter-spacing: 40px; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var svg = d3.select("svg"); | |
| //D3 margin convention, see https://bl.ocks.org/mbostock/3019563 | |
| var margin = {top: 20, right: 10, bottom: 20, left: 10}; | |
| var width = 800 - margin.left - margin.right; | |
| var height = 600 - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", `translate(${margin.left},${margin.top})`); | |
| var dataUrl = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRpzJYEJv9hkwx3ZLaimdpZmrHK_hyPGXlAho_BaM2p_qsWRygvorbif1KvyPP_k0mt6j04vIL0ANUT/pub?gid=43247911&single=true&output=csv" | |
| d3.csv(dataUrl).then(function(data){ | |
| data.forEach(function(d){ | |
| d.income = +d.income; | |
| d.lifeexp = +d.lifeexp; | |
| d.population = +d.population; | |
| }) | |
| var maxpop = d3.max(data, function(d){return d.population;}); | |
| data.sort(function(a,b){ | |
| return b.population - a.population; | |
| }) | |
| svg.append("text") | |
| .attr("x", width/2) | |
| .attr("y", height*2/3) | |
| .text("2018") | |
| .attr("id", "year"); | |
| var xScale = d3.scaleLog() | |
| .domain([400,100000]) | |
| .range([0,width]); | |
| var yScale = d3.scaleLinear() | |
| .domain([15,90]) | |
| .range([height,0]); | |
| var rScale = d3.scaleSqrt() | |
| .domain([0, maxpop]) | |
| .range([0,50]); | |
| var yAxis = d3.axisLeft(yScale) | |
| .tickSizeInner(-width); | |
| svg.append("g") | |
| .attr("transform", "translate(10,0)") | |
| .call(yAxis); | |
| var xAxis = d3.axisBottom(xScale) | |
| .tickValues([500, 1000, 2000, 4000, 8000, 16000, 32000, 64000]) | |
| .tickFormat(d3.format(".1s")) | |
| .tickSizeInner(-height); | |
| svg.append("g") | |
| .attr("transform", `translate(10,${height})`) | |
| .call(xAxis); | |
| var colors =["#FF265C", "#FFE700", "#4ED7E9", "#70ED02", "purple"]; | |
| var colorScale = d3.scaleOrdinal() | |
| .domain(["Asia", "Europe", "Africa", "Americas", "Oceania"]) | |
| .range(colors); | |
| svg.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| //.attr("class", (d) => d.continent) | |
| .attr("cx", (d) => xScale(d.income)) | |
| .attr("cy", (d) => yScale(d.lifeexp)) | |
| .attr("r", (d) => rScale(d.population)) | |
| .style("fill", (d) => colorScale(d.continent)) | |
| .style("stroke", "black"); | |
| }); | |
| </script></body> | |
| </html> |
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
| .Asia { | |
| fill: #FF265C | |
| } | |
| .Europe { | |
| fill: #FFE700 | |
| } | |
| .Africa { | |
| fill: #4ED7E9 | |
| } | |
| .Americas { | |
| fill: #70ED02 | |
| } | |
| .Oceania { | |
| fill: purple | |
| } | |
| .tick line { | |
| stroke: #DDEAED | |
| } | |
| .tick text { | |
| color: #878787; | |
| font-size: 14px | |
| } | |
| #year { | |
| font-size: 300px; | |
| text-anchor: middle; | |
| fill: #DADADA; | |
| letter-spacing: 40px; | |
| } |
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
| "use strict"; | |
| var svg = d3.select("svg"); | |
| //D3 margin convention, see https://bl.ocks.org/mbostock/3019563 | |
| var margin = { top: 20, right: 10, bottom: 20, left: 10 }; | |
| var width = 800 - margin.left - margin.right; | |
| var height = 600 - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var dataUrl = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRpzJYEJv9hkwx3ZLaimdpZmrHK_hyPGXlAho_BaM2p_qsWRygvorbif1KvyPP_k0mt6j04vIL0ANUT/pub?gid=43247911&single=true&output=csv"; | |
| d3.csv(dataUrl).then(function (data) { | |
| data.forEach(function (d) { | |
| d.income = +d.income; | |
| d.lifeexp = +d.lifeexp; | |
| d.population = +d.population; | |
| }); | |
| var maxpop = d3.max(data, function (d) { | |
| return d.population; | |
| }); | |
| data.sort(function (a, b) { | |
| return b.population - a.population; | |
| }); | |
| svg.append("text").attr("x", width / 2).attr("y", height * 2 / 3).text("2018").attr("id", "year"); | |
| var xScale = d3.scaleLog().domain([400, 100000]).range([0, width]); | |
| var yScale = d3.scaleLinear().domain([15, 90]).range([height, 0]); | |
| var rScale = d3.scaleSqrt().domain([0, maxpop]).range([0, 50]); | |
| var yAxis = d3.axisLeft(yScale).tickSizeInner(-width); | |
| svg.append("g").attr("transform", "translate(10,0)").call(yAxis); | |
| var xAxis = d3.axisBottom(xScale).tickValues([500, 1000, 2000, 4000, 8000, 16000, 32000, 64000]).tickFormat(d3.format(".1s")).tickSizeInner(-height); | |
| svg.append("g").attr("transform", "translate(10," + height + ")").call(xAxis); | |
| var colors = ["#FF265C", "#FFE700", "#4ED7E9", "#70ED02", "purple"]; | |
| var colorScale = d3.scaleOrdinal().domain(["Asia", "Europe", "Africa", "Americas", "Oceania"]).range(colors); | |
| svg.selectAll("circle").data(data).enter().append("circle") | |
| //.attr("class", (d) => d.continent) | |
| .attr("cx", function (d) { | |
| return xScale(d.income); | |
| }).attr("cy", function (d) { | |
| return yScale(d.lifeexp); | |
| }).attr("r", function (d) { | |
| return rScale(d.population); | |
| }).style("fill", function (d) { | |
| return colorScale(d.continent); | |
| }).style("stroke", "black"); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment