style circle fill none stroke steelblue style script type text javascript src https d3js org d3 v7 min js script script src d3js org topojson v1 min js script script var width 960 var height 500 let projection d3 geoMercator scale 600 translate 1400 680 var path d3 geoPath projection projection var svg d3 select body append svg attr width width attr height height d3 json https notebook xbdev net var resources topojson us json then function usdata console log data ready svg selectAll circle data topojson feature usdata usdata objects counties features enter append circle attr transform function d let val path centroid d 0 path centroid d 1 let r translate val return r attr r function d return Math sqrt path area d Math PI console log finished data console log finished script style circle fill none stroke steelblue style script type text javascript src https d3js org d3 v7 min js script script src d3js org topojson v1 min js script script var width 960 var height 500 let projection d3 geoMercator scale 600 translate 1400 680 center 0 0 var path d3 geoPath projection projection var svg d3 select body append svg attr width width attr height height d3 json https notebook xbdev net var resources topojson us json then function usdata console log processing ready svg selectAll circle data topojson feature usdata usdata objects counties features enter append circle attr transform function d let val path centroid d 0 path centroid d 1 let r translate val return r attr r function d return Math sqrt path area d Math PI on mouseover onMouseover function onMouseover e d let pixelArea path area d let bounds path bounds d let centroid path centroid d let measure path measure d svg selectAll text data d join enter enter append text attr x 20 attr y 20 append text update update text function d return centroid exit end onMouseover console log finished script style circle fill none stroke steelblue style script type text javascript src https d3js org d3 v7 min js script script src d3js org topojson v1 min js script script var width 960 var height 500 let projection d3 geoMercator scale 600 translate 1400 680 center 0 0 var path d3 geoPath projection projection var svg d3 select body append svg attr width width attr height height d3 json https notebook xbdev net var resources topojson us json then function usdata console log processing ready svg selectAll circle data topojson feature usdata usdata objects counties features enter append circle style stroke blue attr transform function d let val path centroid d 0 path centroid d 1 let r translate val return r attr r function d return Math sqrt path area d Math PI on mouseover onMouseover function onMouseover e d let pixelArea path area d let bounds path bounds d let centroid path centroid d let measure path measure d select the current circle d3 select this style fill red svg selectAll text data d join enter enter append text attr x 20 attr y 20 append text update update text function d return centroid exit end onMouseover console log finished script style state stroke fff stroke linejoin round stroke width 2px style script type text javascript src https d3js org d3 v7 min js script script src https d3js org topojson v3 js script script const svg d3 select body append svg attr viewBox 0 0 975 610 d3 json https cdn jsdelivr net npm us atlas 3 states albers 10m json then us const path d3 geoPath const color d3 scaleQuantize 1 10 d3 schemeBlues 9 const statesContainer svg append g const states statesContainer selectAll path data topojson feature us us objects states features join path attr class state attr fill color Math random 10 attr d path on click function event d const x y width height this getBBox First move the state to the front so it s in front of others const state d3 select this attr transform origin x width 2 px y height 2 px remove statesContainer append state node d properties expanded d properties expanded state transition duration 500 attr transform d properties expanded scale 1 25 scale 1 states append title text d d properties name script
0 var height 500 let projection d3 geoMercator scale 600 translate 1400 680 center 0 0 var path d3 geoPath projection projection var svg d3 select body append svg attr width width attr height height d3 json https notebook xbdev net var resources topojson us json then function usdata console log processing ready svg selectAll circle data topojson feature usdata usdata objects counties features enter append circle style stroke blue attr transform function d let val path centroid d 0 path centroid d 1 let r translate val return r attr r function d return Math sqrt path area d Math PI on mouseover onMouseover function onMouseover e d let pixelArea path area d let bounds path bounds d let centroid path centroid d let measure path measure d select the current circle d3 select this style fill red svg selectAll text data d join enter enter append text attr x 20 attr y 20 append text update update text function d return centroid exit end onMouseover console log finished script style state stroke fff stroke linejoin round stroke width 2px style script type text javascript src https d3js org d3 v7 min js script script src https d3js org topojson v3 js script script const svg d3 select body append svg attr viewBox 0 0 975 610 d3 json https cdn jsdelivr net npm us atlas 3 states albers 10m json then us const path d3 geoPath const color d3 scaleQuantize 1 10 d3 schemeBlues 9 const statesContainer svg append g const states statesContainer selectAll path data topojson feature us us objects states features join path attr class state attr fill color Math random 10 attr d path on click function event d const x y width height this getBBox First move the state to the front so it s in front of others const state d3 select this attr transform origin x width 2 px y height 2 px remove statesContainer append state node d properties expanded d properties expanded state transition duration 500 attr transform d properties expanded scale 1 25 scale 1 states append title text d d properties name script