niv = await d3.csv('https://gist.githubusercontent.com/jk979/a1ab7dc85d88b3486f59ec80d7e50dec/raw/d81fe68a6e62a7858372cf4ff1207a59797a4e56/niv_all.csv', ({year, continent, country,a_1, a_2, a_3, b_1, b_1_b2, b_2, b_1_2_bcc, b_1_2_bcv, c_1, c_1_d, c_2, c_3, cw_1, cw_2, d, d_crew, e_1, e_2, e_2c, e_3, e_3d, f_1, f_2, f_3, g_1, g_2, g_3, g_4, g_5, h_1a, h_1b, h_1b1, h_1c, h_2a, h_2b, h_3, h_4, i, j_1, j_2, k_1, k_2, k_3, k_4, l_1, l_2, m_1, m_2, m_3, nato_1, nato_2, nato_3, nato_4, nato_5, nato_6, nato_7, n_8, n_9, o_1, o_2, o_3, p_1, p_2, p_3, p_4, q_1, q_2, q_3, r_1, r_2, s_5, s_6, s_7, tn, td, t_1, t_2, t_3, t_4, t_5, t_6, u_1, u_2, u_3, u_4, u_5, v_1, v_2, v_3, total_visas, bcc}) => ({year: +year, continent, country,a_1: +a_1, a_2: +a_2, a_3: +a_3, b_1, b_1_b2, b_2, b_1_2_bcc, b_1_2_bcv, c_1, c_1_d, c_2, c_3, cw_1, cw_2, d, d_crew, e_1, e_2, e_2c, e_3, e_3d, f_1:+f_1, f_2, f_3, g_1, g_2, g_3, g_4, g_5, h_1a, h_1b:+h_1b,h_1b1, h_1c, h_2a, h_2b, h_3, h_4, i, j_1:+j_1, j_2, k_1, k_2, k_3, k_4, l_1, l_2, m_1, m_2, m_3, nato_1, nato_2, nato_3, nato_4, nato_5, nato_6, nato_7, n_8, n_9, o_1, o_2, o_3, p_1, p_2, p_3, p_4, q_1, q_2, q_3, r_1, r_2, s_5, s_6, s_7, tn, td, t_1, t_2, t_3, t_4, t_5, t_6, u_1, u_2, u_3, u_4, u_5, v_1, v_2, v_3, total_visas:+total_visas, bcc}))
//await d3.csv('https://gist.githubusercontent.com/jk979/ec6c4010573e2bba05645b4751b6c84a/raw/d1d3ad8cb181af4d53df181b235b089fb3f3c1b1/niv_all.csv')
niv1 = await d3.csv('https://gist.githubusercontent.com/jk979/a1ab7dc85d88b3486f59ec80d7e50dec/raw/d81fe68a6e62a7858372cf4ff1207a59797a4e56/niv_all.csv')
total_visas = z.getCol("a_1", niv)
dataByCountry = z.groupBy(d=>d.country,z.filter(e=>e['country'],niv))
dataByYear = z.groupBy(d=>d.year,z.filter(e=>e['year'],niv))
country_list = z.unique(z.getCol('country', niv)).sort()
dataCountry = z.filter(r => r['country']==country_dropdown,niv)
dataCountry.length
dataCountry
//make dictionary of {country:valueArray}, group by country using dropdown
series = d3.stack().keys(["h_1b","f_1", "j_1", "m_1"])(dataCountry)
//series = d3.stack().keys(["total_visas"])(dataCountry)
x = d3.scaleBand()
.domain(dataCountry.map(d => d.year)) //map function onto iterable object; feed array of years into domain
.range([width - margin.right,margin.left ])
.padding(0.05)
y = d3.scaleLinear()
//nested max: looping through series to find the max of the total
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) //dynamic range
.rangeRound([height - margin.bottom, margin.top]) //height of svg - bottom margin
margin = ({top: 10, right: 10, bottom: 20, left: 40})
height = 400
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0)) //feeding function 'x' as a function
.call(g => g.selectAll(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove())
color = d3.scaleOrdinal()
//not scaleLinear (map range of values --> range of values)
//not scaleBand (map discrete categeoires --> range of values)
//map discrete array of elements (5 series keys) to a second array of elements)
.domain(series.map(d => d.key)) //reassembling array of the categories (key is the type)
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.9 + 0.1), series.length).reverse()) //length gets 5 keys; interpolateSpectral defines the hex colors
//could also provide an array of hex codes in range
.unknown("#ccc") //return the corresponding hex code, but if there's an unmatched key, color it gray
legend = svg => {
const g = svg //creating SVG for the legend
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.attr("transform", `translate(${width - margin.right},${margin.top})`)
.selectAll("g")
.data(series.slice().reverse())
.join("g")
.attr("transform", (d, i) => `translate(0,${i * 20})`);
g.append("rect")
.attr("x", -19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", d => color(d.key)); //put keys into color function
g.append("text")
.attr("x", -24)
.attr("y", 9.5)
.attr("dy", "0.35em")
.text(d => d.key.toUpperCase());
//text.(replace("_","-"));
}
series[0].key
chart = {
const svg1 = d3.select(DOM.svg(width, height)); //pointing it to the DOM object
svg1.append("g")
.selectAll("g")
.data(series)
.join("g")
.attr("fill", d => color(d.key))
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", (d, i) => x(d.data.year))
.attr("y", d => y(d[1])) //feeding y the data at index [1]
.attr("height", d => y(d[0]) - y(d[1]))
.attr("width", x.bandwidth());
svg1.append("g")
.call(xAxis);
svg1.append("g")
.call(yAxis);
svg1.append("g")
.call(legend)
.on("mouseover", d => tooltip.style("visibility", "visible").text(d.key))
.on("mousemove", d => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px").html(d.key))
.on("mouseout", d => tooltip.style("visibility", "hidden"));
return svg1.node();
}
tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("font-family", "'Open Sans', sans-serif")
.style("font-size", "12px")
.style("background","white")
.style("padding", "5px")
.style("opacity", ".6")
.style("z-index", "10")
.style("visibility", "hidden");
image = flood
import {canvas as flood} with {height} from "@mbostock/randomized-flood-fill"
import {sankeychart as sankey} with {height} from "@jk979/d3-sankey-diagram"
image2 = sankey
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.
