diff --git a/index.js b/index.js index 7c27975..aebd9c6 100644 --- a/index.js +++ b/index.js @@ -23,6 +23,8 @@ const urduColor = "#3fa179" // Urdu const tuluColor = "#dedc52" // Tulu const maithaliColor = "#4472a6" // Maithali +const unavailLangColor = "#555555" + // Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel const colorMap = { "Tamil Nadu": tamilColor, @@ -39,12 +41,12 @@ const colorMap = { "Jharkhand": hindiColor, // DEFAULT "West Bengal": bengaliColor, "Assam": AssameseColor, - "Meghalaya": hindiColor, // DEFAULT + "Meghalaya": unavailLangColor, // DEFAULT "Tripura": bengaliColor, "Mizoram": mizoColor, "Manipur": manipuriColor, - "Nagaland": hindiColor, // DEFAULT - "Arunachal Pradesh": hindiColor, // DEFAULT + "Nagaland": unavailLangColor, // DEFAULT + "Arunachal Pradesh": unavailLangColor, // DEFAULT "Sikkim": nepaliColor, "Bihar": bhojpuriColor, "Madhya Pradesh": hindiColor, @@ -108,6 +110,45 @@ const districtColorMap = { // Should override state colors "Hapur": urduColor, } +// Assuming 'features' is your array of GeoJSON polygon features +function getOuterBoundary(features) { + // Merge all polygons into a single multipolygon + const merged = turf.union(turf.featureCollection(features)); + + // If we have a multipolygon, extract its coordinates + const coordinates = merged.geometry.type === 'MultiPolygon' + ? merged.geometry.coordinates + : [merged.geometry.coordinates]; + + // Extract just the outer ring of each polygon (first ring in each polygon) + const outerRings = coordinates.map(polygon => polygon[0]); + + // Create a new Feature with a MultiLineString geometry containing the outer rings + const boundary = turf.multiLineString(outerRings); + +console.log(boundary); + return boundary; +} + +function getOuterBoundaryPolygon(features) { + try { + // Combine all polygons using turf.union + let combined = features[0]; + for (let i = 1; i < features.length; i++) { + combined = turf.union(turf.featureCollection([combined, features[i]])); + } + return combined; + } catch (error) { + console.error("Error processing GeoJSON:", error); + return null; + } +} + + + + + + function stateOrDistrict(d) { if (typeof d.properties.district !== 'undefined') { return "district" @@ -134,10 +175,12 @@ function drawMap(world) { districtColorMap[d.properties.district] : colorMap[d.properties.st_nm]) .each(function(d) { - if (!colorToDistrict.hasOwnProperty(this.getAttribute("fill"))) { - colorToDistrict[this.getAttribute("fill")] = [d] - } else { - colorToDistrict[this.getAttribute("fill")].push(d) + if (stateOrDistrict(d) == "district") { + if (!colorToDistrict.hasOwnProperty(this.getAttribute("fill"))) { + colorToDistrict[this.getAttribute("fill")] = [d] + } else { + colorToDistrict[this.getAttribute("fill")].push(d) + } } }) .append("title") // Tooltip @@ -152,6 +195,30 @@ function drawMap(world) { .attr("class", "districtText") .attr("id", d => d.properties.district+"Text") .text(d => d.properties.district); + + + + // Example usage + let geojson = { + "type": "FeatureCollection", + "features": colorToDistrict[hindiColor] + }; + console.log(geojson) + + console.log(getOuterBoundaryPolygon(geojson.features)); + + // Draw the boundary + svg.append("path") + .datum(getOuterBoundaryPolygon(geojson.features)) + .attr("d", path) + .attr("fill", "none") + .attr("stroke", "red") + .attr("stroke-width", 2); + + const bbox = turf.bbox(getOuterBoundaryPolygon(geojson.features)); + console.log("Bounding box:", bbox); + + } d3.json("india_with_districts.json").then(drawMap)