Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improvements to country maps viz #2801

Merged
merged 1 commit into from
May 24, 2017
Merged

Improvements to country maps viz #2801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions superset/assets/javascripts/explorev2/stores/visTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -580,6 +580,7 @@ const visTypes = {
['select_country'],
['entity'],
['metric'],
['linear_color_scheme'],
],
},
],
Expand Down
16 changes: 10 additions & 6 deletions superset/assets/visualizations/country_map.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,31 @@
position: relative;
}

.background {
.country_map .background {
fill: rgba(255,255,255,0);
pointer-events: all;
}

.map-layer {
.country_map .map-layer {
fill: #fff;
stroke: #aaa;
}

.effect-layer {
.country_map .effect-layer {
pointer-events: none;
}

text {
.country_map text {
font-weight: 300;
color: #333333;
}

text.big-text {
.country_map text.big-text {
font-size: 30px;
font-weight: 400;
color: #333333;
}
}

.country_map path.region {
cursor: pointer;
}
65 changes: 27 additions & 38 deletions superset/assets/visualizations/country_map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,21 @@ import { colorScalerFactory } from '../javascripts/modules/colors';


function countryMapChart(slice, payload) {
// CONSTANTES
// CONSTANTS
const fd = payload.form_data;
let path;
let g;
let mapLayer;
let bigText;
let resultText;
const color = d3.scale.category20();
const container = slice.container;
const data = payload.data;
const colorForScaler = ['#90eb9d', '#ffff8c', '#f9d057', '#f29e2e', '#e76818', '#d7191c'];
const colorsByMetrics = colorScalerFactory(colorForScaler, data, function (value) {
return value.metric;

const colorScaler = colorScalerFactory(fd.linear_color_scheme, data, v => v.metric);
const colorMap = {};
data.forEach((d) => {
colorMap[d.country_id] = colorScaler(d.metric);
});
const colorFn = d => colorMap[d.properties.ISO] || 'none';

let centered;
path = d3.geo.path();
Expand All @@ -30,20 +32,7 @@ function countryMapChart(slice, payload) {
container.css('height', slice.height());
container.css('width', slice.width());

const getIdOfCountry = function getIdOfCountry(feature) {
return feature && feature.properties && feature.properties.NAME_0 ? feature.properties.ID_0 : 0;
};

const nameLength = function nameLength(feature) {
const idOfPays = getIdOfCountry(feature);
return idOfPays;
};

const fillFn = function fillFn(d) {
return color(getIdOfCountry(d));
};

const clicked = function clicked(d) {
const clicked = function (d) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could use es6 syntax: const clicked = (d) => {}

let x;
let y;
let k;
Expand Down Expand Up @@ -88,7 +77,7 @@ function countryMapChart(slice, payload) {
.attr('transform', 'translate(0,0)translate(' + resultTextX + ',' + resultTextY + ')');
};

const selectAndDisplayNameOfRegion = function selectAndDisplayNameOfRegion(feature) {
const selectAndDisplayNameOfRegion = function (feature) {
let name = '';
if (feature && feature.properties) {
if (feature.properties.ID_2) {
Expand All @@ -100,27 +89,26 @@ function countryMapChart(slice, payload) {
bigText.text(name);
};

const updateMetrics = function updateMetrics(region) {
const updateMetrics = function (region) {
if (region.length > 0) {
resultText.text(d3.format(',')(region[0].metric));
}
};


const mouseover = function mouseover(d) {
const result = data.filter(function (region) {
if (region.country_id === d.properties.ISO) {
return region;
}
return undefined;
});
d3.select(this).style('fill', d3.rgb(colorsByMetrics(result[0].metric)));
const mouseenter = function (d) {
// Darken color
let c = colorFn(d);
if (c !== 'none') {
c = d3.rgb(c).darker().toString();
}
d3.select(this).style('fill', c);
selectAndDisplayNameOfRegion(d);
const result = data.filter(region => region.country_id === d.properties.ISO);
updateMetrics(result);
};

const mouseout = function mouseout() {
mapLayer.selectAll('path').style('fill', function (d) { return centered && d === centered ? '#D5708B' : fillFn(d); });
const mouseout = function () {
d3.select(this).style('fill', colorFn);
bigText.text('');
resultText.text('');
};
Expand All @@ -132,7 +120,7 @@ function countryMapChart(slice, payload) {
.on('click', clicked);

g = div.append('g');
mapLayer = g.append('g')
const mapLayer = g.append('g')
.classed('map-layer', true);
bigText = g.append('text')
.classed('big-text', true)
Expand All @@ -143,7 +131,8 @@ function countryMapChart(slice, payload) {
.attr('x', 20)
.attr('y', 60);

d3.json('/static/assets/visualizations/countries/' + payload.form_data.select_country.toLowerCase() + '.geojson', function (error, mapData) {
const url = `/static/assets/visualizations/countries/${fd.select_country.toLowerCase()}.geojson`;
d3.json(url, function (error, mapData) {
const features = mapData.features;
const center = d3.geo.centroid(mapData);
let scale = 150;
Expand All @@ -162,16 +151,16 @@ function countryMapChart(slice, payload) {
offset = [offsetWidth, offsetHeigth];
projection = d3.geo.mercator().center(center).scale(scale).translate(offset);
path = path.projection(projection);
color.domain([0, d3.max(features, nameLength)]);

// Draw each province as a path
mapLayer.selectAll('path')
.data(features)
.enter().append('path')
.attr('d', path)
.attr('class', 'region')
.attr('vector-effect', 'non-scaling-stroke')
.style('fill', fillFn)
.on('mouseover', mouseover)
.style('fill', colorFn)
.on('mouseenter', mouseenter)
.on('mouseout', mouseout)
.on('click', clicked);
});
Expand Down