import { select, csv, scaleLinear, max, scaleBand, axisLeft, axisBottom, format, count } from 'd3'; // ========== PREPARING THE DATA SETS ========== csv("data.csv").then(function(data) { data.forEach(function(d) { d.Ages = +d.Ages; d["User ID"] = +d["User ID"]; d["Year of Birth"] = +d["Year of Birth"]; }); var rowTotal = data.length var nestByGender = d3.nest() .key(function(d) { return d.Gender; }) .rollup(function(val) { return Math.floor(val.length/rowTotal * 100); }) .entries(data1); var nestByRegion = d3.nest() .key(function(d) { return d.Region; }) .rollup(function(val) { return Math.floor(val.length/rowTotal * 100); }) .entries(data2); var nestByGeneration = d3.nest() .key(function(d) { return d.Generation; }) .rollup(function(val) { return Math.floor(val.length/rowTotal * 100); }) .entries(data3); var ageGrp = d3.nest() .key(function(d){ var ageGroup = null; if (d.age < 16){ ageGroup = '0-16'; } else if (d.Ages >= 16 && d.Ages <= 20 ){ ageGroup = '16-20'; } else if (d.Ages > 20 && d.Ages <= 30 ){ ageGroup = '20-30'; } else if (d.Ages > 30 && d.Ages <= 40 ){ ageGroup = '30-40'; } else if (d.Ages > 40 && d.Ages <= 50 ){ ageGroup = '40-50'; } else if (d.Ages > 50 && d.Ages <= 60 ){ ageGroup = '50-60'; } else if (d.Ages > 60 && d.Ages <= 70 ){ ageGroup = '60-70'; } else if (d.Ages > 70 && d.Ages <= 80 ){ ageGroup = '70-80'; } else if (d.Ages > 80 && d.Ages <= 90 ){ ageGroup = '80-90'; } else if (d.Ages > 90 && d.Ages <= 100 ){ ageGroup = '90-100'; } return ageGroup; }) .rollup(function(val) { return Math.floor(val.length/rowTotal * 100); }) .entries(data4); // =============== DATAVIZ ========== var svg = select('svg'); var height = +svg.attr('height'); var width = +svg.attr('width'); var render = data => { var xValue = d => d.value; var yValue = d => d.key; var margin = {top: 50, right: 200, bottom: 50, left: 200}; var innerWidth = width - margin.left - margin.right; var innerHeight = height - margin.top - margin.bottom; var xScale = scaleLinear() .domain([0, max(data, xValue)]) .range([0, innerWidth]); var yScale = scaleBand() .domain(data.map(yValue)) .range([0, innerHeight]) .padding(0.1); var g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); var yAxis = axisLeft(yScale); var xAxis = axisBottom(xScale) .tickFormat(function(d) {return d + " %"}) //================== yAxis Scale setting yAxis(g.append('g')); //================== xAxis Scale ================== // g.append('g').call(xAxis) // .attr('transform', `translate(0,${innerHeight})`); // =================== Chart Elements ================== g.selectAll('rect') .data(data) .enter() .append('rect') .attr('y', d => yScale(yValue(d))) .attr('width', d => xScale(xValue(d))) .attr('height', yScale.bandwidth()); // =============== horizontal bar labels ============== svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .selectAll(".textlabel") .data(data) .enter() .append("text") .attr("class", "textlabel") .attr("x", function(d){ return xScale(parseFloat(d.value)) + 10 ; }) .attr("y", function(d){ return yScale(d.key) + yScale.bandwidth()/2; }) .text(function(d){ return (d.value) + "%"; }); }; // ==== Filter Events ==== var data1 = nestByGender var data2 = nestByGeneration var data3 = nestByRegion var data4 = ageGrp //console.log(data1); //console.log(data2); //console.log(data3); //console.log(data4); //render(data1); //render(data2); //render(data3); //render(data4); var update(data1) = document.getElementById("a"); var update(data2) = document.getElementById("b"); var update(data3) = document.getElementById("c"); var update(data4) = document.getElementById("d"); console.log(data1) });

loreal_data transitioning

Hilario Calderon