UK map using postcodes for the different regions script type text javascript src https d3js org d3 v7 min js script script src https d3js org topojson v1 min js script style feature fill 777 style script async var width 600 height 800 var projection d3 geoAlbers center 0 55 4 rotate 4 4 0 parallels 50 60 scale 800 5 translate width 2 height 2 var path d3 geoPath projection projection var svg d3 select body append svg attr width width attr height height console log here let uk await d3 json https cdn jsdelivr net gh roblascelles uk postcode map master data uk postcode area json function dd uk push data console log data let data await fetch https cdn jsdelivr net gh roblascelles uk postcode map master data uk postcode area json let uk await data json svg selectAll subunit data topojson feature uk uk objects uk postcode area features enter append path attr class feature attr d path console log finihed console log ready script ref https github com roblascelles uk postcode map wiki Displaying the data UK map using postcodes for the different regions Add focused regions hover over the different regions to get the tooltip title script type text javascript src https d3js org d3 v7 min js script script src https d3js org topojson v1 min js script style feature fill 777 mesh fill none stroke fff stroke width 5px stroke linejoin round style script async var width 600 height 800 var projection d3 geoAlbers center 0 55 4 rotate 4 4 0 parallels 50 60 scale 800 5 translate width 2 height 2 var path d3 geoPath projection projection var svg d3 select body append svg attr width width attr height height console log here let uk await d3 json https cdn jsdelivr net gh roblascelles uk postcode map master data uk postcode area json function dd uk push data console log data let data await fetch https cdn jsdelivr net gh roblascelles uk postcode map master data uk postcode area json let uk await data json svg selectAll subunit data topojson feature uk uk objects uk postcode area features enter append path attr class feature attr d path append svg title attr transform function d return translate path centroid d attr dy 35em text function d return d id svg append path datum topojson mesh uk uk objects uk postcode area function a b return a b attr class mesh attr d path console log ready script ref https github com roblascelles uk postcode map wiki Displaying the data UK map using postcodes for the different regions Add focused regions hover over the different regions to get the tooltip title script type text javascript src https d3js org d3 v7 min js script script src https d3js org topojson v1 min js script style feature fill 777 mesh fill none stroke 000 stroke width 2px stroke linejoin round style script async var width 600 height 800 var projection d3 geoAlbers center 0 55 4 rotate 4 4 0 parallels 50 60 scale 800 5 translate width 2 height 2 var path d3 geoPath projection projection var svg d3 select body append svg attr width width attr height height console log here let uk await d3 json https cdn jsdelivr net gh roblascelles uk postcode map master data uk postcode area json function dd uk push data console log data let data await fetch https cdn jsdelivr net gh roblascelles uk postcode map master data uk postcode area json let uk await data json svg selectAll subunit data topojson feature uk uk objects uk postcode area features enter append path attr class feature attr d path var areas AB AL B BA BB BD BH BL BN BR BS BT CA CB CF CH CM CO CR CT CV CW DA DD DE DG DH DL DN DT DY E EC EH EN EX FK FY G GL GU HA HD HG HP HR HS HU HX IG IP IV KA KT KW KY L LA LD LE LL LN LS LU M ME MK ML N NE NG NN NP NR NW OL OX PA PE PH PL PO PR RG RH RM S SA SE SG SK SL SM SN SO SP SR SS ST SW SY TA TD TF TN TQ TR TS TW UB W WA WC WD WF WN WR WS WV YO ZE Just for pretty colors var myScale d3 scaleLinear range yellow green unknown ccc border lines clear line between regions svg append path datum topojson mesh uk uk objects uk postcode area function a b return a b attr class mesh attr d path sets the region colors svg selectAll postcode_area data topojson feature uk uk objects uk postcode area features enter append path attr class postcode_area attr d path style fill function d let indexof areas indexOf d id if indexof undefined indexof 0 return myScale indexof areas length if indexof return 444 else return AAA adds the extra tooltips append svg title attr transform function d return translate path centroid d attr dy 35em text function d return d id testing var myScale2 d3 scaleLinear range yellow green unknown ccc console log myScale2 0 2 console log ready script ref https github com roblascelles uk postcode map wiki Displaying the data
https d3js org d3 v7 min js script script src https d3js org topojson v1 min js script style feature fill 777 mesh fill none stroke 000 stroke width 2px stroke linejoin round style script async var width 600 height 800 var projection d3 geoAlbers center 0 55 4 rotate 4 4 0 parallels 50 60 scale 800 5 translate width 2 height 2 var path d3 geoPath projection projection var svg d3 select body append svg attr width width attr height height console log here let uk await d3 json https cdn jsdelivr net gh roblascelles uk postcode map master data uk postcode area json function dd uk push data console log data let data await fetch https cdn jsdelivr net gh roblascelles uk postcode map master data uk postcode area json let uk await data json svg selectAll subunit data topojson feature uk uk objects uk postcode area features enter append path attr class feature attr d path var areas AB AL B BA BB BD BH BL BN BR BS BT CA CB CF CH CM CO CR CT CV CW DA DD DE DG DH DL DN DT DY E EC EH EN EX FK FY G GL GU HA HD HG HP HR HS HU HX IG IP IV KA KT KW KY L LA LD LE LL LN LS LU M ME MK ML N NE NG NN NP NR NW OL OX PA PE PH PL PO PR RG RH RM S SA SE SG SK SL SM SN SO SP SR SS ST SW SY TA TD TF TN TQ TR TS TW UB W WA WC WD WF WN WR WS WV YO ZE Just for pretty colors var myScale d3 scaleLinear range yellow green unknown ccc border lines clear line between regions svg append path datum topojson mesh uk uk objects uk postcode area function a b return a b attr class mesh attr d path sets the region colors svg selectAll postcode_area data topojson feature uk uk objects uk postcode area features enter append path attr class postcode_area attr d path style fill function d let indexof areas indexOf d id if indexof undefined indexof 0 return myScale indexof areas length if indexof return 444 else return AAA adds the extra tooltips append svg title attr transform function d return translate path centroid d attr dy 35em text function d return d id testing var myScale2 d3 scaleLinear range yellow green unknown ccc console log myScale2 0 2 console log ready script ref https github com roblascelles uk postcode map wiki Displaying the data