Non-Immigrant Visas (NIVs) by Country, 2011-2017 / jk979

jk979

Workspace

Published

Big Data Final Project

Edited

May 1, 2019

1 fork

Importers

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();

}

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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more