31:Tab4,inc={ const svg = d3.select(DOM.svg(width, height)); // width = svg.attr("width") - margin.left - margin.right; // height = svg.attr("height") - margin.top - margin.bottom var parseDate = d3.timeParse("%Y"); // var x = d3.scaleTime().range([0, width]), const y = d3.scaleLinear().range([height - margin.bottom, margin.top]) const z = d3.scaleOrdinal(d3.schemeCategory10); // console.log(d3.extent(data, d => d.year)) var data = d3.csvParse(csvdata, type); const x = d3.scaleTime() .domain(d3.extent(data, d => d.year)) .range([margin.left, width - margin.right]) var stack = d3.stack(); var area = d3.area() .x(function(d, i) { // console.log(d.data.year) return x(d.data.year); }) .y0(function(d) { // console.log(y(d[0])) return y(d[0]); }) .y1(function(d) { return y(d[1]); }); var g = svg.append("g") // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // d3.csv("data.csv", type, function(error, data) { // if (error) throw error; // console.log(data) var keys = data.columns.slice(1); console.log(keys) // console.log(data.forEach(function(d){console.log(d)})) // data.forEach(function(d){ // // console.log((d.year)) // d.year = parseDate(d.year)} ) keys = ["Bottom 99 percent income group","Top 1 percent income group"] console.log(d3.extent(data, function(d) { return d.year; })) // x.domain(d3.extent(data, function(d) { return d.year; })); z.domain(keys); stack.keys(keys); var layer = g.selectAll(".layer") .data(stack(data)) .enter().append("g") .attr("class", "layer"); layer.append("path") .attr("class", "area") .style("fill", function(d) { return z(d.key); }) .attr("d", area); layer.filter(function(d) { return d[d.length - 1][1] - d[d.length - 1][0] > 0.01; }) .append("text") .attr("x", width - 55) .attr("y", function(d) { return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2); }) .attr("dy", ".35em") .style("font", "10px sans-serif") .style("text-anchor", "end") .text(function(d) { return d.key; }); g.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(10, "%")); // }); const bisectDate = d3.bisector(function(d) { return d.year; }).left function type(d, i, columns) { d.year = parseDate(d.year); for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = d[columns[i]] / 100; return d; } return svg.node(); }32:Tab0,{ const svg = d3.select(DOM.svg(width, height)); // width = svg.attr("width") - margin.left - margin.right; // height = svg.attr("height") - margin.top - margin.bottom var parseDate = d3.timeParse("%Y"); // var x = d3.scaleTime().range([0, width]), const y = d3.scaleLinear().range([height - margin.bottom, margin.top]) const z = d3.scaleOrdinal(d3.schemeCategory10); // console.log(d3.extent(data, d => d.year)) var data = d3.csvParse(csvdata, type); const x = d3.scaleTime() .domain(d3.extent(data, d => d.year)) .range([margin.left, width - margin.right]) var stack = d3.stack(); var area = d3.area() .x(function(d, i) { // console.log(d.data.year) return x(d.data.year); }) .y0(function(d) { // console.log(y(d[0])) return y(d[0]); }) .y1(function(d) { return y(d[1]); }); var g = svg.append("g") // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // d3.csv("data.csv", type, function(error, data) { // if (error) throw error; // console.log(data) var keys = data.columns.slice(1); console.log(keys) // console.log(data.forEach(function(d){console.log(d)})) // data.forEach(function(d){ // // console.log((d.year)) // d.year = parseDate(d.year)} ) keys = ["Bottom 50 percent income group","Top 1 percent income group"] console.log(d3.extent(data, function(d) { return d.year; })) // x.domain(d3.extent(data, function(d) { return d.year; })); z.domain(keys); stack.keys(keys); var layer = g.selectAll(".layer") .data(stack(data)) .enter().append("g") .attr("class", "layer"); layer.append("path") .attr("class", "area") .style("fill", function(d) { return z(d.key); }) .attr("d", area); layer.filter(function(d) { return d[d.length - 1][1] - d[d.length - 1][0] > 0.01; }) .append("text") .attr("x", width - 55) .attr("y", function(d) { return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2); }) .attr("dy", ".35em") .style("font", "10px sans-serif") .style("text-anchor", "end") .text(function(d) { return d.key; }); g.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(10, "%")); // }); const bisectDate = d3.bisector(function(d) { return d.year; }).left function type(d, i, columns) { d.year = parseDate(d.year); for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = d[columns[i]] / 100; return d; } return svg.node(); }33:Tdda,{ const svg = d3.select(DOM.svg(width, height)); // const height = 400 // var margin = {top: 20, right: 80, bottom: 30, left: 50}, // width = svg.attr("width") - margin.left - margin.right, // height = svg.attr("height") - margin.top - margin.bottom, var g = svg.append("g") // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var parseTime = d3.timeParse("%Y"); // var x = d3.scaleTime().range([0, width]), const x = d3.scaleTime() // .domain(d3.extent(data, d => d.year)) .range([margin.left, width - margin.right]), // y = d3.scaleLinear().range([height, 0]), z = d3.scaleOrdinal(d3.schemeCategory10); const y = d3.scaleLinear().range([height - margin.bottom, margin.top]) var line = d3.line() .curve(d3.curveBasis) .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.income); }); // d3.tsv('https://gist.githubusercontent.com/mbostock/3884955/raw/95ccdeac9bbf2012300eb16f8109514e5ea234a2/data.tsv', type, function(error, data) { var data = d3.csvParse(cap_gains, type); // data = data.filter(function(d) { // return d.Geography == 'British Columbia' && d['Income concepts']=="Market income (11)"; // }); console.log(data[0]) var columns = Object.keys(data[0]); // data.forEach(function(d, _, columns) { // d=type(d, _,columns) // }); console.log(columns) var cities = data.columns.slice(1).map(function(id) { return { id: id, values: data.map(function(d) { return {year: d.year, income: d[id]}; }) }; }); console.log(cities) x.domain(d3.extent(data, function(d) { return d.year; })); y.domain([0,1 // d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.income; }); }) ]); z.domain(cities.map(function(c) { return c.id; })); // g.append("g") // .attr("class", "axis axis--x") // .attr("transform", "translate(0," + height + ")") // .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y) .ticks(10, "%")); // g.append("g") // .attr("class", "axis axis--y") // .call(d3.axisLeft(y)) // .append("text") // .attr("transform", "rotate(-90)") // .attr("y", 6) // .attr("dy", "0.71em") // .attr("fill", "#000") // .text("Temperature, ºF"); var city = g.selectAll(".city") .data(cities) .enter().append("g") .attr("class", "city"); city.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.values); }) .style("stroke", function(d) { return z(d.id); }); city.append("text") .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; }) .attr("transform", function(d) { console.log(d.value.year) return "translate(" + x(d.value.year) + "," + y(d.value.income) + ")"; }) .attr("x", 3) .attr("fill", d => z(d.id)) .attr("dy", "0.35em") .style("font", "10px sans-serif") .text(function(d) { return d.id.split(" ",2).join(" ")+'%'; }); // }); function type(d, _, columns) { d.year = parseTime(d.year); // console.log(columns) for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c]/100; return d; } return svg.node(); }34:Te33,{ const svg = d3.select(DOM.svg(width, height)); // const height = 400 // var margin = {top: 20, right: 80, bottom: 30, left: 50}, // width = svg.attr("width") - margin.left - margin.right, // height = svg.attr("height") - margin.top - margin.bottom, var g = svg.append("g") // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var parseTime = d3.timeParse("%Y"); // var x = d3.scaleTime().range([0, width]), const x = d3.scaleTime() // .domain(d3.extent(data, d => d.year)) .range([margin.left, width - margin.right]), // y = d3.scaleLinear().range([height, 0]), z = d3.scaleOrdinal(d3.schemeCategory10); const y = d3.scaleLinear().range([height - margin.bottom, margin.top]) var line = d3.line() .curve(d3.curveBasis) .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.income); }); // d3.tsv('https://gist.githubusercontent.com/mbostock/3884955/raw/95ccdeac9bbf2012300eb16f8109514e5ea234a2/data.tsv', type, function(error, data) { var data = d3.csvParse(median_inc, type); // data = data.filter(function(d) { // return d.Geography == 'British Columbia' && d['Income concepts']=="Market income (11)"; // }); console.log(data[0]) var columns = Object.keys(data[0]); // data.forEach(function(d, _, columns) { // d=type(d, _,columns) // }); console.log(columns) var cities = data.columns.slice(1).map(function(id) { return { id: id, values: data.map(function(d) { return {year: d.year, income: d[id]}; }) }; }); console.log(cities) x.domain(d3.extent(data, function(d) { return d.year; })); y.domain([ d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.income; }); }), d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.income; }); }) ]); z.domain(cities.map(function(c) { return c.id; })); // g.append("g") // .attr("class", "axis axis--x") // .attr("transform", "translate(0," + height + ")") // .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) // .ticks(10, "%")); // g.append("g") // .attr("class", "axis axis--y") // .call(d3.axisLeft(y)) // .append("text") // .attr("transform", "rotate(-90)") // .attr("y", 6) // .attr("dy", "0.71em") // .attr("fill", "#000") // .text("Temperature, ºF"); var city = g.selectAll(".city") .data(cities) .enter().append("g") .attr("class", "city"); city.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.values); }) .style("stroke", function(d) { return z(d.id); }); city.append("text") .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; }) .attr("transform", function(d) { console.log(d.value.year) return "translate(" + x(d.value.year) + "," + y(d.value.income) + ")"; }) .attr("x", 3) .attr("fill", d => z(d.id)) .attr("dy", "0.35em") .style("font", "10px sans-serif") .text(function(d) { return d.id.split(" ",2).join(" ")+'%'; }); // }); function type(d, _, columns) { d.year = parseTime(d.year); // console.log(columns) for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c]; return d; } return svg.node(); }35:Tac7,{ const svg = d3.select(DOM.svg(width, height)); // width = svg.attr("width") - margin.left - margin.right; // height = svg.attr("height") - margin.top - margin.bottom var parseDate = d3.timeParse("%Y"); // var x = d3.scaleTime().range([0, width]), const y = d3.scaleLinear().range([height - margin.bottom, margin.top]) const z = d3.scaleOrdinal(d3.schemeCategory10); // console.log(d3.extent(data, d => d.year)) var data = d3.csvParse(rich_tax, type); const x = d3.scaleTime() .domain(d3.extent(data, d => d.year)) .range([margin.left, width - margin.right]) var stack = d3.stack(); var area = d3.area() .x(function(d, i) { // console.log(d.data.year) return x(d.data.year); }) .y0(function(d) { // console.log(y(d[0])) return y(d[0]); }) .y1(function(d) { return y(d[1]); }); var g = svg.append("g") // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // d3.csv("data.csv", type, function(error, data) { // if (error) throw error; // console.log(data) var keys = data.columns.slice(1); console.log(keys) // console.log(data.forEach(function(d){console.log(d)})) // data.forEach(function(d){ // // console.log((d.year)) // d.year = parseDate(d.year)} ) keys = ["Bottom 99 percent income group","Top 1 percent income group"] console.log(d3.extent(data, function(d) { return d.year; })) // x.domain(d3.extent(data, function(d) { return d.year; })); z.domain(keys); stack.keys(keys); var layer = g.selectAll(".layer") .data(stack(data)) .enter().append("g") .attr("class", "layer"); layer.append("path") .attr("class", "area") .style("fill", function(d) { return z(d.key); }) .attr("d", area); layer.filter(function(d) { return d[d.length - 1][1] - d[d.length - 1][0] > 0.01; }) .append("text") .attr("x", width - 55) .attr("y", function(d) { return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2); }) .attr("dy", ".35em") .style("font", "10px sans-serif") .style("text-anchor", "end") .text(function(d) { return d.key; }); g.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(10, "%")); // }); const bisectDate = d3.bisector(function(d) { return d.year; }).left function type(d, i, columns) { d.year = parseDate(d.year); console.log(d.year) for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = d[columns[i]] / 100; return d; } return svg.node(); }36:Te60,{ const svg = d3.select(DOM.svg(width, height)); // const height = 400 // var margin = {top: 20, right: 80, bottom: 30, left: 50}, // width = svg.attr("width") - margin.left - margin.right, // height = svg.attr("height") - margin.top - margin.bottom, var g = svg.append("g") // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var parseTime = d3.timeParse("%Y"); // var x = d3.scaleTime().range([0, width]), const x = d3.scaleTime() // .domain(d3.extent(data, d => d.year)) .range([margin.left, width - margin.right]), // y = d3.scaleLinear().range([height, 0]), z = d3.scaleOrdinal(d3.schemeCategory10); const y = d3.scaleLinear().range([height - margin.bottom, margin.top]) var line = d3.line() .curve(d3.curveBasis) .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.income); }); // d3.tsv('https://gist.githubusercontent.com/mbostock/3884955/raw/95ccdeac9bbf2012300eb16f8109514e5ea234a2/data.tsv', type, function(error, data) { var data = d3.csvParse(mob, type); // data = data.filter(function(d) { // return d.Geography == 'British Columbia' && d['Income concepts']=="Market income (11)"; // }); console.log(data[0]) var columns = Object.keys(data[0]); // data.forEach(function(d, _, columns) { // d=type(d, _,columns) // }); console.log(columns) console.log(data) var cities = data.columns.slice(1).map(function(id) { return { id: id, values: data.map(function(d) { return {year: d.year, income: d[id]}; }) }; }); // console.log(data) x.domain(d3.extent(data, function(d) { console.log(d.year) return d.year; })); y.domain([ d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.income; }); }), d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.income; }); }) ]); z.domain(cities.map(function(c) { return c.id; })); // g.append("g") // .attr("class", "axis axis--x") // .attr("transform", "translate(0," + height + ")") // .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y) .ticks(10, "%")); // g.append("g") // .attr("class", "axis axis--y") // .call(d3.axisLeft(y)) // .append("text") // .attr("transform", "rotate(-90)") // .attr("y", 6) // .attr("dy", "0.71em") // .attr("fill", "#000") // .text("Temperature, ºF"); var city = g.selectAll(".city") .data(cities) .enter().append("g") .attr("class", "city"); city.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.values); }) .style("stroke", function(d) { return z(d.id); }); city.append("text") .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; }) .attr("transform", function(d) { // console.log(d.value.year) return "translate(" + x(d.value.year) + "," + y(d.value.income) + ")"; }) .attr("x", 3) .attr("fill", d => z(d.id)) .attr("dy", "0.35em") .style("font", "10px sans-serif") .text(function(d) { return d.id.split(" ",2).join(" ")+'%'; }); // }); function type(d, _, columns) { d.year = parseTime(d.year); // console.log(columns) for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c]/100; return d; } return svg.node(); }37:Tef2,{ const svg = d3.select(DOM.svg(width, height)) // margin = {top: 20, right: 20, bottom: 30, left: 40}, // width = +svg.attr("width") - margin.left - margin.right, // height = +svg.attr("height") - margin.top - margin.bottom, const g = svg.append("g"); // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const x = d3.scaleBand() // .domain(d3.extent(data, d => d.year)) .range([margin.left, width - margin.right]) .paddingInner(0.05) .align(0.1); const y = d3.scaleLinear().range([height - margin.bottom-35, margin.top]) // var x = d3.scaleBand() // .rangeRound([0, width]) // .paddingInner(0.05) // .align(0.1); // var y = d3.scaleLinear() // .rangeRound([height, 0]); var z = d3.scaleOrdinal() .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); var data = d3.csvParse(cra, type); // d3.csv("data.csv", function(d, i, columns) { function type(d, i, columns) { // console.log(d) for (var i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]]; d.total = t; return d; } var keys = data.columns.slice(1); // console.log(keys) data.sort(function(a, b) { return b.total - a.total; }); // console.log(data) x.domain(data.map(function(d) { return d.name; })); y.domain([0, d3.max(data, function(d) { return d.total; })]).nice(); z.domain(keys); // console.log(d3.stack().keys(keys)(data)) g.append("g") .selectAll("g") .data(d3.stack().keys(keys)(data)) .enter().append("g") .attr("fill", function(d) { console.log(d) return z(d.key); }) .selectAll("rect") .data(function(d) { return d; }) .enter().append("rect") .attr("x", function(d) { console.log(d.data.name) return x(d.data.name); }) .attr("y", function(d) { // console.log(d) return y(d[1]); }) .attr("height", function(d) { return y(d[0]) - y(d[1]); }) .attr("width", x.bandwidth()); g.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${height - margin.bottom-35})`) // .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); var formatValue = d3.format(".2s"); g.append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks().tickFormat(function(d) { return formatValue(d).replace('G', 'B')})) .append("text") .attr("x", 2) .attr("y", y(y.ticks().pop()) + 0.5) .attr("dy", "0.32em") .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "start") .text("Total Income"); // g.append("g") // .attr("class", "axis axis--x") // .attr("transform", `translate(0,${height - margin.bottom})`) // .call(d3.axisBottom(x)); // g.append("g") // .attr("class", "axis axis--y") // .attr("transform", `translate(${margin.left},0)`) // .call(d3.axisLeft(y) // .ticks(10, "%")); var legend = g.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "end") .selectAll("g") .data(keys.slice().reverse()) .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", width - 19) .attr("width", 19) .attr("height", 19) .attr("fill", z); legend.append("text") .attr("x", width - 24) .attr("y", 9.5) .attr("dy", "0.32em") .text(function(d) { return d; }); // }); return svg.node(); }38:Te59, { const svg = d3.select(DOM.svg(width, height)) // margin = {top: 20, right: 20, bottom: 30, left: 40}, // width = +svg.attr("width") - margin.left - margin.right, // height = +svg.attr("height") - margin.top - margin.bottom, const g = svg.append("g"); const x = d3.scaleBand() // .domain(d3.extent(data, d => d.year)) .range([margin.left, width - margin.right-30]) .paddingInner(0.05) .align(0.1); const y = d3.scaleLinear().range([height - margin.bottom-35, margin.top]) // var x = d3.scaleBand() // .rangeRound([0, width]) // .padding(0.1) // .align(0.1); // var y = d3.scaleLinear() // .rangeRound([height, 0]); var z = d3.scaleOrdinal() .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); var stack = d3.stack() .offset(d3.stackOffsetExpand); var data = d3.csvParse(cra, type); data.sort(function(a, b) { return b[data.columns[1]] / b.total - a[data.columns[1]] / a.total; }); x.domain(data.map(function(d) { return d.name; })); z.domain(data.columns.slice(1)); var serie = g.selectAll(".serie") .data(stack.keys(data.columns.slice(1))(data)) .enter().append("g") .attr("class", "serie") .attr("fill", function(d) { return z(d.key); }); serie.selectAll("rect") .data(function(d) { return d; }) .enter().append("rect") .attr("x", function(d) { return x(d.data.name); }) .attr("y", function(d) { return y(d[1]); }) .attr("height", function(d) { return y(d[0]) - y(d[1]); }) .attr("width", x.bandwidth()); g.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${height - margin.bottom-35})`) .call(d3.axisBottom(x)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); g.append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(10, "%")); // g.append("g") // .attr("class", "axis axis--x") // .attr("transform", `translate(0,${height - margin.bottom-20})`) // // .attr("transform", "translate(0," + height + ")") // .call(d3.axisBottom(x)) // .selectAll("text") // .style("text-anchor", "end") // .attr("dx", "-.8em") // .attr("dy", ".15em") // .attr("transform", "rotate(-65)"); // g.append("g") // .attr("class", "axis axis--y") // .attr("transform", `translate(${margin.left},0)`) // .call(d3.axisLeft(y).ticks(null, "s")) // .append("text") // .attr("x", 2) // .attr("y", y(y.ticks().pop()) + 0.5) // .attr("dy", "0.32em") // .attr("fill", "#000") // .attr("font-weight", "bold") // .attr("text-anchor", "start") // .text("Total Income"); var legend = serie.append("g") .attr("class", "legend") .attr("transform", function(d) { var d = d[d.length - 1]; return "translate(" + (x(d.data.name) + x.bandwidth()) + "," + ((y(d[0]) + y(d[1])) / 2) + ")"; }); legend.append("line") .attr("x1", -6) .attr("x2", 6) .attr("stroke", "#000"); legend.append("text") .attr("x", 9) .attr("dy", "0.35em") .attr("fill", "#000") .style("font", "10px sans-serif") .text(function(d) { return d.key; }); // }); function type(d, i, columns) { // for (var i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]]; for (var i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]]; d.total = t; return d; } return svg.node(); }39:T4b3,median_inc=`"year","Bottom 50 percent income group","Bottom 99 percent income group","Top 1 percent income group","Top 10 percent income group" "1982",4700,13100,93400,43100 "1983",4400,12600,96300,44200 "1984",4700,13000,100300,45500 "1985",5000,13600,104800,47600 "1986",4500,12900,108800,48400 "1987",4700,13500,114300,50800 "1988",5200,14500,128900,53700 "1989",5700,15600,140400,57400 "1990",5900,16300,147200,60200 "1991",5300,15500,148800,61300 "1992",4800,15300,149500,62400 "1993",4000,14500,148300,62600 "1994",3800,14500,146700,64000 "1995",4000,14900,154800,65700 "1996",3900,15000,158400,66800 "1997",3800,15100,164000,67900 "1998",3800,15100,166500,68700 "1999",4000,15700,175200,70600 "2000",4100,16200,188400,73700 "2001",4500,16900,191100,75700 "2002",4200,16600,197700,77900 "2003",4200,16900,207500,80000 "2004",4600,17700,221100,83300 "2005",5000,18800,238500,87400 "2006",5600,20500,257600,92400 "2007",6200,21800,273500,96400 "2008",6200,22400,269900,99400 "2009",5400,21100,252900,98900 "2010",5000,20800,259800,100400 "2011",5200,21500,269200,103700 "2012",5500,22500,270400,106800 "2013",5700,23400,281400,110600 "2014",6100,24300,282900,114100 "2015",6400,25200,301300,116200 `3a:T4f9,rich_tax=`"year","Bottom 50 percent income group","Bottom 99 percent income group","Top 1 percent income group","Top 10 percent income group" "1982","6.5","86.9","13.1","42.7" "1983","5.7","87.3","12.7","43.1" "1984","5.8","86.8","13.2","43.6" "1985","6.4","86.9","13.1","43.1" "1986","6.5","86.4","13.6","43.7" "1987","6.6","86.4","13.6","43.6" "1988","6.9","85.5","14.5","45" "1989","7.1","84.1","15.9","45.8" "1990","7.2","84.8","15.2","45.3" "1991","6.8","84.5","15.5","45.8" "1992","6.3","84.4","15.6","46.2" "1993","5.6","82.8","17.2","47.9" "1994","5.3","83.4","16.6","48.1" "1995","5.2","83.1","16.9","48.2" "1996","5.3","82.1","17.9","48.9" "1997","5.1","81.6","18.4","49.5" "1998","4.8","81.5","18.5","50" "1999","4.8","81.3","18.7","50.4" "2000","4.7","80","20","51.4" "2001","4.6","81.2","18.8","50.4" "2002","4.4","80.3","19.7","51.4" "2003","4.4","80","20","51.8" "2004","4.5","79","21","52.6" "2005","4.1","77.3","22.7","54.9" "2006","4.2","76.6","23.4","54.9" "2007","4.7","76","24","55.8" "2008","4.5","77.6","22.4","55.1" "2009","3.8","78","22","55.8" "2010","3.7","77.7","22.3","56.3" "2011","3.8","78.1","21.9","56.1" "2012","3.8","79.2","20.8","55.7" "2013","3.7","78.2","21.8","56.1" "2014","4.2","79.7","20.3","55" "2015","4.6","78.2","21.8","55.3" `3b:T479,mob=`"year","Bottom 50 percent income group","Bottom 99 percent income group","Top 1 percent income group","Top 10 percent income group" "1987","76.5","99.4","41.8","55.5" "1988","76.9","99.4","44.3","56.4" "1989","77.5","99.5","44.4","55.2" "1990","77.8","99.5","43.5","54.6" "1991","77.2","99.4","43.7","55.8" "1992","77.7","99.4","44.4","54.8" "1993","78","99.5","43.9","54.1" "1994","78.1","99.5","42.9","54.9" "1995","78.6","99.5","45.5","56.6" "1996","78.9","99.5","44.8","58.7" "1997","79.4","99.5","45.3","59.2" "1998","79.1","99.5","47.6","60.6" "1999","79.3","99.5","47.6","61.4" "2000","79.8","99.5","48.3","61" "2001","79.8","99.5","48.4","61.3" "2002","80.1","99.5","47.2","61" "2003","80.1","99.5","49.3","61.5" "2004","79.9","99.5","48.8","61.7" "2005","79.7","99.4","47.3","61.1" "2006","79.8","99.5","48.4","61.6" "2007","79.1","99.5","48.7","60.8" "2008","78.9","99.5","49.3","60.5" "2009","79.3","99.5","49.6","60.8" "2010","79.9","99.5","48.8","61.1" "2011","80.1","99.5","49","61.5" "2012","80.3","99.5","49.1","61.9" "2013","80.3","99.5","48.6","62.5" "2014","79.9","99.5","48.1","61.8" "2015","79.7","99.5","49.5","62.7" `3c:T779,cra=`"name","Employment Income","Pension Income","Investment Income","Self-Employment Income","Social Benefit Payments","Other Income" "Cranbrook",620657000,189549000,85209000,34918000,37694000,36538000 "Penticton",848821000,407424000,192144000,63583000,73317000,62397000 "Kelowna",4347348000,1410221000,1173046000,340503000,250789000,296967000 "Vernon",1256648000,507005000,301831000,85492000,93615000,88372000 "Salmon Arm",339758000,154424000,91365000,27263000,27724000,21530000 "Kamloops",2526106000,705922000,347118000,111656000,155076000,123099000 "Chilliwack",1910875000,644044000,270322000,140345000,148770000,97450000 "Abbotsford-Mission",3582150000,765840000,527093000,309148000,291426000,140755000 "Vancouver",60615313000,10607475000,13816208000,4697168000,3064182000,3013937000 "Squamish",526651000,76239000,70969000,52456000,27795000,20889000 "Victoria",8391177000,3033442000,2042862000,611220000,393057000,537570000 "Duncan",800473000,361586000,139787000,62981000,73438000,54717000 "Nanaimo",2016626000,795612000,363199000,142540000,153365000,129298000 "Parksville",432600000,478561000,172610000,49571000,34720000,57971000 "Port Alberni",427089000,198648000,51613000,24371000,54772000,24855000 "Courtenay",1041586000,586629000,214436000,92006000,86150000,84277000 "Campbell River",792140000,272955000,119107000,46465000,69346000,51619000 "Powell River",299936000,157657000,41303000,21970000,31363000,24729000 "Williams Lake",433126000,99293000,37085000,21479000,31288000,18593000 "Quesnel",508181000,125904000,45413000,18073000,41065000,22185000 "Prince Rupert",297483000,53280000,16782000,14856000,25062000,9926000 "Terrace",388631000,77641000,36677000,15689000,29236000,15545000 "Prince George",2323411000,417441000,225749000,91984000,138903000,88691000 "Dawson Creek",350651000,41246000,33093000,17063000,18367000,11236000 "Fort St. John",1127322000,65449000,129764000,39692000,33481000,29870000 `3d:[] 2f:{"title":"","cells":[{"id":396,"value":"md`## Income Disparity in British Columbia`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`Share of income by top 1% - Market Income. Data: [www5.statcan.gc.ca](http://www5.statcan.gc.ca/cansim/a26?lang=eng&retrLang=eng&id=2040002&&pattern=&stByVal=1&p1=1&p2=-1&tabMode=dataTable&csid=)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"md`Share of income by top 1 and bottom 50% - Market Income`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"md`Share of after tax income with capital gains - Market Income`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"md`Median Market Income`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"md`## Tax Contribution`","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"md`Share of federal and provincial or territorial income taxes paid - Market Income`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`## Mobility`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"md`Percentage in the same quantile five years ago - Market income`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"md`## Source of Income`","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"md`Total Income by Census metropolitan and census agglomeration areas. data source: [www.canada.ca/en/revenue-agency](https://www.canada.ca/en/revenue-agency/programs/about-canada-revenue-agency-cra/income-statistics-gst-hst-statistics/individual-tax-statistics-area-itsa/individual-tax-statistics-area-itsa-2017-edition-2015-tax-year.html) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"css= html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"\nhtml`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"margin = ({top: 20, right: 50, bottom: 30, left: 45})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"csvdata = `\"year\",\"Bottom 50 percent income group\",\"Bottom 99 percent income group\",\"Top 1 percent income group\",\"Top 10 percent income group\"\n\"1982\",14.7,92.5,7.5,31.2\n\"1983\",13.8,92.9,7.1,31.3\n\"1984\",14.1,92.7,7.3,31.4\n\"1985\",14.4,92.8,7.2,31.3\n\"1986\",13.4,92.3,7.7,32.4\n\"1987\",13.3,92,8,32.7\n\"1988\",13.6,91.2,8.8,33.4\n\"1989\",13.8,90.8,9.2,33.7\n\"1990\",13.7,90.8,9.2,33.8\n\"1991\",12.6,90.9,9.1,34.5\n\"1992\",11.9,91.1,8.9,34.6\n\"1993\",10.7,90.4,9.6,35.7\n\"1994\",10.4,90.8,9.2,35.7\n\"1995\",10.4,90.5,9.5,35.9\n\"1996\",10.3,90.1,9.9,36.4\n\"1997\",10.1,89.9,10.1,36.8\n\"1998\",9.9,89.7,10.3,37.1\n\"1999\",10.2,89.5,10.5,37.1\n\"2000\",10,88.5,11.5,38\n\"2001\",10.4,89.4,10.6,37.3\n\"2002\",9.9,89,11,38\n\"2003\",9.7,88.7,11.3,38.5\n\"2004\",9.9,88,12,39\n\"2005\",10.2,87.5,12.5,39.3\n\"2006\",10.3,87,13,39.5\n\"2007\",10.7,86.9,13.1,39.5\n\"2008\",10.7,87.9,12.1,38.9\n\"2009\",10.1,88.6,11.4,38.8\n\"2010\",9.6,88.1,11.9,39.5\n\"2011\",9.6,88.2,11.8,39.4\n\"2012\",10,88.8,11.2,38.8\n\"2013\",9.9,88.3,11.7,39.3\n\"2014\",10.4,89.2,10.8,38.6\n\"2015\",10.4,88.2,11.8,39.1\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"cap_gains=`\"year\",\"Bottom 50 percent income group\",\"Bottom 99 percent income group\",\"Top 1 percent income group\",\"Top 10 percent income group\"\n\"1982\",14.7,92.5,7.5,31.2\n\"1983\",13.8,92.9,7.1,31.3\n\"1984\",14.1,92.7,7.3,31.4\n\"1985\",14.4,92.8,7.2,31.3\n\"1986\",13.4,92.3,7.7,32.4\n\"1987\",13.3,92,8,32.7\n\"1988\",13.6,91.2,8.8,33.4\n\"1989\",13.8,90.8,9.2,33.7\n\"1990\",13.7,90.8,9.2,33.8\n\"1991\",12.6,90.9,9.1,34.5\n\"1992\",11.9,91.1,8.9,34.6\n\"1993\",10.7,90.4,9.6,35.7\n\"1994\",10.4,90.8,9.2,35.7\n\"1995\",10.4,90.5,9.5,35.9\n\"1996\",10.3,90.1,9.9,36.4\n\"1997\",10.1,89.9,10.1,36.8\n\"1998\",9.9,89.7,10.3,37.1\n\"1999\",10.2,89.5,10.5,37.1\n\"2000\",10,88.5,11.5,38\n\"2001\",10.4,89.4,10.6,37.3\n\"2002\",9.9,89,11,38\n\"2003\",9.7,88.7,11.3,38.5\n\"2004\",9.9,88,12,39\n\"2005\",10.2,87.5,12.5,39.3\n\"2006\",10.3,87,13,39.5\n\"2007\",10.7,86.9,13.1,39.5\n\"2008\",10.7,87.9,12.1,38.9\n\"2009\",10.1,88.6,11.4,38.8\n\"2010\",9.6,88.1,11.9,39.5\n\"2011\",9.6,88.2,11.8,39.4\n\"2012\",10,88.8,11.2,38.8\n\"2013\",9.9,88.3,11.7,39.3\n\"2014\",10.4,89.2,10.8,38.6\n\"2015\",10.4,88.2,11.8,39.1\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"t_data=d3.csv('https://gist.githubusercontent.com/mbostock/3884955/raw/95ccdeac9bbf2012300eb16f8109514e5ea234a2/data.tsv')","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":" html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}