Quick fork of https://gist.github.com/mbostock/5925375 to see if OriDomi plays nicely with d3.js. Please note the original source from Mike Bostock for any praise or admiration. All errors and mistakes please attribute to me.
This variation of the unemployment choropleth uses TopoJSON 1.2’s new --projection argument to created projected TopoJSON. This example also uses the -e argument to join the county geometries with a TSV file of unemployment rates, simplifying the implementation and eliminating the need to load multiple data files.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.counties {
fill: none;
}
.states {
fill: none;
stroke: #fff;
stroke-linejoin: round;
}
.q0-9 { fill:rgb(247,251,255); }
.q1-9 { fill:rgb(222,235,247); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="./oridomi.js"></script>
<div id="container" style="width:960px">
<div id="testtext" style="position: absolute;top: 0px;left: 0px;pointer-events: none;font-size: 100px;">
<p>OriDomi + d3</p>
</div>
</div>
<script>
var width = 960,
height = 500;
var quantize = d3.scale.quantize()
.domain([0, .15])
.range(d3.range(9).map(function (i) { return "q" + i + "-9"; }));
var path = d3.geo.path()
.projection(null);
d3.select("#container").insert("div","#testtext")
.attr("class", "d3oridomi");
var svg = d3.select(".d3oridomi").append("svg")
.attr("width", width)
.attr("height", height);
var folded;
d3.json("us.json", function (error, us) {
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("class", function (d) { return quantize(d.properties.rate); })
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function (a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
folded = makeOriDomi();
folded.accordion(75).reset().twist(30).reset().fracture(50).reset().accordion(75);
});
function makeOriDomi() {
var createdOriDomi = new OriDomi(".d3oridomi", { vPanels: 10, shading: 'hard' })
return createdOriDomi;
};
</script>
</body>