Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@lebinh

lebinh/key.html

Last active October 9, 2018 07:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lebinh/65a3743f07bbefd8fb507b589541d39b to your computer and use it in GitHub Desktop.
Save lebinh/65a3743f07bbefd8fb507b589541d39b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Display the source blob
Display the rendered blob
Raw
key.svg
<g transform="translate(350,50)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
<rect height="8" x="0" width="0" fill="#fee8c8"></rect>
<rect height="8" x="0" width="27.561503279315097" fill="#fee8c8"></rect>
<rect height="8" x="27.561503279315097" width="32.10131474797438" fill="#fdd49e"></rect>
<rect height="8" x="59.662818027289475" width="37.31064099360435" fill="#fdbb84"></rect>
<rect height="8" x="96.97345902089383" width="42.04817339762137" fill="#fc8d59"></rect>
<rect height="8" x="139.0216324185152" width="59.46509709193171" fill="#ef6548"></rect>
<rect height="8" x="198.4867295104469" width="84.09634679524274" fill="#d7301f"></rect>
<rect height="8" x="282.58307630568964" width="17.416923694310356" fill="#990000"></rect>
<g class="tick" opacity="1" transform="translate(0.5,0)">
<line stroke="#000" y2="13"></line>
<text fill="#000" y="16" dy="0.71em">1</text>
</g>
<g class="tick" opacity="1" transform="translate(28.061503279315097,0)">
<line stroke="#000" y2="13"></line>
<text fill="#000" y="16" dy="0.71em">50</text>
</g>
<g class="tick" opacity="1" transform="translate(60.162818027289475,0)">
<line stroke="#000" y2="13"></line>
<text fill="#000" y="16" dy="0.71em">200</text>
</g>
<g class="tick" opacity="1" transform="translate(97.47345902089383,0)">
<line stroke="#000" y2="13"></line>
<text fill="#000" y="16" dy="0.71em">500</text>
</g>
<g class="tick" opacity="1" transform="translate(139.5216324185152,0)">
<line stroke="#000" y2="13"></line>
<text fill="#000" y="16" dy="0.71em">1000</text>
</g>
<g class="tick" opacity="1" transform="translate(198.9867295104469,0)">
<line stroke="#000" y2="13"></line>
<text fill="#000" y="16" dy="0.71em">2000</text>
</g>
<g class="tick" opacity="1" transform="translate(283.08307630568964,0)">
<line stroke="#000" y2="13"></line>
<text fill="#000" y="16" dy="0.71em">4000</text>
</g>
<text fill="#000" font-weight="bold" text-anchor="start" y="-6">Dân số trên km²</text>
</g>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment