@ -1,28 +1,28 @@
const defaultColor = "#555555"
const languages = {
tamil : { name : "Tamil" , color : "#75d795" , code : "ta" , : [ ] } ,
malayalam : { name : "Malayalam" , color : "#ff7c7c" , code : "ml" , : [ ] } ,
kannada : { name : "Kannada" , color : "#ffe77c" , code : "kn" , : [ ] } ,
telugu : { name : "Telugu" , color : "#7c9dff" , code : "te" , : [ ] } ,
marathi : { name : "Marathi" , color : "#e0ff7c" , code : "mr" , : [ ] } ,
konkani : { name : "Konkani" , color : "#9b7cff" , code : "gom" , : [ ] } ,
hindi : { name : "Hindi" , color : "#d17cff" , code : "hi" , : [ ] } ,
gujarati : { name : "Gujarati" , color : "#7cffee" , code : "gu" , : [ ] } ,
oriya : { name : "Oriya" , color : "#9bcc9f" , code : "or" , : [ ] } ,
bengali : { name : "Bengali" , color : "#bf9a77" , code : "bn" , : [ ] } ,
punjabi : { name : "Punjabi" , color : "#e84a35" , code : "pa" , : [ ] } ,
mizo : { name : "Mizo" , color : "#a6a4de" , code : "lus" , : [ ] } ,
assamese : { name : "Assamese" , color : "#c9535b" , code : "as" , : [ ] } ,
bhojpuri : { name : "Bhojpuri" , color : "#b3b876" , code : "bho" , : [ ] } ,
manipuri : { name : "Manipuri" , color : "#c9afad" , code : "mni-Mtei" , : [ ] } ,
dogri : { name : "Dogri" , color : "#9595e6" , code : "doi" , : [ ] } ,
nepali : { name : "Nepali" , color : "#71998e" , code : "ne" , : [ ] } ,
urdu : { name : "Urdu" , color : "#3fa179" , code : "ur" , : [ ] } ,
tulu : { name : "Tulu" , color : "#dedc52" , code : "tcy" , : [ ] } ,
maithali : { name : "Maithali" , color : "#4472a6" , code : "mai" , : [ ] } ,
sindhi : { name : "Sindhi" , color : "#e89931" , code : "sd" , : [ ] } ,
awadhi : { name : "Awadhi" , color : "#847fb5" , code : "awa" , : [ ] } ,
tamil : { name : "Tamil" , color : "#75d795" , code : "ta" , text_align : "start" , districts: [ ] } ,
malayalam : { name : "Malayalam" , color : "#ff7c7c" , code : "ml" , text_align : "end" , districts: [ ] } ,
kannada : { name : "Kannada" , color : "#ffe77c" , code : "kn" , text_align : "middle" , districts: [ ] } ,
telugu : { name : "Telugu" , color : "#7c9dff" , code : "te" , text_align : "start" , districts: [ ] } ,
marathi : { name : "Marathi" , color : "#e0ff7c" , code : "mr" , text_align : "middle" , districts: [ ] } ,
konkani : { name : "Konkani" , color : "#9b7cff" , code : "gom" , text_align : "end" , districts: [ ] } ,
hindi : { name : "Hindi" , color : "#d17cff" , code : "hi" , text_align : "middle" , districts: [ ] } ,
gujarati : { name : "Gujarati" , color : "#7cffee" , code : "gu" , text_align : "middle" , districts: [ ] } ,
oriya : { name : "Oriya" , color : "#9bcc9f" , code : "or" , text_align : "middle" , districts: [ ] } ,
bengali : { name : "Bengali" , color : "#bf9a77" , code : "bn" , text_align : "middle" , districts: [ ] } ,
punjabi : { name : "Punjabi" , color : "#e84a35" , code : "pa" , text_align : "middle" , districts: [ ] } ,
mizo : { name : "Mizo" , color : "#a6a4de" , code : "lus" , text_align : "middle" , districts: [ ] } ,
assamese : { name : "Assamese" , color : "#c9535b" , code : "as" , text_align : "middle" , districts: [ ] } ,
bhojpuri : { name : "Bhojpuri" , color : "#b3b876" , code : "bho" , text_align : "end" , districts: [ ] } ,
manipuri : { name : "Manipuri" , color : "#c9afad" , code : "mni-Mtei" , text_align : "middle" , districts: [ ] } ,
dogri : { name : "Dogri" , color : "#9595e6" , code : "doi" , text_align : "middle" , districts: [ ] } ,
nepali : { name : "Nepali" , color : "#71998e" , code : "ne" , text_align : "middle" , districts: [ ] } ,
urdu : { name : "Urdu" , color : "#3fa179" , code : "ur" , text_align : "middle" , districts: [ ] } ,
tulu : { name : "Tulu" , color : "#dedc52" , code : "tcy" , text_align : "end" , districts: [ ] } ,
maithali : { name : "Maithali" , color : "#4472a6" , code : "mai" , text_align : "middle" , districts: [ ] } ,
sindhi : { name : "Sindhi" , color : "#e89931" , code : "sd" , text_align : "middle" , districts: [ ] } ,
awadhi : { name : "Awadhi" , color : "#847fb5" , code : "awa" , text_align : "middle" , districts: [ ] } ,
} ;
// Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
@ -213,9 +213,14 @@ function stateOrDistrictOrLanguage(d) {
// const mapWidth = document.getElementById("indiaMap").getAttribute("width")
// const mapHeight = document.getElementById("indiaMap").getAttribute("height")
cons mapWidth = /*window.innerWidth - */ document . querySelector ( "#svgContainer" ) . offsetWidth * 0.85 ;
le mapWidth = /*window.innerWidth - */ document . querySelector ( "#svgContainer" ) . offsetWidth * 0.85 ;
// const mapHeight = document.querySelector("#svgContainer").offsetHeight;
const mapHeight = ( window . innerHeight - document . querySelector ( "#svgContainer" ) . getBoundingClientRect ( ) . top ) ;
let mapHeight = ( window . innerHeight - document . querySelector ( "#svgContainer" ) . getBoundingClientRect ( ) . top ) ;
if ( window . innerWidth <= 768 ) {
mapWidth *= 1.5 ;
mapHeight *= 1.5 ;
}
const svg = d3 . select ( "#svgContainer" )
. append ( 'svg' )
@ -227,7 +232,12 @@ const svg = d3.select("#svgContainer")
// .call(responsivefy);
function drawMap ( world ) {
const projection = d3 . geoMercator ( ) . fitSize ( [ mapWidth , mapHeight ] , world )
let projection = null ;
if ( window . innerWidth > 1366 ) {
projection = d3 . geoMercator ( ) . fitSize ( [ mapWidth , mapHeight ] , world )
} else {
projection = d3 . geoMercator ( ) . fitWidth ( mapWidth , world )
}
const path = d3 . geoPath ( ) . projection ( projection ) ;
requestAnimationFrame ( ( ) => {
@ -235,9 +245,9 @@ function drawMap(world) {
const bbox = newSvg . node ( ) . getBBox ( ) ;
const originalWidth = + newSvg . attr ( "width" ) ;
newSvg
//
// .attr("width", mapHeight.toString())
//
. attr ( "width" , bbox . width )
. attr ( "height" , bbox . height )
// .style("display", "block")
// .style("max-height", "100%"); // optional: keep it scalable in a flexbox
@ -252,6 +262,11 @@ function drawMap(world) {
states . append ( "path" )
. attr ( "d" , path )
. attr ( "class" , d => stateOrDistrictOrLanguage ( d ) )
. attr ( "id" , function ( d ) {
if ( stateOrDistrictOrLanguage ( d ) === "language" ) {
return languages [ d . properties . lang _name . toLowerCase ( ) ] . code + "langMap" ;
}
} )
. attr ( "fill" , function ( d ) {
if ( stateOrDistrictOrLanguage ( d ) === "language" ) {
return languages [ d . properties . lang _name . toLowerCase ( ) ] . color ;
@ -272,7 +287,8 @@ function drawMap(world) {
. append ( "title" ) // Tooltip
. text ( d => d . properties . district ) ;
states . append ( "text" )
const textItems = svg . selectAll ( "g.textItem" ) . data ( world . features ) . enter ( ) . append ( "g" ) ;
textItems . append ( "text" )
. attr ( "x" , function ( d ) {
if ( stateOrDistrictOrLanguage ( d ) == "language" ) {
rtv = projection ( d3 . geoCentroid ( d ) ) [ 0 ] ;
@ -280,7 +296,10 @@ function drawMap(world) {
rtv -= 20 ;
}
if ( d . properties . lang _name == "Tamil" ) {
rtv += 20 ;
rtv -= 10 ;
}
if ( d . properties . lang _name == "Kannada" && window . innerWidth <= 768 ) {
rtv += 15 ;
}
if ( d . properties . lang _name == "Maithali" ) {
rtv += 10 ;
@ -298,10 +317,15 @@ function drawMap(world) {
if ( stateOrDistrictOrLanguage ( d ) == "language" ) {
rtv = projection ( d3 . geoCentroid ( d ) ) [ 1 ]
if ( d . properties . lang _name == "Kannada" ) {
rtv += 15 ;
if ( window . innerWidth > 768 ) {
rtv += 10 ;
}
}
if ( d . properties . lang _name == "Tamil" ) {
rtv -= 20 ;
rtv -= 10 ;
}
if ( d . properties . lang _name == "Malayalam" ) {
rtv += 10 ;
}
if ( d . properties . lang _name == "Gujarati" ) {
rtv -= 10 ;
@ -315,12 +339,15 @@ function drawMap(world) {
if ( d . properties . lang _name == "Bengali" ) {
rtv += 25 ;
}
if ( d . properties . lang _name == "Hindi" ) {
if ( window . innerWidth > 768 ) {
rtv += 3 * parseFloat ( getComputedStyle ( document . documentElement ) . fontSize ) ; // rem
}
}
return rtv
}
} )
. attr ( "text-anchor" , "middle" )
. attr ( "fill" , "black" )
. attr ( "class" , "translationText" )
. attr ( "id" , function ( d ) {
if ( stateOrDistrictOrLanguage ( d ) == "language" ) {
@ -335,18 +362,18 @@ function drawMap(world) {
} else {
d3 . select ( this ) . remove ( ) // Only add this attribute if the element is a language
}
} ) ;
} )
. attr ( "text-anchor" , d => typeof d . properties . lang _name != "undefined" && languages [ d . properties . lang _name . toLowerCase ( ) ] . text _align )
. attr ( "fill" , "black" )
// Romanization
state s. append ( "text" )
textItem s. append ( "text" )
. attr ( "x" , d => stateOrDistrictOrLanguage ( d ) == "language" ?
document . getElementById ( d . properties . lang _code + "Text" ) . getAttribute ( "x" ) :
projection ( d3 . geoCentroid ( d ) ) [ 0 ] )
. attr ( "y" , d => stateOrDistrictOrLanguage ( d ) == "language" ?
parseFloat ( document . getElementById ( d . properties . lang _code + "Text" ) . getAttribute ( "y" ) ) + parseFloat ( getComputedStyle ( document . getElementsByClassName ( 'translationText' ) [ 0 ] ) . getPropertyValue ( 'font-size' ) ) :
projection ( d3 . geoCentroid ( d ) ) [ 1 ] )
. attr ( "text-anchor" , "middle" )
. attr ( "fill" , "black" )
. attr ( "class" , "romanizationText" )
. attr ( "id" , function ( d ) {
if ( stateOrDistrictOrLanguage ( d ) == "language" ) {
@ -359,18 +386,18 @@ function drawMap(world) {
if ( ! stateOrDistrictOrLanguage ( d ) == "language" ) {
d3 . select ( this ) . remove ( ) // Only add this attribute if the element is a language
}
} ) ;
} )
. attr ( "text-anchor" , d => typeof d . properties . lang _name != "undefined" && languages [ d . properties . lang _name . toLowerCase ( ) ] . text _align )
. attr ( "fill" , "black" )
// Language
state s. append ( "text" )
textItem s. append ( "text" )
. attr ( "x" , d => stateOrDistrictOrLanguage ( d ) == "language" ?
document . getElementById ( d . properties . lang _code + "Text" ) . getAttribute ( "x" ) :
projection ( d3 . geoCentroid ( d ) ) [ 0 ] )
. attr ( "y" , d => stateOrDistrictOrLanguage ( d ) == "language" ?
parseFloat ( document . getElementById ( d . properties . lang _code + "Text" ) . getAttribute ( "y" ) ) - parseFloat ( getComputedStyle ( document . getElementsByClassName ( 'translationText' ) [ 0 ] ) . getPropertyValue ( 'font-size' ) ) :
projection ( d3 . geoCentroid ( d ) ) [ 1 ] )
. attr ( "text-anchor" , "middle" )
. attr ( "fill" , "black" )
. attr ( "class" , "languageText" )
. attr ( "id" , function ( d ) {
if ( stateOrDistrictOrLanguage ( d ) == "language" ) {
@ -391,11 +418,30 @@ function drawMap(world) {
d3 . select ( this ) . remove ( ) // Only add this attribute if the element is a language
}
} )
. attr ( "text-anchor" , d => typeof d . properties . lang _name != "undefined" && languages [ d . properties . lang _name . toLowerCase ( ) ] . text _align )
. attr ( "fill" , "black" )
let allLangs = [ ]
const coordinates = [ 77.69916967457782 , 23.389970772934166 ] ;
const [ xCoord , yCoord ] = projection ( coordinates ) ;
// Add a listener to toggle the language display when a language is hovered on the map
document . querySelectorAll ( ".language" ) .
forEach ( function ( element ) {
element . addEventListener ( "mouseover" , toggleLanguageDisplay ) ;
element . addEventListener ( "mouseout" , toggleLanguageDisplay ) ;
} ) ;
// Remove all 'g' elements that have no children (they don't have a language, translation, or romanization). This must mean they accidentally got created when I created the 'textItems' variable
document . querySelectorAll ( "g" ) .
forEach ( function ( element ) {
if ( element . childElementCount == 0 ) {
element . remove ( )
}
} ) ;
// svg.append("text")
// .attr("x", xCoord)
// .attr("y", yCoord)
Aadhavan Srinivasan