CdV BW 2022 > participating institutions | v2 / Ilias Kyriazis

chart = {

const svg = d3.select(DOM.svg(width, height)).style('max-width', '100%').style('height', 'auto');

svg.attr("id", "myGraph");

// append the Baden-Württemberg outline

svg.append("path")

.attr("d", d)

.attr("stroke","rebeccapurple")

.attr("fill","grey")

.attr("stroke-width","2px")

svg.selectAll("circle")

.data(bw_cities) // here we define the data source, so that it can be used also from the tooltip

.enter()

.append("circle")

.attr("class", "circle")

.attr("cx", d => projection([Number(d.coords.lon),Number(d.coords.lat)])[0])

.attr("cy", d => projection([Number(d.coords.lon),Number(d.coords.lat)])[1])

.attr("r", 4)

.attr("fill", "#69b3a2")

return svg.node();

}

file = FileAttachment("bw_glams@1.csv")

bw_glams = d3.csvParse(await file.text()).slice().sort((a, b) => d3.ascending(a.institution, b.institution))

germany = await (await fetch('https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/2_bundeslaender/3_mittel.geo.json')).json()

bw = germany.features[0]

cities = await (await fetch('https://raw.githubusercontent.com/pensnarik/german-cities/master/germany.json')).json()

cdv_cities = ['Stuttgart', 'Freiburg im Breisgau', 'Trossingen', 'Mannheim', 'Bietigheim-Bissingen', 'Tübingen', 'Heidelberg', 'Karlsruhe', 'Constance', 'Tuttlingen', 'Wertheim', 'Winnenden', 'Ludwigsburg', 'Esslingen am Neckar', 'Aalen']

bw_cities = {

let bw_cities = []

for (var i = 0; i < cdv_cities.length; i++) {

bw_cities.push(cities.find(d => d.name === cdv_cities[i]))

}

bw_cities[8].name = 'Konstanz' // Konstanz was originally given as Constance

return bw_cities

}

// Konstanz was given as Constance

cities.find(d => d.name.startsWith('Con'))

projection = {

/* https://github.com/d3/d3-geo#geoBounds */

// this is a spherical bounding box

// bottomLeft --> [minimum lon, minimum lat]

// topRight --> [maximum lon, maximum lat]

const [ bottomLeft, topRight ] = d3.geoBounds(bw)

/* https://bl.ocks.org/mbostock/4282586 */

// lambda is a rotation value that is used in projection

const lambda = -(topRight[0] + bottomLeft[0]) / 2

/* Coordinates of the center of the (original) map in degress */

const center = [

// (max lon + min lon ) / 2 + lambda

(topRight[0] + bottomLeft[0]) / 2 + lambda,

(topRight[1] + bottomLeft[1]) / 2

// (max lat + min lat ) / 2

]

const scale = Math.min(

width / (topRight[0] + bottomLeft[0]),

height / (topRight[1] - bottomLeft[1])

)

/* here is the actual projection */

return d3.geoAlbers()

.parallels([bottomLeft[1], topRight[1]])

.translate([width / 2, height / 2])

.rotate([lambda, 0, 0]) // I need the rotation for my projection

.center(center)

.scale(scale * 400)

}

d = d3.geoPath(projection)(bw) // in our case we need the path for bw and not for the whole country

stuttgart = cities.find(d => d.name === 'Stuttgart')

ppoint = projection([Number(stuttgart.coords.lon),Number(stuttgart.coords.lat)])

cx = ppoint[0]

cy = ppoint[1]

tooltip = {

var visFlag = false;

const tooltip = d3.select("body").append("div")

// (Since we are using a div, any HTML can be inserted into the tooltip... including other visualizations)

.attr("class", "svg-tooltip")

.style("position", "absolute")

.style("visibility", "hidden")

d3.selectAll(".circle")

.on("click", function(d){

if (!visFlag) {

let table = tooltip.style("visibility", "visible")

.style("top", (d3.event.pageY-10)+"px")

.style("left",(d3.event.pageX+10)+"px")

.text(d.name).append("table")

let place = d.name

let rows = table.selectAll("tr")

.data(bw_glams.filter(d => d.city === place))

.enter()

.append("tr").append("td").append("a").attr("href", d => d.link).attr("target", "_blank")

.text(d => d.institution);

rows

.on("click", function(){ // e.g. when clicking on links

return tooltip.style("visibility", "visible");

})

let button = tooltip.append("div").attr("class", "btn");

button.text("{x}")

.on("click", function(){

return tooltip.style("visibility", "hidden");

})

visFlag = true;

return tooltip;

} else { // if visFlag is true

visFlag = false;

return tooltip.style("visibility", "hidden");

}

})

}

styles = html`

<style>

.svg-tooltip {

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

background: rgba(69,77,93,.9);

border-radius: .1rem;

color: #fff;

display: block;

font-size: 11px;

padding: .2rem .4rem;

position: absolute;

text-overflow: ellipsis;

white-space: pre;

z-index: 300;

visibility: hidden;

}

.svg-tooltip td {

color: #1bbd7d;

}

.svg-tooltip a {

color: #1bbd7d;

//text-decoration: none;

}

.svg-tooltip a:hover {

//color: #1bbd7d;

text-decoration: none;

}

.btn {

cursor: pointer;

position: absolute;

bottom: 0.5em;

right: 0.5em;

}

.circle {

cursor: pointer;

}

</style>`

width = 600

height = 800

d3 = require("d3@5")

One platform to build and deploy the best data apps