OPTIONAL CHALLENGE: Interactively Linking Map and Chart

The Map and Chart interactively linked.

The optional challenge is to create the following:

A webpage that holds both the Overijssel Bar chart and the municipal Proportional Point Symbol map;
If the user moves the mouse over a bar in the graph, the bar colour changes, and the corresponding municipality in the map is also highlighted;
The attributes of the highlighted municipality are shown to the user.

You can see a working example by following this link. Note that this is only one way to achieve the required results, other solutions are possible! Below we show some of the building blocks needed, you should figure the rest out yourself, and test the results in your browser...

PLACEMENT: In order to place the graph and map next to each other, you can use different lay-out possibilities. The simplest way of doing that is styling the HTML <div> element we use to hold the map. You can change the CSS style of the mapDiv to include CSS positioning properties. The meaning of the most useful properties is:
- position: this lets you define positioning absolute or relative to other divs.
- left & top: the location with respect to the upper left corner of the window (when position: absolute) or with respect to the previous div (when position: relative).
- width & height: the size of the element (in pixels)
- overflow: if the content is larger than fits the div, it will not be shown if this is set to hidden. Other settings are visible (will overflow), scroll (will make scrollbars) and auto (let browser decide).
- border: the border look (width, type and colour). You can also set the fill of the div in a similar way.
INTERACTIVITY: This is triggered by an event connected to the appropriate selection. D3 supports interactivity of all its selections, by the use of selection.on(type,listener). This adds an event listener to each element in the current selection, reacting on the specified type of event. The type is a string event type name, such as "click", "mouseover", "mouseout", or "submit". Any DOM event type supported by your browser may be used. The specified listener is invoked in a similar manner as any other operator functions, but the first element passed is now the event (not the current data as in other D3 functions), because the standard javascript events work like that. The data is now added as the second element returned, in such a way:
```
    selectedObject
        .on("mouseover", function(event, d) {
            ... code run per data instance, e.g. to show information , change bar colour...
        );
```
The interactivity can of course be improved by having the reverse highlighting also working (mouse in map highlights bar), by having the data displayed, etcetera.

SHOWING ATTRIBUTES: There are many ways to achieve this. The simplest might be to have the interactivity (see above) of elements trigger a simple Javascript alert("message"), which will just pop up an alert window with the message string. In our solution we employ a somewhat nicer solution of creating yet another <div>, selecting that using D3, and putting the attributes in as HTML content by using the D3 selection.html("html content") method.

We will make the unscrambled code for the working example available below, after a few days. Happy puzzling...!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="lib/d3.js"></script>
	<style>
		.chart {
			background-color: rgb(245,245,245);
			padding: 5px;
		}
		.chart rect {
			fill: steelblue;
		}
		.axis text {
			fill: black;
			font: 10px sans-serif;
		}
		.axis path,
		.axis line {
			fill: none;
			stroke: #000;
		}
		/*CSS to set position & style of infoDiv*/
		#infoDiv {
			position: absolute;
			left: 520px;
			top: 360px;
			width: 400px;
			height: 188px;
			font: 18px sans-serif;
		}
		/*CSS to set position & style of map SVG*/
		#mapSVG {
			background-color: rgb(245,245,245);
			position: absolute;
			left: 520px;
			top: 8px;
		}
		.municipality {
			fill: rgb(255,240,214);
			stroke: rgb(255,159,227);
		}
	</style>
</head><body>

<!-- create svg for showing chart:-->
<svg class="chart"  id="chart"></svg>
<!-- create svg for showing map:-->
<!-- position set in CSS:-->
<svg class="mapSVG" id="mapSVG"></svg>
<!-- create a separate div for showing attributes:-->
<!-- position set in CSS:-->
<div id="infoDiv"></div>

<script type="text/javascript">
// select the divs by id:
const mapDiv = d3.select("#mapDiv");
const infoDiv = d3.select("#infoDiv");

// function to set highlights and infoDiv content based on mouse events,
// used in the SVG created below
function doHighlights(gmCode, gmName, gmPop, highlight) {
	if (highlight) { // if true then highlight & show info
		d3.select("#bar_" + gmCode).style("fill", "red");
		d3.select("#poly_" + gmCode).style("fill", "red");
		infoDiv.html(gmCode + ": " + gmName + "<br>" + gmPop + " inhabitants.");
	} else { // if false then remove highlight & info
		d3.select("#bar_" + gmCode).style("fill", "steelblue");
		d3.select("#poly_" + gmCode).style("fill", "rgb(255,240,214)");
		infoDiv.html("");
	}
}

// code for the bar chart:
d3.csv("data/overijssel_population.csv").then(function(data) {
	// in here is the callback function, inside it you have access to the loaded data object
	const svgwidth = 500;
	const barHeight = 20;
	const axisHeight = 30;
	const svgheight = (barHeight * data.length) + axisHeight;
	const xScale = d3.scaleLinear()
			.domain([0, d3.max(data, function (d) { return +d.population })])
			.range([0, svgwidth])
	;
	const theAxis = d3.axisBottom(xScale);
	// we now have to select the chart svg by id (because there are more SVG elements):
	let chart = d3.select("#chart")
			.attr("width", svgwidth)
			.attr("height", svgheight)
	;
	let bar = chart.selectAll("g")
			.data(data).enter().append("g")
			.attr("transform", function (d, i) { return "translate(0," + i * barHeight + ")"; })
	;
	bar.append("rect")
			.attr("width", function (d) { return xScale(+d.population) })
			.attr("height", barHeight - 1)
			// give it an id based on municipal code, to be able to select it:
			.attr("id", function(d) {return "bar_" + d.code})
			// add a mouseover event handler...
			.on("mouseover", function(event,d) {
				let gmCode = d.code;
				let gmName = d.name;
				let gmPop = d.population;
				// call function (defined above) to highlight things:
				doHighlights(gmCode, gmName, gmPop, true);
			})
			// ...and a mouseout one:
			.on("mouseout", function(event,d) {
				let gmCode = d.code;
				doHighlights(gmCode, undefined, undefined, false);
			})
	;
	chart.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(0," + (svgheight-barHeight) + ")")
			.call(theAxis);
	} //end of callback function .then()
); //end of d3.csv

// Code for the map:
const mapWidth = 400;
const mapHeight = 350;
// we select the map svg by id (because there are more SVG elements):
const mapSVG = d3.select("#mapSVG")
		.attr("width", mapWidth)
		.attr("height", mapHeight)
;
// Define Mercator proj at data center (lon-lat):
const myProj = d3.geoMercator()
		.center([6.40, 52.48])
		.scale(16000)
		.translate([mapWidth / 2, mapHeight / 2])
;
//Define svg path generator using the projection:
const svgpath = d3.geoPath().projection(myProj);
// asynchronously load geojson using a Promise:
d3.json("data/overijssel.json").then(
		// this function is run when the Promise is fulfilled:
		function(geojson) {
			mapSVG.selectAll("path")
					// for each d create an svgpath that uses the geoPath generator:
					.data(geojson.features).enter().append("path")
					.attr("d", svgpath)
					// give it a class, so it's styled by the CSS:
					.attr("class", "municipality")
					// create id based on gm_code, to be able to select it:
					.attr("id", function(d) {return "poly_" + d.properties.code})
					// adding a mouseover event handler...
					.on("mouseover", function(event,d) {
						let gmName = d.properties.name;
						let gmCode = d.properties.code;
						let gmPop = d.properties.population;
						// call function (defined above) to highlight things:
						doHighlights(gmCode, gmName, gmPop, true);
					})
					// ...and a mouseout
					.on("mouseout", function(event,d) {
						let gmCode = d.properties.code;
						doHighlights(gmCode, undefined, undefined, false);
					})
			;
		} //end of callback function .then()
); //end of d3.json

</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

<!DOCTYPE html>

<head>

<style>

.chart {

background-color: rgb(245,245,245);

padding: 5px;

}

.chart rect {

fill: steelblue;

}

.axis text {

fill: black;

font: 10px sans-serif;

}

.axis path,

.axis line {

fill: none;

stroke: #000;

}

/*CSS to set position & style of infoDiv*/

#infoDiv {

position: absolute;

left: 520px;

top: 360px;

width: 400px;

height: 188px;

font: 18px sans-serif;

}

/*CSS to set position & style of map SVG*/

#mapSVG {

background-color: rgb(245,245,245);

position: absolute;

left: 520px;

top: 8px;

}

.municipality {

fill: rgb(255,240,214);

stroke: rgb(255,159,227);

}

</style>

</head><body>

// select the divs by id:

const mapDiv = d3.select("#mapDiv");

const infoDiv = d3.select("#infoDiv");

// function to set highlights and infoDiv content based on mouse events,

// used in the SVG created below

function doHighlights(gmCode, gmName, gmPop, highlight) {

if (highlight) { // if true then highlight & show info

d3.select("#bar_" + gmCode).style("fill", "red");

d3.select("#poly_" + gmCode).style("fill", "red");

infoDiv.html(gmCode + ": " + gmName + "<br>" + gmPop + " inhabitants.");

} else { // if false then remove highlight & info

d3.select("#bar_" + gmCode).style("fill", "steelblue");

d3.select("#poly_" + gmCode).style("fill", "rgb(255,240,214)");

infoDiv.html("");

}

// code for the bar chart:

d3.csv("data/overijssel_population.csv").then(function(data) {

// in here is the callback function, inside it you have access to the loaded data object

const svgwidth = 500;

const barHeight = 20;

const axisHeight = 30;

const svgheight = (barHeight * data.length) + axisHeight;

const xScale = d3.scaleLinear()

.domain([0, d3.max(data, function (d) { return +d.population })])

.range([0, svgwidth])

;

const theAxis = d3.axisBottom(xScale);

// we now have to select the chart svg by id (because there are more SVG elements):

let chart = d3.select("#chart")

.attr("width", svgwidth)

.attr("height", svgheight)

;

let bar = chart.selectAll("g")

.data(data).enter().append("g")

.attr("transform", function (d, i) { return "translate(0," + i * barHeight + ")"; })

;

bar.append("rect")

.attr("width", function (d) { return xScale(+d.population) })

.attr("height", barHeight - 1)

// give it an id based on municipal code, to be able to select it:

.attr("id", function(d) {return "bar_" + d.code})

// add a mouseover event handler...

.on("mouseover", function(event,d) {

let gmCode = d.code;

let gmName = d.name;

let gmPop = d.population;

// call function (defined above) to highlight things:

doHighlights(gmCode, gmName, gmPop, true);

})

// ...and a mouseout one:

.on("mouseout", function(event,d) {

let gmCode = d.code;

doHighlights(gmCode, undefined, undefined, false);

})

;

chart.append("g")

.attr("class", "axis")

.attr("transform", "translate(0," + (svgheight-barHeight) + ")")

.call(theAxis);

} //end of callback function .then()

); //end of d3.csv

// Code for the map:

const mapWidth = 400;

const mapHeight = 350;

// we select the map svg by id (because there are more SVG elements):

const mapSVG = d3.select("#mapSVG")

.attr("width", mapWidth)

.attr("height", mapHeight)

;

// Define Mercator proj at data center (lon-lat):

const myProj = d3.geoMercator()

.center([6.40, 52.48])

.scale(16000)

.translate([mapWidth / 2, mapHeight / 2])

;

//Define svg path generator using the projection:

const svgpath = d3.geoPath().projection(myProj);

// asynchronously load geojson using a Promise:

d3.json("data/overijssel.json").then(

// this function is run when the Promise is fulfilled:

function(geojson) {

mapSVG.selectAll("path")

// for each d create an svgpath that uses the geoPath generator:

.data(geojson.features).enter().append("path")

.attr("d", svgpath)

// give it a class, so it's styled by the CSS:

.attr("class", "municipality")

// create id based on gm_code, to be able to select it:

.attr("id", function(d) {return "poly_" + d.properties.code})

// adding a mouseover event handler...

.on("mouseover", function(event,d) {

let gmName = d.properties.name;

let gmCode = d.properties.code;

let gmPop = d.properties.population;

// call function (defined above) to highlight things:

doHighlights(gmCode, gmName, gmPop, true);

})

// ...and a mouseout

.on("mouseout", function(event,d) {

let gmCode = d.properties.code;

doHighlights(gmCode, undefined, undefined, false);

})

;

} //end of callback function .then()

); //end of d3.json

</script>

</body>

</html>

Using the D3 JavaScript Library
for Interactive Graphs and Maps

OPTIONAL CHALLENGE: Interactively Linking Map and Chart

Exercise Sections

Page Content