Skip to content

Instantly share code, notes, and snippets.

@micahstubbs

micahstubbs/.block

Last active June 14, 2016 23:22
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 micahstubbs/0678910da3463242d7ef to your computer and use it in GitHub Desktop.
Save micahstubbs/0678910da3463242d7ef to your computer and use it in GitHub Desktop.
Download ZIP
transpacific partnership talks
Raw
.block
license: CC0-1.0
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: white;
stroke-width: 0.25px;
fill: lightgrey;
}
/* colors from http://colorbrewer2.org/ */
/* Currently in Negotiations */
.country.id840 { fill: #1b9e77; } /* United States */
.country.id96 { fill: #1b9e77; } /* Brunei */
.country.id152 { fill: #1b9e77; } /* Chile */
.country.id554 { fill: #1b9e77; } /* New Zealand */
.country.id702 { fill: #1b9e77; } /* Singapore */
.country.id36 { fill: #1b9e77; } /* Australia */
.country.id604 { fill: #1b9e77; } /* Peru */
.country.id704 { fill: #1b9e77; } /* Vietnam */
.country.id458 { fill: #1b9e77; } /* Malaysia */
.country.id484 { fill: #1b9e77; } /* Mexico */
.country.id124 { fill: #1b9e77; } /* Canada */
.country.id392 { fill: #1b9e77; } /* Japan */
/* Announced Interest */
.country.id158 { fill: #d95f02; } /* Republic of China */
.country.id410 { fill: #d95f02; } /* Republic of Korea */
.country.id188 { fill: #d95f02; } /* Costa Rica */
.country.id170 { fill: #d95f02; } /* Colombia */
.country.id764 { fill: #d95f02; } /* Thailand */
.country.id418 { fill: #d95f02; } /* Laos */
.country.id360 { fill: #d95f02; } /* Indonesia */
.country.id608 { fill: #d95f02; } /* The Phillipines */
/* Potential Future Members */
.country.id356 { fill: #7570b3; } /* India */
.country.id156 { fill: #7570b3; } /* China */
.country.id50 { fill: #7570b3; } /* Bangladesh */
.country.id116 { fill: #7570b3; } /* Cambodia */
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<script src="legend.js"></script>
<script>
var width = 720,
height = 530;
var projection = d3.geo.mercator()
.center([-24, 30 ])
.scale(150)
.rotate([-180,0])
.translate([250,250]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("id", "trans-pacific partnership map");
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g")
// load and display the World
d3.json("world-110m2.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries)
.geometries)
.enter()
.append("path")
.attr("class", function(d) { return "country id" + d.id; })
.attr("d", path)
});
// draw the legend
categoricalData = ["Currently in negotiations","Announced interest in joining", "Potential future members"]
categoricalColors = ["#1b9e77", "#d95f02", "#7570b3"]
ordinalScale = d3.scale.ordinal()
.domain(categoricalData)
.range(categoricalColors)
verticalLegend = d3.svg.legend()
.labelFormat("none")
.cellPadding(5)
.orientation("vertical")
.units("")
.cellWidth(25).cellHeight(18)
.inputScale(ordinalScale)
.cellStepping(10);
d3.select("svg").append("g")
.attr("transform", "translate(350,360)")
.attr("class", "legend")
.call(verticalLegend);
</script>
</body>
</html>
Raw
legend.js
d3.svg.legend = function() {
var legendValues=
[
{color: "red", stop: [0,1]},
{color: "blue", stop: [1,2]},
{color: "purple", stop: [2,3]},
{color: "yellow", stop: [3,4]},
{color: "Aquamarine", stop: [4,5]}
];
var legendScale;
var cellWidth = 30;
var cellHeight = 20;
var adjustable = false;
var labelFormat = d3.format(".01f");
var labelUnits = "units";
var lastValue = 6;
var changeValue = 1;
var orientation = "horizontal";
var cellPadding = 0;
function legend(g) {
function cellRange(valuePosition, changeVal) {
legendValues[valuePosition].stop[0] += changeVal;
legendValues[valuePosition - 1].stop[1] += changeVal;
redraw();
}
function redraw() {
g.selectAll("g.legendCells")
.data(legendValues)
.exit().remove();
g.selectAll("g.legendCells")
.select("rect")
.style("fill", function(d) {return d.color});
if (orientation == "vertical") {
g.selectAll("g.legendCells")
.select("text.breakLabels")
.style("display", "block")
.style("text-anchor", "start")
.attr("x", cellWidth + cellPadding)
.attr("y", 5 + (cellHeight / 2))
.text(function(d) {return labelFormat(d.stop[0]) + (d.stop[1].length > 0 ? " - " + labelFormat(d.stop[1]) : "")})
g.selectAll("g.legendCells")
.attr("transform", function(d,i) {return "translate(0," + (i * (cellHeight + cellPadding)) + ")" });
}
else {
g.selectAll("g.legendCells")
.attr("transform", function(d,i) {return "translate(" + (i * cellWidth) + ",0)" });
g.selectAll("text.breakLabels")
.style("text-anchor", "middle")
.attr("x", 0).attr("y", -7)
.style("display", function(d,i) {return i == 0 ? "none" : "block"})
.text(function(d) {return labelFormat(d.stop[0])});
}
}
g.selectAll("g.legendCells")
.data(legendValues)
.enter()
.append("g")
.attr("class", "legendCells")
.attr("transform", function(d,i) {return "translate(" + (i * (cellWidth + cellPadding)) + ",0)" })
g.selectAll("g.legendCells")
.append("rect")
.attr("height", cellHeight)
.attr("width", cellWidth)
.style("fill", function(d) {return "d.color"})
.style("stroke", "none")
.style("stroke-width", "2px");
g.selectAll("g.legendCells")
.append("text")
.attr("class", "breakLabels")
.style("pointer-events", "none");
g.append("text")
.text(labelUnits)
.attr("y", -7);
redraw();
}
legend.inputScale = function(newScale) {
if (!arguments.length) return scale;
scale = newScale;
legendValues = [];
if (scale.invertExtent) {
//Is a quantile scale
scale.range().forEach(function(el) {
var cellObject = {color: el, stop: scale.invertExtent(el)}
legendValues.push(cellObject)
})
}
else {
scale.domain().forEach(function (el) {
var cellObject = {color: scale(el), stop: [el,""]}
legendValues.push(cellObject)
})
}
return this;
}
legend.scale = function(testValue) {
var foundColor = legendValues[legendValues.length - 1].color;
for (el in legendValues) {
if(testValue < legendValues[el].stop[1]) {
foundColor = legendValues[el].color;
break;
}
}
return foundColor;
}
legend.cellWidth = function(newCellSize) {
if (!arguments.length) return cellWidth;
cellWidth = newCellSize;
return this;
}
legend.cellHeight = function(newCellSize) {
if (!arguments.length) return cellHeight;
cellHeight = newCellSize;
return this;
}
legend.cellPadding = function(newCellPadding) {
if (!arguments.length) return cellPadding;
cellPadding = newCellPadding;
return this;
}
legend.cellExtent = function(incColor,newExtent) {
var selectedStop = legendValues.filter(function(el) {return el.color == incColor})[0].stop;
if (arguments.length == 1) return selectedStop;
legendValues.filter(function(el) {return el.color == incColor})[0].stop = newExtent;
return this;
}
legend.cellStepping = function(incStep) {
if (!arguments.length) return changeValue;
changeValue = incStep;
return this;
}
legend.units = function(incUnits) {
if (!arguments.length) return labelUnits;
labelUnits = incUnits;
return this;
}
legend.orientation = function(incOrient) {
if (!arguments.length) return orientation;
orientation = incOrient;
return this;
}
legend.labelFormat = function(incFormat) {
if (!arguments.length) return labelFormat;
labelFormat = incFormat;
if (incFormat == "none") {
labelFormat = function(inc) {return inc};
}
return this;
}
return legend;
}
Display the source blob
Display the rendered blob
Raw
world-110m2.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment