proportionalSymbols = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", "translate(470,500)")
.append(() =>
legend({
color: m,
//title: data.title,
width: 260,
//tickFormat: ".5f"
})
);
svg.append("g")
.selectAll("path")
.data(countries.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1.5)
.attr("fill", function(d) {
var val = data.get(d.properties.ADM0_A3);
console.log(val);
if(val)
return m(val[2]);
else
return NaN;
})
.attr("d", path_basemap)
.append("title")
.text(d => " Income category: " + d.properties.ADM0_A3 +' '+ (data.get(d.properties.ADM0_A3)));
return svg.node();
}
height = 610
width = 975
//path_points = d3.geoPath().projection(projection)
path_basemap = d3.geoPath().projection(projection)
d3geo = require('d3-geo-projection')
//projection = d3.geoAlbersUsa()
projection = d3geo.geoKavrayskiy7()
.fitSize([width*1.2, height*1.2], countries)
.translate([width*0.46, height*0.6])
//colors = [['NaN','black'],['1', 'blue'],['2', 'red'],['3', 'yellow'],['4', 'gray']]
colors = ['black','blue','red', 'yellow', 'gray']
m = d3.scaleOrdinal()
.domain([NaN, 1,2, 3, 4])
.range(colors)
//SI-prefix with two significant digits
format = d3.format(".2s")
data.values()
//proportional symbols
//radius = d3.scaleSqrt([0, d3.max([...data.values()])], [0, 20])
categories = Array.from(csv_data.values(), d=>d[1][2])
data.get("ABW")[1]
data = Object.assign(new Map(csv_data))
csv_data = d3.csvParse(await FileAttachment("Country_Income@1.csv").text(),({CountryCode, Region, IncomeGroup, IncomeCode}) => [CountryCode, [Region, IncomeGroup, +IncomeCode]])
//import the polygon base map data
basepolygons = FileAttachment("worldmap.json").json()
countries = topojson.feature(basepolygons, basepolygons.objects.unnamed)
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
topojson = require("topojson-client@3")
d3 = require("d3@5")
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.
