score:2
Accepted answer
you can get x, y coordinates from projection:
var projection = d3.geo.mercator()
.center([0, 5 ])
.scale(150);
projection([long, lat]);
for animation you could either use either d3 transitions example or css.
i have created a block for you: http://bl.ocks.org/ckothari/32149f15261b9c5c7a56c40f7f6b353d
edit sorry, just realized your question was about using http://datamaps.github.io/. let me know if you can use topojson, else i will delete my answer.
edit-2 to color country:
d3.tsv('data.csv', function(data){
g.selectall('path')
.filter(function(d){
return data.find(function(d1){
return d1.iso == d.properties.iso_a2;
})
})
.attr('class', 'selected');
//...
})
edit-3 chaining transitions updated example: https://bl.ocks.org/ckothari/raw/32149f15261b9c5c7a56c40f7f6b353d/
also see http://bl.ocks.org/mbostock/1125997.
Source: stackoverflow.com
Related Query
- D3 DataMaps (or jvectormap): How to put a custom object on map by coords
- How do I graph an individual line for each the groups within a Javascript map object using D3.js
- How can I put the Germany map on a svg in HTML? D3js
- how to put bird counts data in d3.js to draw bar-chart on google map
- How do I pass event variable/place a marker on the map - when binding done events in Datamaps & D3?
- How can I put a json object into a test file ("file.json") and then read that file in a d3.json("file.json", function(error, root))?
- How should I use map to get back some values of an object when the key are user input
- Making a bar chart in d3.js. How to put values in a single object into one bar?
- D3 map - How do I include SVG image files in JSON data to create custom location markers?
- Center a map in d3 given a geoJSON object
- How to create "svg" object without appending it?
- How to get absolute coordinates of object inside a <g> group?
- How to convert a jQuery object into a d3 object?
- How do I make a custom axis formatter for hours & minutes in d3.js?
- How to draw a line / link between two points on a D3 map based on latitude / longitude?
- how to load a json object instead of json file
- d3.js: how to use map function?
- How to put labels on the edges in the Dendrogram example?
- How to rotate an object around the center in d3.js
- How to do smooth transition for map reprojection in d3 js
- d3 How to trigger event on the object behind text
- How to animate an object along a GeoJSON path using d3.js?
- How to define custom time interval in d3.js
- How to put text data with d3.js
- How to store a JSON object loaded from a file?
- How to control the order of the layers on a map in d3js
- How to fix map boundaries on d3 cartographic raster reprojection?
- D3.js: How to combine 2 datasets in order to create a map and show values on.mouseover?
- How to divide a map into zipcodes using d3, javascript, and a json file?
- How to apply specific colors to D3.js map based on data values?
More Query from same tag
- Desired label in center of pie chart not rendering DC/D3.js
- nvd3 and d3.js Y axis rendering issue
- D3.js or EXT js for data visualization and why?
- nvd3 chart error when display:none
- Replacing one d3 visualisation with another d3 visualisation in same place?
- Stack a matrix in d3 without remapping to json
- d3js How to gather nodes by cluster un force layout?
- How can I get this svg circle to appear above my d3 path and not below?
- D3.js Force Layout - showing only part of a graph
- How to add horizontal line over y-axis in Plottable.js
- Draw line between two points in JavaScript?
- How to call a brush's on function
- Add <id> + <data> to an ARC of a D3-PIE-chart
- Getting color from external image using JavaScript
- Combining Multiple D3 Charts of Different Types
- How do I get my D3 map to zoom to a location?
- How do I control the links in my D3 tree?
- How do I get my topojson file to work with datamaps?
- D3 how to update text?
- Can I rotate the node labels in a Sankey Plot (networkD3::sankeyNetwork)?
- SVG links not working after transition executed in d3.js
- Trying to get only one tooltip to show on mouseover using d3
- d3 unable to access data by selected item in drop-down menu
- Incorrect axis domains in a D3 based bar graph
- Multilevel D3 Pie/Donut-chart doesnt show and no error messages
- How to assign consistent colours to node groups in Force Network d3.js
- Cubism: Series Not Rendering, However Getting Numeric Values
- No route matches [GET] "/flare.json"
- D3 Line Chart into bindPopup
- How to change the scale of axes in line chart using d3.js?