Skip to content

Commit

Permalink
Merge pull request #30 from eurostat/development
Browse files Browse the repository at this point in the history 
updated placename thresholds & fix for mobile placename scaling. Neth…
  • Loading branch information
@joewdavies
joewdavies authored Dec 8, 2020
2 parents d14014d + 3a8340f commit 3c3cda3
Show file tree
Hide file tree
Showing 8 changed files with 142 additions and 164 deletions.
137 changes: 61 additions & 76 deletions build/gridviz.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions build/gridviz.min.js
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions examples/europe/5km/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
let legendHeight;
//mobile
if (window.screen.width < 600) {
legendWidth = window.screen.width - 10; //margin
legendWidth = window.screen.width - 30; //margin
legendHeight = 50;
}

Expand All @@ -37,15 +37,15 @@
.cellCount(true)
.colorField("Population") // csv column which you wish to visualize
//sizeColumn() "value" // csv column which you wish to visualize
.nuts2json(true) //loads borders topojson
.nuts2json(false) //loads borders topojson
.center([4369, 3230]) //EPSG=3035
// .height(window.innerHeight - 5)
// .width(window.innerWidth)
.showPlacenames(true)
.backgroundColor("#fcf6c2")
.borderColor("#000")
.colorSchemeName("interpolateRdBu") //d3-scale-chromatic
.reverseColorScheme(true)
.borderColor("#ffffff")
.colorSchemeName("interpolateViridis") //d3-scale-chromatic
// .reverseColorScheme(true)

.colorScaleName("scaleSequentialSqrt")
.colorSchemeSelector(true)
Expand Down
9 changes: 5 additions & 4 deletions examples/netherlands/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,15 @@
.nuts2json(false) // does not support 28992 - use method to load custom geojson
//.nuts2jsonCountry("NL")
.center([1720, 3900])//EPSG=28992 with 2 zeros removed
.showPlacenames(true)
.placenamesEPSG(28992)
.placenamesCountry("NL")
.placenameThresholds({ //"scale": population
"1500": 100000,
"1500": 200000,
"1250": 100000,
"1000": 50000,
"500": 10000,
"250": 500
"1000": 100000,
"500": 50000,
"250": 10000
})
.height(window.innerHeight)
.width(window.innerWidth)
Expand Down
2 changes: 1 addition & 1 deletion examples/portugal/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
let legendHeight;
//mobile
if (window.screen.width < 600) {
legendWidth = window.screen.width - 10; //margin
legendWidth = window.screen.width - 30; //margin
legendHeight = 50;
}

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "gridviz",
"version": "1.0.14",
"version": "1.0.15",
"description": "Visualization tool for gridded statistics",
"keywords": [
"statistics",
Expand Down
7 changes: 7 additions & 0 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,10 @@ Here's a barebones example that loads a CSV containing population data for a 5 k
.build()
```


## API


| Method | Type | Default | Description |
| ------------------------------- | ----------- | ------------------ | ------------------------------------------------------------------------------------------------ |
| viewer.container([value]) | HTMLElement | document.body | The DOM element passed to the THREE.js renderer. |
Expand All @@ -95,8 +98,10 @@ Here's a barebones example that loads a CSV containing population data for a 5 k

</br>


### Data


| Method | Type | Default | Description |
| ------------------------------------ | ---------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| viewer.gridData([value]) | Object {url:string, cellSize: int} | null | Object containing the URL of the CSV file and its cellSize (this will determine the point size in three.js). A 1 km² grid will have a cellSize of 1000. |
Expand Down Expand Up @@ -152,6 +157,8 @@ Here's a barebones example that loads a CSV containing population data for a 5 k
| **legendConfig**.cells | int | 5 | Number of cells (for cell legends only) |
| **legendConfig**.shapeWidth | int | 30 | width in pixels of legend cell (for cell legends only) |

<br>

## Developer docs

For source code documentation see [docs](https://eurostat.github.io/gridviz/docs/)
135 changes: 60 additions & 75 deletions src/js/gridviz.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,12 +312,11 @@ export function viewer(options) {

//set viewer resolution from user input
if (!viewer.resolution_) {
if (viewer._mobile) {
let cellScale = d3scale.scaleLinear().domain()
viewer.resolution_ = viewer.gridData_[0].cellSize
} else {
viewer.resolution_ = viewer.gridData_[0].cellSize
}
viewer.resolution_ = viewer.gridData_[0].cellSize;
}

if (viewer.showPlacenames_ && !viewer.placenameThresholds_) {
defineDefaultPlacenameThresholds();
}

//defines raycaster threshold and point size. See GridConfig typedef.
Expand Down Expand Up @@ -886,6 +885,51 @@ export function viewer(options) {
}
}

function defineDefaultPlacenameThresholds() {
let r = viewer.resolution_;
// scale : population
viewer.placenameThresholds_ = {
[r * 1024]: "2000000",
[r * 512]: "2000000",
[r * 256]: "2000000",
[r * 128]: "1000000",
[r * 64]: "1000000",
[r * 32]: "500000",
[r * 16]: "100000",
[r * 8]: "10000",
[r * 4]: "5000",
[r * 2]: "1000",
[r]: "10",
}
// if (scale > 0 && scale < r) {
// return populationFieldName + ">10";
// } else if (scale > r && scale < r * 2) {
// return populationFieldName + ">1000";
// } else if (scale > r * 2 && scale < r * 4) {
// return populationFieldName + ">2500";
// } else if (scale > r * 4 && scale < r * 8) {
// return populationFieldName + ">5000";
// } else if (scale > r * 8 && scale < r * 16) {
// return populationFieldName + ">10000";
// } else if (scale > r * 16 && scale < r * 32) {
// return populationFieldName + ">200000";
// } else if (scale > r * 32 && scale < r * 64) {
// return populationFieldName + ">300000";
// } else if (scale > r * 64 && scale < r * 128) {
// return populationFieldName + ">300000";
// } else if (scale > r * 128 && scale < r * 256) {
// return populationFieldName + ">1000000";
// } else if (scale > r * 256 && scale < r * 512) {
// return populationFieldName + ">1000000";
// } else if (scale > r * 512 && scale < r * 1024) {
// return populationFieldName + ">2000000";
// } else if (scale > r * 1024) {
// return populationFieldName + ">2000000";
// } else {
// return "1=1";
// }
}

/**
* @function loadGrid
* @description request grid, save it to the cache, define the scales used for colouring and sizing, then add the cells (points) to the scene
Expand Down Expand Up @@ -934,7 +978,7 @@ export function viewer(options) {

//giving us our new cell size
let newResolution = difference;

viewer.originalResolution = viewer.resolution_;
viewer.resolution_ = newResolution;
grid.cellSize = newResolution;
gridConfig.pointSize = newResolution;
Expand Down Expand Up @@ -2369,6 +2413,8 @@ export function viewer(options) {
removePlacenamesFromScene();
addPlacenamesToScene(res.features);
}
} else {
removePlacenamesFromScene();
}
},
err => {
Expand Down Expand Up @@ -2398,8 +2444,14 @@ export function viewer(options) {
* @param {*} scale
*/
function getPopulationParameterFromScale(scale) {
if (viewer._mobile) {
//scale up to desktop values
let factor = viewer.originalResolution / viewer.resolution_
scale = scale * factor;
}

let populationFieldName = CONSTANTS.placenames.populationField;
//user-defined thresholds
//build query string from thresholds
if (viewer.placenameThresholds_) {
let thresholds = Object.keys(viewer.placenameThresholds_);
for (let i = 0; i < thresholds.length; i++) {
Expand All @@ -2416,73 +2468,6 @@ export function viewer(options) {
return populationFieldName + ">" + viewer.placenameThresholds_[t];
}
}
} else {
//defaultthresholds
let r = viewer.resolution_

//mobile
if (viewer._mobile) {
if (scale > 0 && scale < r) {
return populationFieldName + ">10";
} else if (scale > r && scale < r * 2) {
return populationFieldName + ">1000";
} else if (scale > r * 2 && scale < r * 4) {
return populationFieldName + ">2500";
} else if (scale > r * 4 && scale < r * 8) {
return populationFieldName + ">5000";
} else if (scale > r * 8 && scale < r * 16) {
return populationFieldName + ">10000";
} else if (scale > r * 16 && scale < r * 32) {
return populationFieldName + ">200000";
} else if (scale > r * 32 && scale < r * 64) {
return populationFieldName + ">300000";
} else if (scale > r * 64 && scale < r * 128) {
return populationFieldName + ">300000";
} else if (scale > r * 128 && scale < r * 256) {
return populationFieldName + ">1000000";
} else if (scale > r * 256 && scale < r * 512) {
return populationFieldName + ">1000000";
} else if (scale > r * 512 && scale < r * 1024) {
return populationFieldName + ">2000000";
} else if (scale > r * 1024) {
return populationFieldName + ">2000000";
} else {
return "1=1";
}

} else {
//desktop
if (scale > 0 && scale < r) {
return populationFieldName + ">10";
} else if (scale > r && scale < r * 2) {
return populationFieldName + ">1000";
} else if (scale > r * 2 && scale < r * 4) {
return populationFieldName + ">2500";
} else if (scale > r * 4 && scale < r * 8) {
return populationFieldName + ">5000";
} else if (scale > r * 8 && scale < r * 16) {
return populationFieldName + ">10000";
} else if (scale > r * 16 && scale < r * 32) {
return populationFieldName + ">200000";
} else if (scale > r * 32 && scale < r * 64) {
return populationFieldName + ">300000";
} else if (scale > r * 64 && scale < r * 128) {
return populationFieldName + ">300000";
} else if (scale > r * 128 && scale < r * 256) {
return populationFieldName + ">1000000";
} else if (scale > r * 256 && scale < r * 512) {
return populationFieldName + ">1000000";
} else if (scale > r * 512 && scale < r * 1024) {
return populationFieldName + ">2000000";
} else if (scale > r * 1024) {
return populationFieldName + ">2000000";
} else {
return "1=1";
}

}


}
}

Expand Down

0 comments on commit 3c3cda3

Please sign in to comment.