We Keep Coding

Creating multiple progress circles d3.js

I'm looking to create multiple progress circles. (So, draw 3 circles from one data set)
I've been trying to adapt from this example, but as you will see, I've gone seriously wrong somewhere.
First steps I took was to change all the datums to data, as I will want the option to handle the data dynamically. Then, I tried to simplify the code so it was clearer/easier for me to understand. (I'm a d3 newbie!)
And now, I'm not sure what's going on, and was hoping someone could help me get to the end result?
Here is a fiddle and my code;
/*global d3*/
var width = 240,
height = 125,
min = Math.min(width, height),
oRadius = min / 2 * 0.8,
iRadius = min / 2 * 0.85,
color = d3.scale.category20();
var arc = d3.svg.arc()
.outerRadius(oRadius)
.innerRadius(iRadius);
var pie = d3.layout.pie().value(function(d) {
return d;
}).sort(null);
var data = [
[20],
[40],
[60]
];
// draw and append the container
var svg = d3.select("#chart").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("width", width).attr("height", height);
svg.append('g')
.attr('transform', 'translate(75,62.5)')
.append('text').attr('text-anchor', 'middle').text("asdasdasdas")
// enter data and draw pie chart
var path = svg.selectAll("path")
.data(pie)
.enter().append("path")
.attr("class", "piechart")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc)
.each(function(d) {
this._current = d;
})
function render() {
// add transition to new path
svg.selectAll("path")
.data(pie)
.transition()
.duration(1000)
.attrTween("d", arcTween)
// add any new paths
svg.selectAll("path")
.data(pie)
.enter().append("path")
.attr("class", "piechart")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc)
.each(function(d) {
this._current = d;
})
// remove data not being used
svg.selectAll("path")
.data(pie).exit().remove();
}
render();
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
Thanks all!

You have a problem with where you are drawing your separate charts. All you need to do is add a translate to each one so they are in the center of their containers.
Add this after you create the paths :
.attr('transform', 'translate(' + width/2 + ',' +height/2 + ')')
width and height here are the containers dimensions, this will move each chart to the center of their container.
Update fiddle : http://jsfiddle.net/thatOneGuy/dbrehvtz/2/
Obviously, you probably know, if you want to add more values to each pie, just edit the data. For example :
var data = [
[20, 100, 100, 56, 23, 20, 100, 100, 56, 23 ],
[40],
[60]
];
New fiddle : http://jsfiddle.net/thatOneGuy/dbrehvtz/3/

Placing Lat/Long on a azimuthalEqualArea map with D3

I'm trying to plot some lat/long points onto a map, but I can't get them to appear in the correct place.
The dots should be in San Francisco. I have a JSfiddle of the code.
var width = 400,
height = 400;
var projection = d3.geo.azimuthalEqualArea()
.clipAngle(180 - 1e-3)
.scale(100)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("http://bl.ocks.org/mbostock/raw/4090846/world-50m.json", function(error, world) {
svg.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});
var latlong = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838312,-122.0423922]},"properties":{"timestampMs":1415894666875}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838474,-122.0423972]},"properties":{"timestampMs":1415894601718}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838474,-122.0423972]},"properties":{"timestampMs":1415894536288}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838411,-122.0424015]},"properties":{"timestampMs":1415894471356}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.383878,-122.0423925]},"properties":{"timestampMs":1415894406257}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838317,-122.0423856]},"properties":{"timestampMs":1415894326769}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838287,-122.0423933]},"properties":{"timestampMs":1415894261810}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.383829,-122.0423847]},"properties":{"timestampMs":1415894196224}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838765,-122.0424141]},"properties":{"timestampMs":1415894131768}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838177,-122.0423668]},"properties":{"timestampMs":1415894066809}}]};
// THESE ARE THE POINTS THAT ARE NOT BEING PLACED CORRECTLY
svg.selectAll("circle")
.data(latlong.features).enter()
.append("circle")
.attr("cx", function (d) { return projection(d.geometry.coordinates)[1]; })
.attr("cy", function (d) { return projection(d.geometry.coordinates)[0]; })
.attr("r", "2px")
.attr("fill", "red");

You've specified the latitude and longitude the wrong way round for d3.geo and you're also taking the output the wrong way round. It is counter to the way that they are displayed by convention (N/S then E/W) but it is more consistent with a drawing convention of across then up/down.
From path.projection in the D3 API Geo reference:
A projection function takes a two-element array of numbers
representing the coordinates of a location, [longitude, latitude], and
returns a similar two-element array of numbers representing the
projected pixel position [x, y].
To fix this, I've reversed the coordinates of your FeatureCollection:
var latlong = {"type":"FeatureCollection","features":[
{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.0423922,37.3838312]},"properties":{"timestampMs":1415894666875}},
etc...
and reversed the coordinates of your plot.
.attr("cx", function (d) { return projection(d.geometry.coordinates)[0]; })
.attr("cy", function (d) { return projection(d.geometry.coordinates)[1]; })
Everything else was fine. Amended JSFiddle here. So often it's the little things!

Zooming datasets in d3.js

I have overlayed two datasets, a boundary map and a point map in d3.js. I want to be able to zoom both datasets at the same time. With the current code, only the point map responds to the zoom. How can I zoom both datasets at the same time
The code is shown below
var canvas = d3.select("body").append("svg")
.attr("width",260)
.attr("height",400)
d3.json("/Maps/iowastate.json",function (data){
var group = canvas.selectAll("g")
.data(data.features)
.enter()
.append("g")
var projection =d3.geo.mercator()
.scale(250)
//.translate([0,0]);
var path = d3.geo.path().projection(projection);
var areas = group.append("path")
.attr("d", path)
.attr("class","area")
.attr("fill","black");
d3.csv("/Maps/detectors.csv",function (d){
var group = canvas.selectAll("g")
.data(d)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.StartLong,d.StartLat])[0];
})
.attr("cy", function(d,i) {
return projection([d.StartLong,d.StartLat])[1];
})
.attr("r", 0.1)
.style("fill", "red");
//console.log(projection(d[0].StartLat))
var zoom = d3.behavior.zoom()
.on("zoom",function(){
group.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
group.selectAll("path")
.attr("d", path.projection(projection));
});
canvas.call(zoom)
})
var zoom = d3.behavior.zoom()
.on("zoom",function(){
group.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
group.selectAll("path")
.attr("d", path.projection(projection));
});
canvas.call(zoom)
})

You are applying the right modifications, but twice to the same set of elements instead of the two different layers. To make it work, keep a reference to the other group (e.g. by using different variable names) and apply the transformations to both groups.

topoJSON on D3: map doesn't show (but it works on www.mapshaper.org)

I'm trying to replicate http://bl.ocks.org/mbostock/4060606 using a UK Counties map.
I followed the following steps - pretty much what is suggested on http://bost.ocks.org/mike/map:
1) I downloaded the shapefile from Ordnance Survey and extracted some data using qGIS
2) when ready, I translated the shapefile into GeoJSON using ogr2ogr
3) I converted the GeoJSON into topoJSON making sure the IDs were preserved
I pretty much copied the original example for the choropleth from mbostock. However, instead of a nice map, I get a... circle. I wonder if I'm doing some errors with the projection?
For completeness, this is the javascript part of the page:
var width = 960,
height = 600;
var rateById = d3.map();
var quantize = d3.scale.quantize()
.domain([0, .15])
.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
var projection = d3.geo.albers()
.center([0, 55.4])
.rotate([4.4, 0])
.parallels([50, 60])
.scale(50)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
queue()
.defer(d3.json, "uk.topo.json")
.defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
.await(ready);
function ready(error, uk) {
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(uk, uk.objects.counties).features)
.enter().append("path")
// .attr("class", function(d) { return quantize(rateById.get(d.id)); })
.attr("class", "q5-9" )
.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);
}
d3.select(self.frameElement).style("height", height + "px");
The counties topoJSON is too big to be pasted here, but roughly it's:
{"type":"Topology","objects":{"counties":{"type":"GeometryCollection","bbox":[220956.7,35190.3,655967.1,586683],"geometries":[{"type":"Polygon","properties":{"name":"Buckinghamshire"},"id":11901,"arcs":[[-1,-2,-3,-4,-5,-6]]},{"type":"Polygon","properties":{"name":"Cambridgeshire"},"id":1386,"arcs":[[-7,-8,-9,-10,-11,-12,-13,-14]]},{"type":"Polygon","properties":{"name":"Cumbria"},"id":13244,"arcs":[[-15,-16,-17]]},{"type":"Polygon","properties":{"name":"Derbs"},"id":13688,"arcs":[[-18,-19,-20,-21],[-22]]},...},"arcs":[[[5876,2688],[-67,53],[-21,101],[7,65],[96,66],[-7,66],[-78,69],[-234,12],[-5,42],...},"transform":{"scale":[43.5053905390539,55.15478547854785],"translate":[220956.7,35190.3]}}
I'm not a great expert here so I might be doing something fundamentally wrong. However, I have one certainty:
the UK counties map is correct, as it displays correctly on http://www.mapshaper.org/
Any idea? I'm happy to paste the complete files if needed.
Thanks!

The coordinates seem to be already projected (i.e. cartesian coordinates).
In this case you should use
d3.geo.path().projection(null);
But make sure you scale your topojson first to the desired size
topojson --width=960 --height=500 --margin=10 --cartesian -o out.json -- in.shp
Or reproject the shapefile first using ogr2ogr
ogr2ogr -t_srs EPSG:4326 out.shp in.shp

Why does my US Map crash the browser in Firefox? D3.js

This is an image of my d3 graph.
On Firefox, unlike Chrome and IE, the browser seemed to buck when pressed to paint the SVG and would crash. When the graph was removed, it was no problem and the page didn't break. Again, on every other browser it was no problem. There were no errors logged. Only browser death.
Works in IE 10 and Chrome 32 >> latest browsers. Is crashing in Firefox 26.0.
(function(){
var width = 900,
height = 500;
var projection = d3.geo.albersUsa()
.scale(1070)
.translate([460, height / 2]);
var path = d3.geo.path()
.projection(projection)
.pointRadius(2);
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
queue()
.defer(d3.json, "../us.json")
.defer(d3.tsv, "../long_lat.tsv")
.await(ready);
function ready(error, us, long_lat) {
if (error){
console.log(error);
}
svg.append("path")
.datum(topojson.feature(us, us.objects.land))
.attr("class", "land")
.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);
svg.append("path")
.datum({type: "MultiPoint", coordinates: long_lat})
.attr("class", "points")
.attr("d", path)
.style('fill', 'rgb(247, 150, 29)');
};
})();
my tsv data:
0 1
-73.427242 40.871873
-73.996700 40.750000
-73.992363 40.740134
-87.525537 37.942482
-89.564576 44.501590
-118.819400 34.192900
-73.897400 42.774700
-101.886595 35.149460
-71.769200 42.249000
-71.887880 41.807116
-73.991458 40.737710
-78.953169 43.053301
-72.484121 42.787935
-122.615410 45.332182
...