javascript - rendering d3.js library visualizations for colorbrewer -
i'm trying implement a tutorial called 'mapping minimum wages in europe' render d3 map of european union, visualizing data across different component nations.
when try execute last step of tutorial, incorporating colorbrewer d3.js library colour countries in different way based on data, using following function:
queue() .defer(d3.json, "eu.json") .defer(d3.json, "data.json") .await(ready); function ready(error, europe, data) { if (error) return console.error(error); var quantize = d3.scale.quantile() .domain(d3.extent(d3.values(data), function (d) { return d.value; })) .range(d3.range(6)), cb = "reds"; function fill(datum, index) { var iso = datum.properties.iso_n3, val = data[iso] && data[iso].value; if (val) { var c = colorbrewer[cb][6][quantize(val)]; return c; } else { return "lightgray"; } } var svg = d3.select("#container").append("svg") .attr("width", width) .attr("height", height); var eu = topojson.feature(europe, europe.objects.europe), countries = eu.features; projection.scale(1).translate([0, 0]) var b = path.bounds(eu), s = .95 / math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height), t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2]; projection.scale(s).translate(t); svg.selectall("path") .data(countries) .enter().append("path") .attr("d", path) .attr("class", "country") .classed("eu-country", iseucountry); svg.selectall(".eu-country") .style("fill", fill); }
the program crashes , browser loads nothing.
i've narrowed down code there.
perhaps more familiar javascript might able figure out going wrong here.
the files named in component:
queue() .defer(d3.json, "eu.json") .defer(d3.json, "data.json") .await(ready);
are in same directory index.html
file. isn't issue.
you need include coldbrewer, java #include
statement, in way
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
Comments
Post a Comment