diff --git a/index.js b/index.js index b83e2d2..a56fafc 100644 --- a/index.js +++ b/index.js @@ -1,14 +1,27 @@ const svg = d3.select("svg") const map1 = new Map(); -const color1 = "#75d795" -const color2 = "#ff7c7c" -const color3 = "#ffe77c" -const color4 = "#7c9dff" -const color5 = "#e0ff7c" -const color6 = "#9b7cff" +const color1 = "#75d795" // Tamil +const color2 = "#ff7c7c" // Malayalam +const color3 = "#ffe77c" // Kannada +const color4 = "#7c9dff" // Telugu +const color5 = "#e0ff7c" // Marathi +const color6 = "#9b7cff" // Konkani +const color7 = "#d17cff" // Hindi +const color8 = "#" // Gujarati +const color9 = "#" // Marwari +const color10 = "#" // Oriya +const color11 = "#" // Bengali +const color12 = "#" // Punjabi +const color13 = "#" // Mizo +const color14 = "#" // Assamese +const color15 = "#" // Bhojpuri +const color16 = "#" // Manipuri +const color17 = "#" // Dogri (near Kashmir) +const color13 = "#" // Tulu + // Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel const colorMap = { "Tamil Nadu": color1, @@ -18,31 +31,34 @@ const colorMap = { "Telangana": color4, "Maharashtra": color5, "Goa": color2, - "Odisha": color3, - "Gujarat": color1, - "Rajasthan": color3, - "Chhattisgarh": color1, + "Odisha": color10, + "Gujarat": color8, + "Rajasthan": color9, + "Chhattisgarh": colorr7, "Jharkhand": color2, - "West Bengal": color1, - "Assam": color2, + "West Bengal": color11, + "Assam": color14, "Meghalaya": color3, "Tripura": color4, - "Mizoram": color1, - "Manipur": color3, + "Mizoram": color14, + "Manipur": color16, "Nagaland": color1, "Arunachal Pradesh": color4, "Sikkim": color2, "Bihar": color3, - "Madhya Pradesh": color2, - "Uttar Pradesh": color4, + "Madhya Pradesh": color7, + "Uttar Pradesh": color7, "Uttarakhand": color2, "Haryana": color1, - "Punjab": color4, + "Punjab": color12, "Himachal Pradesh": color3, "Ladakh": color1, "Jammu and Kashmir": color2, } +//const districtColorMap = { // Should override state colors +// "Dakshina Kannada": + const colors9 = ["#75d795", "#EFDFD8", "#D5F6FB", "#E5ECF8", "#F0EBD8", "#F7DFC2", "#B4D9EF", "#F8C57C", "#A4D8D8"] function drawMap(world) { @@ -59,7 +75,7 @@ function drawMap(world) { states.append("path") .attr("d", path) .attr("class", "state") - .attr("fill", d => colorMap[d.properties.name]) + .attr("fill", d => colorMap[d.properties.st_nm]) .append("title") // Tooltip .text(d => d.properties.district) .each(function(d) { @@ -75,36 +91,8 @@ function drawMap(world) { .attr("class", "stateText") .attr("id", d => d.properties.district+"Text") .text(d => d.properties.district); - - // Draw the map -// svg.selectAll("path") -// .data(world.features) -// .enter() -// .append("path") -// .attr("d", path) -// .attr("class", "state") -// .attr("fill", d => colorMap[d.properties.name]) -// .append("title") // Tooltip -// .text(d => d.properties.name) -// .each(function(d) { -// map1.set(d.properties.name, d3.geoCentroid(d)); -// }) -// .each(function(d) { -// const [x, y] = projection(d3.geoCentroid(d)); // Get centroid -// -// d3.select(this.parentNode) // Select the parent <svg> or <g> container -// .append("text") // Append text immediately after the path -// .attr("x", x) -// .attr("y", y) -// .attr("text-anchor", "middle") -// .attr("font-size", "12px") -// .attr("fill", "black") -// .text(d.properties.name); -// }); - } -// Load GeoJSON file -d3.json("india_with_districts.json").then(drawMap) +d3.json("india_with_districts_without_states.json").then(drawMap) console.log(map1)