d3 world map positioning - javascript

Hey guys I am completely new to d3 however I feel like what I am trying to do is simple.
I am literally using the src code from this example
http://techslides.com/demos/d3/worldmap-template.html
BUT I just want to center above the pacific ocean(california would be slightly to right of middle of box)
I came up with this by just trial and error
projection = d3.geo.mercator()
.translate([600, 400])
.center([-100, 5 ])
.scale(300);
which looks like
but I cant zoom out to view the whole original map, it just clips it to this area..
and lastly which is unrelated.. how can I color these countries in an efficient manner. I see in the json each country has its own color but I don't want to have to go in and manually change each one.
Thanks!!

Related

D3 Canvas globe with animated text

I am using d3 V4 with geoOrthographic to spin a 3d globe on a canvas.
I have followed and stitched a few example from bl.ocks.org to achieved that. I am new to d3.
So far I have the globe spinning and dots at some city location that appears and disappears accordingly with the globe rotation.
I have also attached the city name to the corresponding dots but I cannot managed to synchronies them with the dots.
So my city name does not appears or disappears at the same time with the dots.
here is a Codepen of my Globe.
Codepen Canvas Globe
I have made a Globe that works as I want to but in SVG
Codepen SVG Globe
however SVG is not possible for me because it is slowing down too much the application once added to it. So I have to go with canvas for performances reason.
I have tired a few solution/ideas from other post on Stackoverflow but could not make it work.
Thanks for the help
I refactored your code from your second example a little more precisely into your first example and it works:
outerArray.forEach(function(d) {
const coordinate = [d[0], d[1]];
const center = [width / 2, height / 2];
gdistance =d3.geoDistance(coordinate,projection.invert(center));
if(gdistance < 1.57079632679490) {
context.fillText(
d[2],
projection(d)[0],
projection(d)[1]
);
}
});
Updated codepen.

Map zooming with D3 and Datamaps

I need your help.
I'm using datamaps and I want to implement a zoom on a country. I can find loads of examples how I can achieve this, but the difference is, I want to be able to do this with a external button.
Let's say outside of my <div id="worldmap"></div> where the map is being rendered I have a button: <button data-location="AUS">.
How am I able to zoom using these values? I know the datamaps uses these short names (AUS = australia) to notate the name. I can also provide long lat coordinates if this is the way to do it.
Can somebody help me with this issue? I'm fairly new to D3 and datamaps.
One way could be that you translate and scale to your region of choice using translate scale as shown below.
function gotoAustralia(){
map.svg.selectAll(".datamaps-subunits").transition().duration(750).attr("transform", "scale(1.5)translate(-400,-100)");
}
function gotoSouthAmerica(){
map.svg.selectAll(".datamaps-subunits").transition().duration(750).attr("transform", "scale(1.5)translate(-50,-300)");
}
function reset(){
map.svg.selectAll(".datamaps-subunits").transition().duration(750).attr("transform", "");
}
working code here

Highcharts paint zero axis black

I have a Highchart bar chart with negative values (with the bars then going downwards). Now I would like to paint a black line for y=0 like so: .
I haven't found a trivial way to do this and I would like to avoid directly modifing the SVG or adding a fake line chart or something. Maybe someone knows better way? I've already played around with (minor)tickInterval and (minor)gridLineColor but that wouldn't solve my problem.
you can use plot lines for this like shown in this example http://jsfiddle.net/4rpNU/
yAxis:{
plotLines:{}
}
here is the api reference for it http://api.highcharts.com/highcharts#yAxis.plotLines
Hope this will be useful for you :)

d3.js - blank object when applying y-axis scale

I'm trying to apply a scale to y-axis in my chart, but when I do it I get a blank svg object.
I did the same thing with the x-axis and it's working fine.
Problem happens when you uncomment this section
// .y(function(d) {
// return yScale(d[1])
// })
http://jsfiddle.net/MgwR5/1/
Could anyone tell me what I'm doing wrong?
The area functions are y0() and y1(), not y(). Ref: D3 API documentation
Have a look at the js bin. I've put a bunch of comments in that should help and I've assumed that you wanted a line chart.
If you want to put axis's on your chart you should be looking to use the d3.svg.axis function. It does most of the heavy lifting for you. You also need to make space for the axis try using some padding and margins (you might want to look at this example or the example on the js bin d3 page - use the link at the top of the google groups d3 page). You also probably want to separate out your axis's and your plot by using svg's group ('g').
Cheers

enlarge / animate map or change viewBox

i have this http://bl.ocks.org/nkhine/raw/3150901/ where if you click on a country the code re-renders the map (only USA, UK and Afganistan topo files present)
i am stuck on how to animate the 'country' so that it 'moves' to the center of the screen and also fit the map to the users' viewport?
what i am doing is to fadeout and then remove the 'svg g' element for the id='countries' https://gist.github.com/nkhine/3150901#file-client-js-L120 and then add the id='country' within which i am drawing the country based on the topo file provided.
i tried to remove the entire svg and re-create it, but this does not 'feel' to be the correct approach!
what would be the correct way to alter the viewBox without having to redraw the entire SVG?
any advice much appreciated
I believe you need to change your .on("click") function to translate the image using the centroid of the country that has been clicked on, see the d3 example here http://bl.ocks.org/mbostock/2206590.

Categories