Need help to make choropleth map of india

[Lalit Maurya]

Hi created a choropleth map of india to show state wise map (pls see the fiddle: https://jsfiddle.net/g044g4av/) but it not show state wise data.

thanks & regards,

Lalit

[steve rickus]

Your external scripts/css urls are not using fully qualified domain names, so none of the D3 library is loading...

[Lalit Maurya]

Thanks Steve,

I updated external scripts/css urls but still it doesn't show anything.

[Lalit Maurya]

Hi Steve,

I try to learn and make the same map like Sir Doug Dowson have created in their block (http://bl.ocks.org/dougdowson/9832019) and copy the same code to make map for India (http://blockbuilder.org/LalitMaurya/f210280f33002f02e40e32d331f477d9) but the map not showing data of various states, it only load first value of csv file (Andhra Pradesh) and all the states shows the same data.

regards,
Lalit

[steve rickus]

In your update() and mouseover() functions, you are passing (d) which is the actual node data, and then using hard-coded index [0] to calculate the fill value. Index 0 is always the first element in the array, so all the countries are getting the same color (and tooltips) as the first country.

Instead, your functions should pass (d, i) as in line #105, and the array index should be [i]. D3 functions get the index number as the second argument -- once you start using that it should work for you.

[Lalit Maurya]

Hi Steve sir,

Good Morning,

I changed array index to [i], but it still shows the same values and colors for all the states.

thanks,

Lalit

[steve rickus]

Did you change the function arguments to be (d, i) as well? That worked when I tried it.

And the same changes to the index need to be made in 4 or 5 places in the mouseover event logic...

[Lalit Maurya]

Thnx sir for your prompt response,

I changed function argument to be (d,i), but it still shows same values,

Pls see (http://blockbuilder.org/anonymous/d4c368a639e5f17663c1cdfabcbcf82b)

regards,

Lalit

[steve rickus]

I'm not sure what you changed, but the update function in map.js (lines 113-119) should be:

 function update(year){
     slider.property("value", year);
     d3.select(".year").text(year);
     countyShapes.style("fill", function(d, i) {
         return color(d.properties.years[year][i].rate)
     });
 }

[Lalit Maurya]

Thank you so much Steve Sir for your great help, Now map color scale is working perfectly fine. I think I not follow your instructions properly but now i clear how this update function is work, buy i have a one more problem my tooltip data is also not updated by state, it shows same values for all states. Thank you so much once again for your patience

regards,

Lalit Maurya

[steve rickus]

It is the same principle -- pass the index 'i' into the onMouseover function, and replace the static indexes "[0]" with "[i]"

[Lalit Maurya]

Hi Steve sir,

thanks for your update, i changed the Mouseover function accordingly, it shows changed results but states not shows appropriate, like in top, northern state is Jammu & Kashmir, but tooltip and color shows Madhya Pradesh data.

pls see the updated map:

http://blockbuilder.org/anonymous/d902532bb3184b4d322a3a3c5128181f

regard,
Lalit

On Thursday, April 27, 2017 at 2:02:13 PM UTC-7, steve rickus wrote:at

[steve rickus]

I did wonder about that, but since I'm not familiar with the counties I did not check it...

What that means is that your csv data is in a different order than the topo data -- and since we use [i] as the index it's getting the wrong county.

You will need to correlate the two datasets somehow, based on the name of the county. Sorry I can't give you more info than that without knowing the data...

[sandeep edara]

Hi Lalit,

Please find the updated code at below url :

https://drive.google.com/file/d/0B_gjBeSTG4WUbUpybDk4bkxmRFk/view?usp=sharing

Regards,

Sandeep.

[Lalit Maurya]

Hi Sandeep ji,

Thank you so much for your kind help and sorry for delay response

regards,
Lalit