dianaow · June 11, 2019 13:29
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/country_scoresF.csv b/country_scoresF.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="http://d3js.org/d3.v4.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  <style>
    #chart {
      text-align: center;
    }
    #map path {
      stroke-width: 0.5px;
      z-index: -2;
    }
    text {
      font-family: 'Karla', sans-serif;
      font-size: 10px;
    }
  </style>
 </head>

 <body>
   <div id="chart">
    <div id='vis-container'>
      <div class='dropdown1'></div>
      <div class='dropdown2'></div>
    </div>
  </div>
  <script>
    var map = function () {

      ///////////////////////////////////////////////////////////////////////////
      ///////////////////////////////// Globals /////////////////////////////////
      /////////////////////////////////////////////////////////////////////////// 
      var canvasDim = { width: screen.width * 0.9, height: screen.height}
      var margin = {top: 0, right: 0, bottom: 0, left: 0}
      var width = canvasDim.width - margin.left - margin.right 
      var height = canvasDim.height*0.6 - margin.top - margin.bottom 
      var modal = d3.select("#chart")
      var colorScale, countries_sorted
      ///////////////////////////////////////////////////////////////////////////
      ///////////////////////////////// Initialize //////////////////////////////
      /////////////////////////////////////////////////////////////////////////// 

      return { 
        clear : function () {
          modal.select("svg").remove()
        },
        run : function () {

          //////////////////// Set up and initiate containers ///////////////////////
          var svg = modal.append("svg")
            .attr("width", width*(1/4) + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
          var barWidth = 400

          loadData()

          ///////////////////////////////////////////////////////////////////////////
          ////////////////////////////// Generate data //////////////////////////////
          ///////////////////////////////////////////////////////////////////////////
          var attributeArray = []
          var attribute
          var newCountry = 'Singapore'
          var newCrime = 'hasaggregateAScore'
          function loadData() {

            d3.queue()   // queue function loads all external data files asynchronously 
              .defer(d3.csv, 'country_scoresF.csv')  
              .await(processData);   

          }

          function processData(error, csv) {

            if (error) throw error;

            var data = csv

            var dropdown = d3.select("#vis-container .dropdown1")
                .insert("select", "svg")
                .on("change", function() {
                  // Handler for dropdown value change (filter by regions)
                  newCountry = d3.select(this).property('value')
                  attribute = newCountry + '_' + newCrime
                  stackedBarChart(csv, attribute)
                })

            var dropdown2 = d3.select("#vis-container .dropdown2")
                .insert("select", "svg")
                .on("change", function() {
                  // Handler for dropdown value change (filter by regions)
                  newCrime = d3.select(this).property('value')
                  attribute = newCountry + '_' + newCrime
                  stackedBarChart(csv, attribute)
                })

            dropdown.selectAll("option")
                .data(['Russia', 'Singapore', 'United Kingdom', "Japan"])
              .enter().append("option")
                .attr("value", function (d) { return d })
                .text(function (d) { return d })
                .property("selected", function(d){ return d === newCountry })

            dropdown2.selectAll("option")
                .data(['hasaggregateAScore', 'hasRegulatoryEnforcementAScore'])
              .enter().append("option")
                .attr("value", function (d) { return d })
                .text(function (d) { return d })
                .property("selected", function(d){ return d === newCrime })

            stackedBarChart(csv, 'Singapore_hasaggregateAScore')

          }

          ///////////////////////////////////////////////////////////////////////////
          ///////////////////////////// Stacked bar chart ///////////////////////////
          ///////////////////////////////////////////////////////////////////////////
          function stackedBarChart(data, X) {

            var countries_nested = d3.nest()
              .key(d=>d.destination)
              .rollup(function(leaves) { return d3.sum(leaves, d=>+d[X]) })
              .entries(data)
              .sort(function(a, b){ return d3.descending(a.value, b.value) })
              .filter(d=>d.value != 0)

            var MAX = d3.max(data, d=>d[X])

            countries_sorted = countries_nested.map(d=>d.key)
            countries_sorted = countries_sorted.slice(0, 20)

            data = data.filter(d=>countries_sorted.indexOf(d.destination)!=-1)

            var filtered = []
            data.map(d=>{
              filtered.push({
                value: +d[X],
                destination: d.destination,
                binLabels: d.binLabels
              })
            })

            var binLabels = data.map(d=>d.binLabels).filter(onlyUnique)

            var dataByCountry = d3.nest()
              .key(d=>d.destination)
              .sortKeys(function(a,b) { return countries_sorted.indexOf(a) - countries_sorted.indexOf(b); })
              .entries(filtered)
              .filter(d=>d.value != 0)

            dataByCountry = dataByCountry.map(d => d.values.sort(sortOn("binLabels"))) // Ensure same sort arrangement of bin labels

            var dataNew = []
            var eachPoints = []
            dataByCountry.map((D,I) => {
              var oneCountryBin = Array.from(Array(binLabels.length), () => 0)
              D.map((d,i) => {
                oneCountryBin[binLabels.indexOf(d.binLabels)] = d.value
              })
              dataNew.push(oneCountryBin)
            })

            // Constructs a stack layout based on data 
            // d3's permute ensures each individual array is sorted in the same order. Important to ensure sort arrangement is aligned for all parameters before stack layout)
            var stackedData = Object.assign(d3.stack().keys(d3.range(binLabels.length))(dataNew), {
              keys: binLabels,
              ids: binLabels.map(R => countries_sorted.map(P => `${R}_${P}`)),
              countries: countries_sorted
            })

            // vertical stacked barchart
            //var xScale = d3.scaleBand()
              //.domain(countries_sorted)
              //.range([0, width])
              //.padding(0.5)

            //var yScale = d3.scaleLinear()
              //.domain([0, 100])
              //.range([barHeight, 0])

            var yScale = d3.scaleBand()
              .domain(countries_sorted)
              .range([0, 30*countries_sorted.length])
              .padding(0.2)

            var xScale = d3.scaleLinear()
              .domain([0, 100])
              .range([0, barWidth])  

            var colorScale = d3.scaleOrdinal()
              .range(['powderblue', 'yellow','gold', 'orange', 'darkorange','red'])
              .domain(binLabels)

            stackedData.forEach((d,i) => {
              stackedData.countries.forEach((D,I) => {
                stackedData[i][I].key = stackedData.ids[i][I]
                stackedData[i][I].color = colorScale(stackedData.keys[i]) 
                stackedData[i][I].x = ( d[I][0] ? xScale(d[I][0]) : xScale(0) )
                stackedData[i][I].y = yScale(D)
                stackedData[i][I].width = ( d[I][1] ? xScale(d[I][1]) : xScale(0) ) - ( d[I][0] ? xScale(d[I][0]) : xScale(0) )
                stackedData[i][I].height = yScale.bandwidth() 
                //stackedData[i][I].x = xScale(D)
                //stackedData[i][I].y = ( d[I][1] ? yScale(d[I][1]) : yScale(0) ) 
                //stackedData[i][I].width = xScale.bandwidth()
                //stackedData[i][I].height = ( d[I][0] ? yScale(d[I][0]) : yScale(0) ) - ( d[I][1] ? yScale(d[I][1]) : yScale(0) )
              })
            })
            //console.log(stackedData)

            var groups = svg.selectAll("rect").data(stackedData.flat(), d=>d.key)

            groups.exit().remove()

            var groupsEnter = groups.enter().append("rect")

            groupsEnter
              .attr('class', d=>d.key)
              .attr("fill", d=>d.color)
              .attr("x", 0)
              .attr("width", 0)
              .attr("y", d => d.y)
              .attr("height", d => d.height)

            groups = groups.merge(groupsEnter)

            groups.transition().duration(2000)
              .attr('class', d=>d.key)
              .attr("fill", d=>d.color)
              .attr("x", d => d.x)
              .attr("width", d => d.width)
              .attr("y", d => d.y)
              .attr("height", d => d.height)

            var text = svg.selectAll("text").data(countries_sorted, d=>d)

            text.exit().remove()

            var entered_text = text.enter().append("text")
              .attr("x", 10)
              .attr('y', d=>yScale(d)+yScale.bandwidth()/2)
              .attr('fill', 'black')
              .attr('font-size', '14px')
              .text(d=>d)

            text = text.merge(entered_text)

            text.transition().duration(2000)
              .attr('y', d=>yScale(d)+yScale.bandwidth()/2)
              .text(d=>d)

          }


        }
      }

      ///////////////////////////////////////////////////////////////////////////
      ///////////////////////////// Helper functions ////////////////////////////
      ///////////////////////////////////////////////////////////////////////////
      function onlyUnique(value, index, self) { 
          return self.indexOf(value) === index;
      }

      function sortOn(property) {
        return function(a, b){
          if(a[property] < b[property]){
              return -1;
          }else if(a[property] > b[property]){
              return 1;
          }else{
              return 0;   
          }
        }
      }

    }()
  </script>
  <script>
    map.run()
  </script>
 </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
	<style>
	#chart {
	text-align: center;
	}
	#map path {
	stroke-width: 0.5px;
	z-index: -2;
	}
	text {
	font-family: 'Karla', sans-serif;
	font-size: 10px;
	}
	</style>
	</head>

	<body>
	<div id="chart">
	<div id='vis-container'>
	<div class='dropdown1'></div>
	<div class='dropdown2'></div>
	</div>
	</div>
	<script>
	var map = function () {

	///////////////////////////////////////////////////////////////////////////
	///////////////////////////////// Globals /////////////////////////////////
	///////////////////////////////////////////////////////////////////////////
	var canvasDim = { width: screen.width * 0.9, height: screen.height}
	var margin = {top: 0, right: 0, bottom: 0, left: 0}
	var width = canvasDim.width - margin.left - margin.right
	var height = canvasDim.height*0.6 - margin.top - margin.bottom
	var modal = d3.select("#chart")
	var colorScale, countries_sorted
	///////////////////////////////////////////////////////////////////////////
	///////////////////////////////// Initialize //////////////////////////////
	///////////////////////////////////////////////////////////////////////////

	return {
	clear : function () {
	modal.select("svg").remove()
	},
	run : function () {

	//////////////////// Set up and initiate containers ///////////////////////
	var svg = modal.append("svg")
	.attr("width", width*(1/4) + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	var barWidth = 400

	loadData()

	///////////////////////////////////////////////////////////////////////////
	////////////////////////////// Generate data //////////////////////////////
	///////////////////////////////////////////////////////////////////////////
	var attributeArray = []
	var attribute
	var newCountry = 'Singapore'
	var newCrime = 'hasaggregateAScore'
	function loadData() {

	d3.queue() // queue function loads all external data files asynchronously
	.defer(d3.csv, 'country_scoresF.csv')
	.await(processData);

	}

	function processData(error, csv) {

	if (error) throw error;

	var data = csv

	var dropdown = d3.select("#vis-container .dropdown1")
	.insert("select", "svg")
	.on("change", function() {
	// Handler for dropdown value change (filter by regions)
	newCountry = d3.select(this).property('value')
	attribute = newCountry + '_' + newCrime
	stackedBarChart(csv, attribute)
	})

	var dropdown2 = d3.select("#vis-container .dropdown2")
	.insert("select", "svg")
	.on("change", function() {
	// Handler for dropdown value change (filter by regions)
	newCrime = d3.select(this).property('value')
	attribute = newCountry + '_' + newCrime
	stackedBarChart(csv, attribute)
	})

	dropdown.selectAll("option")
	.data(['Russia', 'Singapore', 'United Kingdom', "Japan"])
	.enter().append("option")
	.attr("value", function (d) { return d })
	.text(function (d) { return d })
	.property("selected", function(d){ return d === newCountry })

	dropdown2.selectAll("option")
	.data(['hasaggregateAScore', 'hasRegulatoryEnforcementAScore'])
	.enter().append("option")
	.attr("value", function (d) { return d })
	.text(function (d) { return d })
	.property("selected", function(d){ return d === newCrime })

	stackedBarChart(csv, 'Singapore_hasaggregateAScore')

	}

	///////////////////////////////////////////////////////////////////////////
	///////////////////////////// Stacked bar chart ///////////////////////////
	///////////////////////////////////////////////////////////////////////////
	function stackedBarChart(data, X) {

	var countries_nested = d3.nest()
	.key(d=>d.destination)
	.rollup(function(leaves) { return d3.sum(leaves, d=>+d[X]) })
	.entries(data)
	.sort(function(a, b){ return d3.descending(a.value, b.value) })
	.filter(d=>d.value != 0)

	var MAX = d3.max(data, d=>d[X])

	countries_sorted = countries_nested.map(d=>d.key)
	countries_sorted = countries_sorted.slice(0, 20)

	data = data.filter(d=>countries_sorted.indexOf(d.destination)!=-1)

	var filtered = []
	data.map(d=>{
	filtered.push({
	value: +d[X],
	destination: d.destination,
	binLabels: d.binLabels
	})
	})

	var binLabels = data.map(d=>d.binLabels).filter(onlyUnique)

	var dataByCountry = d3.nest()
	.key(d=>d.destination)
	.sortKeys(function(a,b) { return countries_sorted.indexOf(a) - countries_sorted.indexOf(b); })
	.entries(filtered)
	.filter(d=>d.value != 0)

	dataByCountry = dataByCountry.map(d => d.values.sort(sortOn("binLabels"))) // Ensure same sort arrangement of bin labels

	var dataNew = []
	var eachPoints = []
	dataByCountry.map((D,I) => {
	var oneCountryBin = Array.from(Array(binLabels.length), () => 0)
	D.map((d,i) => {
	oneCountryBin[binLabels.indexOf(d.binLabels)] = d.value
	})
	dataNew.push(oneCountryBin)
	})

	// Constructs a stack layout based on data
	// d3's permute ensures each individual array is sorted in the same order. Important to ensure sort arrangement is aligned for all parameters before stack layout)
	var stackedData = Object.assign(d3.stack().keys(d3.range(binLabels.length))(dataNew), {
	keys: binLabels,
	ids: binLabels.map(R => countries_sorted.map(P => `${R}_${P}`)),
	countries: countries_sorted
	})

	// vertical stacked barchart
	//var xScale = d3.scaleBand()
	//.domain(countries_sorted)
	//.range([0, width])
	//.padding(0.5)

	//var yScale = d3.scaleLinear()
	//.domain([0, 100])
	//.range([barHeight, 0])

	var yScale = d3.scaleBand()
	.domain(countries_sorted)
	.range([0, 30*countries_sorted.length])
	.padding(0.2)

	var xScale = d3.scaleLinear()
	.domain([0, 100])
	.range([0, barWidth])

	var colorScale = d3.scaleOrdinal()
	.range(['powderblue', 'yellow','gold', 'orange', 'darkorange','red'])
	.domain(binLabels)

	stackedData.forEach((d,i) => {
	stackedData.countries.forEach((D,I) => {
	stackedData[i][I].key = stackedData.ids[i][I]
	stackedData[i][I].color = colorScale(stackedData.keys[i])
	stackedData[i][I].x = ( d[I][0] ? xScale(d[I][0]) : xScale(0) )
	stackedData[i][I].y = yScale(D)
	stackedData[i][I].width = ( d[I][1] ? xScale(d[I][1]) : xScale(0) ) - ( d[I][0] ? xScale(d[I][0]) : xScale(0) )
	stackedData[i][I].height = yScale.bandwidth()
	//stackedData[i][I].x = xScale(D)
	//stackedData[i][I].y = ( d[I][1] ? yScale(d[I][1]) : yScale(0) )
	//stackedData[i][I].width = xScale.bandwidth()
	//stackedData[i][I].height = ( d[I][0] ? yScale(d[I][0]) : yScale(0) ) - ( d[I][1] ? yScale(d[I][1]) : yScale(0) )
	})
	})
	//console.log(stackedData)

	var groups = svg.selectAll("rect").data(stackedData.flat(), d=>d.key)

	groups.exit().remove()

	var groupsEnter = groups.enter().append("rect")

	groupsEnter
	.attr('class', d=>d.key)
	.attr("fill", d=>d.color)
	.attr("x", 0)
	.attr("width", 0)
	.attr("y", d => d.y)
	.attr("height", d => d.height)

	groups = groups.merge(groupsEnter)

	groups.transition().duration(2000)
	.attr('class', d=>d.key)
	.attr("fill", d=>d.color)
	.attr("x", d => d.x)
	.attr("width", d => d.width)
	.attr("y", d => d.y)
	.attr("height", d => d.height)

	var text = svg.selectAll("text").data(countries_sorted, d=>d)

	text.exit().remove()

	var entered_text = text.enter().append("text")
	.attr("x", 10)
	.attr('y', d=>yScale(d)+yScale.bandwidth()/2)
	.attr('fill', 'black')
	.attr('font-size', '14px')
	.text(d=>d)

	text = text.merge(entered_text)

	text.transition().duration(2000)
	.attr('y', d=>yScale(d)+yScale.bandwidth()/2)
	.text(d=>d)

	}


	}
	}

	///////////////////////////////////////////////////////////////////////////
	///////////////////////////// Helper functions ////////////////////////////
	///////////////////////////////////////////////////////////////////////////
	function onlyUnique(value, index, self) {
	return self.indexOf(value) === index;
	}

	function sortOn(property) {
	return function(a, b){
	if(a[property] < b[property]){
	return -1;
	}else if(a[property] > b[property]){
	return 1;
	}else{
	return 0;
	}
	}
	}

	}()
	</script>
	<script>
	map.run()
	</script>
	</body>
	</html>