Published
Edited
Aug 11, 2020
1 fork
legend({color, title: data.title})
chart2 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// Positive values
svg.append("g")
.attr("fill", color2)
.selectAll("rect")
.data(data2.map(d => d.value > 0 ? d : {value: 0}))
.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());
// Negative values
svg.append("g")
.attr("fill", 'hsl(0, 80%, 60%)') // red, but just not too bright
.selectAll("rect")
.data(data2.map(d => d.value < 0 ? d : {value: 0}))
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(0))
.attr("height", d => y(0) - y(-d.value))
.attr("width", x.bandwidth());
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxisPos)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)" );
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxisNeg)
.selectAll("text")
.style("text-anchor", "start")
.attr("dx", ".8em")
.attr("dy", "0em")
.attr("transform", "rotate(-65)" );
//svg.append("g")
//.call(xAxisPos);
//svg.append("g")
// .call(xAxisNeg);
svg.append("g")
.call(yAxis);
return svg.node();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
x = d3.scaleBand()
.domain(d3.range(data2.length))
.range([margin.left, width - margin.right])
.padding(0.1)
y = {
// Find the largest absolute outlier
const absMax = d3.max(data2, d => Math.abs(d.value))
// Use that for the scale
return d3.scaleLinear()
.domain([-absMax, absMax]).nice()
.range([height - margin.bottom, margin.top])
}
xAxisPos = g => g
.attr("transform", `translate(0,${height / 2})`)
.call(d3.axisBottom(x).tickFormat(i => data2[i].country).tickSizeOuter(0))
.selectAll('g.tick')
.attr('display', i => data2[i].value < 0 ? 'none' : '')
xAxisNeg = g => g
.attr("transform", `translate(0,${height / 2})`)
.call(d3.axisTop(x).tickFormat(i => data2[i].country).tickSizeOuter(0))
.selectAll('g.tick')
.attr('display', i => data2[i].value > 0 ? 'none' : '')
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, data2.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("Similarity in Length"))
color2 = "steelblue"
margin = ({top: 30, right: 0, bottom: 30, left: 40})
rawdata2 = Object.assign(d3.csvParse(filt, ({country, lengthdiff}) => ({country: country, value: +lengthdiff})).sort((a, b) => d3.descending(a.value, b.value)), {y: "Length Difference"})
topslicedata2 = rawdata2.slice(0,10)
bottomslicedata2 = rawdata2.slice(183, 193)
data2 = d3.merge([topslicedata2, bottomslicedata2])
dataset=d3.csv("https://raw.githubusercontent.com/belamadrid/invsimlength2/master/invsim_2014lengthdiff2.csv")
filteredData = dataset.filter(d => d.country2==countryselected)
dropdownOptions= d3.set(dataset.map(d => d.country2)).values();
function dropdown(options) {
let dd = html `<select>`
for (var i = 0; i < options.length; i++) {
var option = document.createElement("option");
option.value = options[i];
option.text = options[i];
dd.appendChild(option);
}
return dd;
}
function arrayToCSV(objArray) {
const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
let str = `${Object.keys(array[0]).map(value => `"${value}"`).join(",")}` + '\r\n';
return array.reduce((str, next) => {
str += `${Object.values(next).map(value => `"${value}"`).join(",")}` + '\r\n';
return str;
}, str);
}
filt = arrayToCSV(filteredData)
data = Object.assign(new Map(d3.csvParse(filt, ({country, lengthdiff}) => [rename.get(country) || country, +lengthdiff])), {title: "Difference in Constitution Length"})
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"],
["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"],
["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"],
["Zimbabwe (Rhodesia)", "Zimbabwe"],
["Tanzania/Tanganyika", "Tanzania"],
["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.scaleSequential()
// .domain(d3.extent(Array.from(data.values())))
//.interpolator(d3.interpolateSpectral)
//.unknown("#ccc")
color = d3.scaleSequential(d3.interpolateSpectral).domain([-2, 10])
projection = d3.geoEqualEarth()
path = d3.geoPath(projection)
width = 975
md ` Note: I would like if this map had a tooltip feature that showed each country's constitution length and similarity index. `
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.
