Published
Edited
Aug 4, 2020
1 fork
/*chart2 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("fill", color2)
.selectAll("rect")
.data(dataselected)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
svg.append("g")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)" );
return svg.node();
}
*/
x = d3.scaleBand()
.domain(d3.range(dataselected.length))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(dataselected, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => dataselected[i].country).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, dataselected.format))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Scope Difference"))
color2 = "steelblue"
margin = ({top: 30, right: 0, bottom: 150, left: 40})
rename = new Map([
["Antigua and Barbuda", "Antigua and Barb."],
["Bolivia (Plurinational State of)", "Bolivia"],
["Bosnia and Herzegovina", "Bosnia and Herz."],
["Brunei Darussalam", "Brunei"],
["Central African Republic", "Central African Rep."],
["Cook Islands", "Cook Is."],
["Democratic People's Republic of Korea", "North Korea"],
["Congo, Democratic Republic Of (Zaire)", "Dem. Rep. Congo"],
["Democratic Republic of the Congo", "Dem. Rep. Congo"],
["Dominican Republic", "Dominican Rep."],
["Equatorial Guinea", "Eq. Guinea"],
["Iran (Islamic Republic of)", "Iran"],
["Lao People's Democratic Republic", "Laos"],
["Marshall Islands", "Marshall Is."],
["Micronesia (Federated States of)", "Micronesia"],
["Republic of Korea", "South Korea"],
["Republic of Moldova", "Moldova"],
["Russian Federation", "Russia"],
["Saint Kitts and Nevis", "St. Kitts and Nevis"],
["Saint Vincent and the Grenadines", "St. Vin. and Gren."],
["Sao Tome and Principe", "São Tomé and Principe"],
["Solomon Islands", "Solomon Is."],
["South Sudan", "S. Sudan"],
["Swaziland", "eSwatini"],
["Syrian Arab Republic", "Syria"],
["The former Yugoslav Republic of Macedonia", "Macedonia"],
// ["Tuvalu", ?],
["United Republic of Tanzania", "Tanzania"],
["Venezuela (Bolivarian Republic of)", "Venezuela"],
["Viet Nam", "Vietnam"],
["United States Of America", "United States of America"],
["United States", "United States of America"],
["Russia (Soviet Union)", "Russia"],
["Madagascar (Malagasy)", "Madagascar"],
["Belarus (Byelorussia)", "Belarus"],
["Czech Republic", "Czechia"],
["Italy/Sardinia", "Italy"],
["German Federal Republic", "Germany"],
["Yugoslavia (Serbia)", "Serbia"],
["Bosnia-Herzegovina", "Bosnia and Herz."],
["Turkey/Ottoman Empire", "Turkey"],
["Iran (Persia)", "Iran"],
["Macedonia (Former Yugoslav Republic Of)", "Macedonia"],
["Kyrgyz Republic", "Kyrgyzstan"],
["Yemen (Arab Republic Of Yemen)", "Yemen"],
["Yemen Arab Republic", "Yemen"],
["Zimbabwe (Rhodesia)", "Zimbabwe"],
["Tanzania/Tanganyika", "Tanzania"],
["Cote D'Ivoire", "Côte d'Ivoire"],
["Cote d'Ivoire", "Côte d'Ivoire"],
["Burkina Faso (Upper Volta)", "Burkina Faso"],
["Myanmar (Burma)", "Myanmar"],
["Vietnam, Democratic Republic Of", "Vietnam"],
["Sri Lanka (Ceylon)", "Sri Lanka"],
["Korea, People'S Republic Of", "North Korea"],
["Korea, Republic Of", "South Korea"],
["Cambodia (Kampuchea)", "Cambodia"],
["Surinam", "Suriname"],
])
color = d3.scaleSequentialPow()
.domain([0, 1])
.interpolator(d3.interpolateSpectral)
.unknown("#ccc")
projection = d3.geoEqualEarth()
path = d3.geoPath(projection)
width = 975
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
outline = ({type: "Sphere"})
countries = topojson.feature(world, world.objects.countries)
world = FileAttachment("countries-50m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@5")
import {legend} from "@d3/color-legend"
import { radio } from '@jashkenas/inputs';
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.
