lebinh/key.html

## key.html
<!DOCTYPE html>
<svg width="800" height="500"><g transform="translate(350,50)"></g></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>

var formatPercent = d3.format(".0%"),
    formatNumber = d3.format(".0f");

var threshold = d3.scaleThreshold()
    .domain([1, 50, 200, 500, 1000, 2000, 4000])
    .range(d3.schemeOrRd[8]);

var x = d3.scaleSqrt()
    .domain([1, 4500])
    .range([0, 300]);

var xAxis = d3.axisBottom(x)
    .tickSize(13)
    .tickValues(threshold.domain())
    .tickFormat(formatNumber);

var g = d3.select("g").call(xAxis);

g.select(".domain")
    .remove();

g.selectAll("rect")
  .data(threshold.range().map(function(color) {
    var d = threshold.invertExtent(color);
    if (d[0] == null) d[0] = x.domain()[0];
    if (d[1] == null) d[1] = x.domain()[1];
    return d;
  }))
  .enter().insert("rect", ".tick")
    .attr("height", 8)
    .attr("x", function(d) { console.log(d[0]); return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("fill", function(d) { return threshold(d[0]); });

g.append("text")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .attr("text-anchor", "start")
    .attr("y", -6)
    .text("Dân số trên km²");

</script>

## key.svg

      
        
            
              
              
            

                Raw

        
        
          
            
          
          
            
              key.svg
            
          
        
      
    
    

          
    
      
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<svg width="800" height="500"><g transform="translate(350,50)"></g></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-color.v1.min.js"></script>
	<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script>

	var formatPercent = d3.format(".0%"),
	formatNumber = d3.format(".0f");

	var threshold = d3.scaleThreshold()
	.domain([1, 50, 200, 500, 1000, 2000, 4000])
	.range(d3.schemeOrRd[8]);

	var x = d3.scaleSqrt()
	.domain([1, 4500])
	.range([0, 300]);

	var xAxis = d3.axisBottom(x)
	.tickSize(13)
	.tickValues(threshold.domain())
	.tickFormat(formatNumber);

	var g = d3.select("g").call(xAxis);

	g.select(".domain")
	.remove();

	g.selectAll("rect")
	.data(threshold.range().map(function(color) {
	var d = threshold.invertExtent(color);
	if (d[0] == null) d[0] = x.domain()[0];
	if (d[1] == null) d[1] = x.domain()[1];
	return d;
	}))
	.enter().insert("rect", ".tick")
	.attr("height", 8)
	.attr("x", function(d) { console.log(d[0]); return x(d[0]); })
	.attr("width", function(d) { return x(d[1]) - x(d[0]); })
	.attr("fill", function(d) { return threshold(d[0]); });

	g.append("text")
	.attr("fill", "#000")
	.attr("font-weight", "bold")
	.attr("text-anchor", "start")
	.attr("y", -6)
	.text("Dân số trên km²");

	</script>