2d:null 2e:["$","title",null,{"children":"The Broom of Faerun v2.1 | Joakim Dalen | Observable"}] 33:T7359,chart={ ///Creating the canvas const svg=d3.select(DOM.svg(margin.leftC1+margin.leftC2+margin.leftC3+margin.leftC4+plot.widthC1+plot.widthC2+plot.widthC3+plot.widthC4+margin.right, plot.height+margin.top+margin.bottom)); //Embedding font// //write api for font in browser //in this case fromFrom https://fonts.googleapis.com/css?family=Alfa%20Slab%20One, //pick the url under `/* latin */` svg .call(addWebFont, 'ewert', 'https://fonts.gstatic.com/s/tillana/v6/VuJxdNvf35P4qJ1OSKHdOQ.woff2') //linear gradient på bakgrunnen var linearGradient = svg.append("defs") .append("linearGradient") .attr("id", "linear-gradient") .attr("gradientTransform", "rotate(90)") .attr("spreadMethod", "reflect "); linearGradient.append("stop") .attr("offset", "0%") .attr("stop-color", "whitesmoke"); linearGradient.append("stop") .attr("offset", "80%") .attr("stop-color", "#DCDCDC"); linearGradient.append("stop") .attr("offset", "100%") .attr("stop-color", 'whitesmoke'); const defs = svg.append("defs") //Bakgrunnen svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", 'url(#linear-gradient'); /* svg.append('g').selectAll() .data(data) .enter() .append('image') .attr("xlink:href", "https://i.imgur.com/4rKVgAQ.png") .attr("class", "image") .attr("width", 250 0) .attr("height", "2000") .style("object-fit","fill") .attr('opacity',0.03) */ /////headline 1 svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (cleft.C1CM2) +","+(rTop.R1)+")") .text('The Broom of Faerun') .style("font", ""+ textSize.mainHeader+"px 'ewert'") .style("fill", 'black') .style('text-anchor','start') .style("font-weight", "800"); /////headline 1 svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (cleft.C1CM2) +","+(rTop.R2)+")") .text('NPCs by their last known location and affiliation') .style("font", ""+ textSize.header+"px 'ewert'") .style("fill", 'black') .attr('class','slide1') .style('text-anchor','start') .style("font-weight", "600"); /////headline 3 svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (cleft.C2)+","+(rTop.R2)+")") .text('Factions') .style("font", ""+ textSize.header+"px 'ewert'") .style("fill", 'black') .style('text-anchor','start') .style("font-weight", "600") .attr('class','slide1'); /////headline 2 svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (cleft.C3)+","+(rTop.R2)+")") .text('Locations') .style("font", ""+ textSize.header+"px 'ewert'") .style("fill", 'black') .attr('class','slide1') .style('text-anchor','start') .style("font-weight", "600"); /////headline 3 svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (cleft.C4) +","+(rTop.R2)+")") .text('Tasks') .style("font", ""+ textSize.header+"px 'ewert'") .style("fill", 'black') .style('text-anchor','start') .style("font-weight", "600") .attr('class','slide1'); svg.append('g') .selectAll('.Location1') .data(data) .enter() .append('text') .attr('x',function(d){return cleft.C1CM2}) .attr('y',function(d){return margin.top+(yScale(d.First_Name))+r}) .style('text-anchor','Start') .text(function(d){return d.Location1}) .style("font", ""+ textSize.location1+"px 'ewert'") .attr('class','Location1 slide1') .style("fill", function(d){ return "text_fill"}) .style("opacity",0.8) .style("font-weight", "400") .style("opacity", function(d){if(d.Location1_nr==1) { return 1} else { return 0}}) svg.append('g') .selectAll('.Location2') .data(data) .enter() .append('text') .attr('y',function(d){return margin.top+(yScale(d.First_Name))+r}) .attr('x',function(d){return cleft.C1CM1 }) .style('text-anchor','Start') .text(function(d){return d.Location2}) .style("font", ""+ textSize.location2+"px 'ewert'") .attr('class','Location2 slide1') .style("fill", function(d){ return "text_fill"}) .style("opacity", function(d){if(d.Location2_nr==1) { return 1} else { return 0}}) .style("font-weight", "400") svg.append('g') .selectAll('.Alignment') .data(data) .enter() .append('text') .attr('y',function(d){return margin.top-30}) .attr('x',function(d){return margin.leftC1+xScale(d.Column)}) .style('text-anchor','Start') .text(function(d){return d.Alignment}) .style("font", ""+ textSize.Alignment+"px 'ewert'") .attr('class','slide1') .style("fill", function(d){ return "text_fill"}) .style("opacity", function(d){if(d.First_alignment=='1') { return 1} else { return 0}}) .style("font-weight", "600") /// svg.append('g') .selectAll('circle') .data(data) .enter() .append('circle') .attr('cy',function(d){return margin.top+(yScale(d.First_Name))} ) .attr('cx',function(d,i) {return margin.leftC1+xScale(d.Column)}) .attr('r',r*1.3) .attr('class','circle_main circle_s1 slide1') .style("fill", function(d){if(d.Quest_giver==1) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Quest_giver==1) { return 1} else { return 0}}) svg.call(tip); svg.append('g') .selectAll('circle') .data(data) .enter() .append('circle') .attr('cy',function(d){return margin.top+(yScale(d.First_Name))} ) .attr('cx',function(d,i) {return margin.leftC1+xScale(d.Column)}) .attr('r',r) .attr('class','circle_main circle_s2 slide1') .style("fill", function(d){if(d.Column==1 & d.Deceased==0) { return color.g1} if(d.Column==2 & d.Deceased==0) { return color.g2} if(d.Column==3 & d.Deceased==0) { return color.g3} if(d.Deceased==1){ return color.g4} else { return color.g3}}) .style("opacity",1) svg.append('g') .selectAll('circle') .data(data) .enter() .append('circle') .attr('cy',function(d){return margin.top+(yScale(d.First_Name))} ) .attr('cx',function(d,i) {return margin.leftC1+xScale(d.Column)}) .attr('r',r/2) .attr('class','circle_main circle_s3 slide1') .style("fill", function(d){if(d.Quest_target==1) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Quest_target==1) { return 1} else { return 0}}) svg.append('g') .selectAll('circle') .data(data) .enter() .append('circle') .attr('cy',function(d){return margin.top+(yScale(d.First_Name))} ) .attr('cx',function(d,i) {return margin.leftC1+xScale(d.Column)}) .attr('r',r*2) .attr("class", function(d) { return " slide1 First_Name-" + d.First_Name+" circle_main circle_s4-"+d.First_Name }) .style("fill", function(d){if(d.Column==1 & d.Deceased==0) { return color.g1} if(d.Column==2 & d.Deceased==0) { return color.g2} if(d.Column==3 & d.Deceased==0) { return color.g3} if(d.Deceased==1){ return color.g4} else { return color.g3}}) .style("opacity",0) .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this) .style('opacity', 1) d3.selectAll(".First_Name-" + d.First_Name+".First_Name") .style("font-weight", "600") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font-weight", "600") .style('fill','whitesmoke') d3.selectAll(".Quest_target-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font-weight", "600") .style('fill','black') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.selectAll(".First_Name-" + d.First_Name+".circle_main") .style('opacity', 0) d3.selectAll(".First_Name-" + d.First_Name+".First_Name") .style("font-weight", "200") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font", "16px ") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_target-"+ d.First_Name+ ".Quest") .style('opacity', 1) .style("font", "16px ") .style("font-weight", "200") .style('fill','black') }); svg.append('g') .selectAll('.First_Name') .data(data) .enter() .append('text') .attr('y',function(d){return margin.top+(yScale(d.First_Name))+r}) .attr('x',function(d){return margin.leftC1+xScale(d.Column)+12}) .style('text-anchor','Start') .text(function(d){return d.First_Name+" "+d.Name}) .style("font", ""+ textSize.name+"px 'ewert'") .attr("class", function(d) { return "slide1 Faction-"+d.Faction_id+" First_Name-" + d.First_Name+" First_Name Quest_giver-"+ d.First_Name+ " Quest_target-" + d.First_Name }) .style("fill", function(d){if(d.Deceased==0) { return "text_fill"} else { return color.dName}}) .style("font-weight", "200") .style('stroke-width',0.1) .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style("cursor", "default") d3.selectAll(".First_Name-" + d.First_Name+".circle_main") .style('opacity', 1) d3.selectAll(".First_Name-" + d.First_Name+".First_Name") .style("font-weight", "600") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font-weight", "600") .style('fill','whitesmoke') d3.selectAll(".Quest_target-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font-weight", "600") .style('fill','white') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.selectAll(".First_Name-" + d.First_Name+".circle_main") .style('opacity', 0) d3.selectAll(".First_Name-" + d.First_Name+".First_Name") .style("font", ""+ textSize.name+"px 'ewert'") .style("font-weight", "200") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font-size", "16px ") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_target-"+ d.First_Name+ ".Quest") .style('opacity', 1) .style("font-size", "16px ") .style("font-weight", "200") .style('fill','black') }); svg.append('g') .selectAll('.Faction_headers') .data(Faction) .enter() .append('text') .attr('x',function(d){return margin.leftC1+plot.widthC1+margin.leftC2}) .attr('y',function(d){return margin.top+(yScale_faction(d.Row-1)+r)}) .style('text-anchor','Start') .text(function(d){return d.Alignment}) .attr("class", function(d) { return "slide1 " }) .style("font", ""+ textSize.Faction+"px 'ewert'") .style("pointer-events", function(d){if(d.First_faction==1) { return 'auto'} else { return 'none'}}) .style("opacity", function(d){if(d.First_faction==1) { return 1} else { return 0}}) . style("font-weight", "600") .on('mouseover', function(d) { d3.select(this).style("cursor", "default") }) svg.append('g') .selectAll('.Faction') .data(Faction) .enter() .append('text') .attr('x',function(d){return margin.leftC1+plot.widthC1+margin.leftC2}) .attr('y',function(d){return margin.top+(yScale_faction(d.Row)+r)}) .style('text-anchor','Start') .text(function(d){return d.Faction_name}) .style("font", ""+ textSize.Faction+"px 'ewert'") .attr("class", function(d) { return "slide1 Faction-"+ d.Faction_id+" .Faction " }) . style("font-weight", "200") .on('mouseover', function(d) { // show the tooltip on mouse over // when the bar is mouse-overed, we slightly decrease opacity of the bar. // d3.select(this).style("cursor", "default") // d3.select(this) // .style("font", ""+ textSize.location1Hover+"px 'ewert'") d3.selectAll(".Faction-" + d.Faction_id +" ") .style('fill', 'black') . style("font-weight", "600") d3.select(this) .style("cursor", "default") .style('fill', 'black') . style("font-weight", "600") }) .on('mouseout', function(d) { // show the tooltip on mouse over // when the bar is mouse-overed, we slightly decrease opacity of the bar. // d3.select(this).style("cursor", "default") // d3.select(this) // .style("font", ""+ textSize.location1Hover+"px 'ewert'") d3.selectAll(".Faction-" + d.Faction_id +" ") .style('fill', 'black') . style("font-weight", "200") }) //The horistontal line in the plot svg.append('g') .selectAll('.line') .data(data) .enter() .append("line") .style("stroke", "black") .attr('x1',function(d){return cleft.C1CM1}) .attr('y1',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('x2',function(d){return margin.leftC1+plot.widthC1}) .attr('y2',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('class','slide1 hline') .style("opacity", function(d){if(d.Location2_nr==1) { return 0.7} else { return 0}}) .style("stroke-dasharray",2.5) .style('stroke-width',0.3) ; //The horistontal line in the plot svg.append('g') .selectAll('.line') .data(data) .enter() .append("line") .style("stroke", "black") .attr('x1',function(d){return cleft.C1CM2}) .attr('y1',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('x2',function(d){return margin.leftC1+plot.widthC1}) .attr('y2',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('class','slide1 hline') .style("opacity", function(d){if(d.Location1_nr==1) { return 0.3} else { return 0}}) .style("stroke-dasharray",2.5) .style('stroke-width',0.6) ; //The lines boxing in factions var max_faction = d3.max(Faction, function(d) { return +d.Row;} ); svg.append("line") .style("stroke", "black") .attr('x1',function(d){return margin.leftC1+plot.widthC1}) .attr('y1',function(d){return margin.top-20}) .attr('x2',function(d){return margin.leftC1+plot.widthC1}) .attr("y2", function(){return margin.top+yScale_faction(max_faction)+50}) .attr('class','slide1 vline') .style("opacity",1) .style("stroke-dasharray",2.5) .style('stroke-width',0.5) ; svg.append("line") .style("stroke", "black") .attr('x1',function(d){return margin.leftC1+plot.widthC1}) .attr("y1", function(){return margin.top+yScale_faction(max_faction)+50}) .attr('x2',function(d){return cleft.C3-margin.leftC3}) .attr("y2", function(){return margin.top+yScale_faction(max_faction)+50}) .attr('class','slide1 vline') .style("opacity",1) .style("stroke-dasharray",2.5) .style('stroke-width',0.5) ; svg.append("line") .style("stroke", "black") .attr('x1',function(d){return margin.leftC1+plot.widthC1+margin.leftC2+plot.widthC2}) .attr('y1',function(d){return margin.top-20}) .attr('x2',function(d){return margin.leftC1+plot.widthC1+margin.leftC2+plot.widthC2}) .attr("y2", function(){return margin.top+plot.height}) .attr('class','slide1 vline') .style("opacity",1) .style("stroke-dasharray",2.5) .style('stroke-width',0.5) ; svg.append("line") .style("stroke", "black") .attr('x1',function(d){return cleft.C4-margin.leftC4}) .attr('y1',function(d){return margin.top-20}) .attr('x2',function(d){return cleft.C4-margin.leftC4}) .attr("y2", function(){return margin.top+plot.height}) .attr('class','slide1 vline') .style("opacity",1) .style("stroke-dasharray",2.5) .style('stroke-width',0.5) ; ////Legend var legendleft=cleft.C2 var legendtop= margin.top+yScale_faction(max_faction)+130 var legendspace= 15 var rLegend=5 /////headline 1 svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (legendleft) +","+(legendtop)+")") .text('Symbol explanation') .style("font", ""+ textSize.headerlegend+"px 'ewert'") .style("fill", 'black') .attr('class','slide1') .style('text-anchor','start') .style("font-weight", "600"); svg.append('g') .selectAll('circle') .data(legend_data) .enter() .append('circle') .attr("cy", function(d){ return legendtop+legendspace+(d.Row)*20}) .attr("cx", function(d){return legendleft+rLegend+(d.Column)*100}) .attr('r',rLegend*1.4) .attr('class','slide1') .style("fill", function(d){if(d.Row==6 & d.Column==0) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Row==6 & d.Column==0) { return 1} else { return 0}}) svg.append('g') .selectAll('circle') .data(legend_data) .enter() .append('circle') .attr("cy", function(d){ return legendtop+legendspace+(d.Row)*20}) .attr("cx", function(d){if(d.Row<=3 & d.Column==0 ) { return legendleft+rLegend+(d.Column)*100} else {return legendleft+rLegend+(d.Column)*100}}) .attr('r',rLegend) .attr('class','Legend_circles slide1') .style("fill", function(d){if(d.Row==1 &d.Column==0 ) { return color.g1} if(d.Row==2 & d.Column==0 ) { return color.g2} if(d.Row==3 & d.Column==0) { return color.g3} else { return color.g4}}) svg.append('g') .selectAll('circle') .data(legend_data) .enter() .append('circle') .attr("cy", function(d){ return legendtop+legendspace+(d.Row)*20}) .attr("cx", function(d){if(d.Row<=3 & d.Column==0 ) { return legendleft+rLegend+(d.Column)*100} else {return legendleft+rLegend+(d.Column)*100}}) .attr('r',rLegend/2) .attr('class','slide1') .style("fill", function(d){if(d.Row==7 & d.Column==0) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Row==7 & d.Column==0) { return 1} else { return 0}}) svg.append('g') .selectAll('.legend_name') .data(legend_data) .enter() .append('text') .attr('y',function(d){return legendtop+legendspace+(d.Row)*20+4}) .attr("x", function(d){ return legendleft+rLegend+15+(d.Column)*100}) .style('text-anchor','Start') .text(function(d){return d.Alignment}) .style("font", ""+ textSize.legend+"px 'ewert'") .style("fill", function(d){ return "text_fill"}) .style('opacity',1) .style("font-weight", "200") .style('stroke-width',1) .attr("class", function(d) { return "slide1"}) svg.call(tip_main_location); svg.append('g') .selectAll('.Location_location_1') .data(location_data) .enter() .append('text') .attr('x',function(d){return cleft.C3}) .attr('y',function(d){return margin.top+(yScale_location(d.Location_name)+r)}) .style('text-anchor','Start') .text(function(d){return d.Location1}) .style("font", ""+ textSize.location1+"px 'ewert'") .attr("class", function(d) { return "slide1 Quest_location-" + d.Location_name+ " Location1" }) .style("font-weight", "200") .style("pointer-events", function(d){if(d.Location1_nr==1) { return 'auto'} else { return 'none'}}) .style("opacity", function(d){if(d.Location1_nr==1) { return 1} else { return 0}}) .on('mouseover', function(d) { // show the tooltip on mouse over tip_main_location.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style("cursor", "default") d3.select(this) .style("font-weight", "600") d3.selectAll(".Main_Quest_location-"+ d.Main_location_name +".Quest" ) .style("font-weight", "600") .style('fill','whitesmoke') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_main_location.hide(); d3.select(this) .style("font-weight", "200") d3.selectAll(".Main_Quest_location-"+ d.Main_location_name +".Quest" ) .style("font-weight", "200") .style('fill','black') }); svg.call(tip_location); svg.append('g') .selectAll('.Location_location_2') .data(location_data) .enter() .append('text') .attr('x',function(d){return cleft.C3C2}) .attr('y',function(d){return margin.top+(yScale_location(d.Location_name))+r}) .style('text-anchor','Start') .text(function(d){return d.Location2}) .style("font", ""+ textSize.location2+"px 'ewert'") .attr("class", function(d) { return "slide1 Quest_location-" + d.Location_name+ " Location2" }) .style("opacity",1) .style("font-weight", "200") .on('mouseover', function(d) { // show the tooltip on mouse over d3.select(this).style("cursor", "default") tip_location.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this) .style("font-weight", "600") d3.selectAll(".Quest_location-" + d.Location_name+ ".Quest" ) .style("font-weight", "600") .style('fill','whitesmoke') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_location.hide(); d3.select(this) .style("font-weight", "200") d3.selectAll(".Quest_location-" + d.Location_name+ ".Quest" ) .style("font-weight", "200") .style('fill','black') }); svg.call(tip_quests) svg.append('g') .selectAll('.quest') .data(Quest_data) .enter() .append('text') .attr('x',function(d){return cleft.C4}) .attr('y',function(d){return margin.top+yScaleQuest(d.Quest)}) .style('text-anchor','Start') .text(function(d){return d.Quest}) .style("font", ""+ textSize.quest+"px 'ewert'") .style("fill", function(d){ return "text_fill"}) .style("opacity",1) .style("font-weight", "200") .attr("class", function(d) { return "slide1 Quest_location-" + d.Location_name +" Main_Quest_location-"+ d.Main_location_name+ " Quest_giver-"+d.Quest_giver+" Quest_target-"+d.Quest_target+" Quest" }) .style("text-decoration", function(d){if(d.Completed==0) { return 'none'} else { return 'line-through'}}) .on('mouseover', function(d) { d3.select(this).style("cursor", "default") // show the tooltip on mouse over tip_quests.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.selectAll(".Quest_giver-" + d.Quest_giver+ ".First_Name") .style('opacity', 1) .style("font-weight", "600") .style('fill','whitesmoke') d3.select(this) .style('opacity', 1) .style("font-weight", "600") d3.selectAll(".Quest_target-" + d.Quest_target+".First_Name" ) .style('opacity', 1) .style("font-weight", "600") .style('fill','whitesmoke') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location2" ) .style("font-weight", "600") .style('fill','whitesmoke') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location1" ) .style("font-weight", "600") .style('fill','whitesmoke') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_quests.hide(); d3.select(this) .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_giver-" + d.Quest_giver+ ".First_Name") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_target-" + d.Quest_target+".First_Name" ) .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location2" ) .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location1" ) .style("font-weight", "200") .style('fill','black') }); var buttonRight=plot.widthC1+plot.widthC2+plot.widthC3+margin.leftC1+margin.leftC2+margin.leftC3+margin.leftC4 var buttonWidth=170 var buttonHeight=38 var buttonBottom=rTop.R1-buttonHeight var buttonSpace=10 svg.append('g') .append('rect') .attr('y',function(d,i){return buttonBottom}) .attr('x',function(d,i){return buttonRight-(buttonWidth+buttonSpace)*2}) .attr("width",buttonWidth) .attr("height",buttonHeight) .style('stroke','black') .style("fill", 'black') .style("border-radius", "10px") .style("fill-opacity",0.1 ) .style("stroke-opacity",0.7 ) .style('stroke-width','0.7') .attr('class','Alphabetical') .attr('class','Button1') .on('click',slide1) .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}, "mouseout", function(d) {d3.select(this).style("cursor", "default");}) svg.append('text') .attr('y',function(d,i){return buttonBottom+buttonHeight/2+4}) .attr('x',function(d,i){return buttonRight-(buttonWidth+buttonSpace)*2+buttonWidth/2}) .style('text-anchor','middle') .text("Characters/Locations") .style("font", ""+ textSize.Faction+"px 'ewert'") .style("opacity",1) .style("font-weight", "600") .on('click',slide1) .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}, "mouseout", function(d) {d3.select(this).style("cursor", "default");}) svg.append('g') .append('rect') .attr('y',function(d,i){return buttonBottom}) .attr('x',function(d,i){return buttonRight-(buttonWidth+buttonSpace)}) .attr("width",buttonWidth) .attr("height",buttonHeight) .style('stroke','black') .style("fill-opacity",0 ) .style("stroke-opacity",0.7 ) .style('stroke-width','1') .style("padding", "6px") .attr('class','Button2') .on('click',slide2) .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}, "mouseout", function(d) {d3.select(this).style("cursor", "default");}) svg.append('text') .attr('y',function(d,i){return buttonBottom+buttonHeight/2+4}) .attr('x',function(d,i){return buttonRight-buttonWidth-buttonSpace+buttonWidth/2}) .style('text-anchor','middle') .text("Treasury") .style("font", ""+ textSize.Faction+"px 'ewert'") .style("opacity",1) .style("font-weight", "600") .on('click',slide2) .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}, "mouseout", function(d) {d3.select(this).style("cursor", "default");}) svg.append('g') .append('rect') .attr('y',function(d,i){return buttonBottom}) .attr('x',function(d,i){return buttonRight}) .attr("width",buttonWidth) .attr("height",buttonHeight) .style('stroke','black') .style("fill-opacity",0 ) .style("stroke-opacity",0.7 ) .style('stroke-width','1') .style("padding", "6px") .attr('class','Button3') .on('click',slideMaps) .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}, "mouseout", function(d) {d3.select(this).style("cursor", "default");}) svg.append('text') .attr('y',function(d,i){return buttonBottom+buttonHeight/2+4}) .attr('x',function(d,i){return buttonRight+buttonWidth/2}) .style('text-anchor','middle') .text("Maps") .style("font", ""+ textSize.Faction+"px 'ewert'") .style("opacity",1) .style("font-weight", "600") .on('click',slideMaps) .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}, "mouseout", function(d) {d3.select(this).style("cursor", "default");}) return svg.node(); }34:T616c,slide1 =function() { d3.select('svg') .selectAll(".Button1") .style('fill-opacity',0.1) d3.select('svg') .selectAll(".Button2") .style('fill-opacity',0) d3.select('svg') .selectAll(".Button3") .style('fill-opacity',0) d3.select('svg') .selectAll(".slide2") .remove() d3.select('svg') .selectAll(".slideMaps") .remove() /////headline 1 d3.select('svg').append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (cleft.C1CM2) +","+(rTop.R2)+")") .text('NPCs by their last known location and affiliation') .style("font", ""+ textSize.header+"px 'ewert'") .style("fill", 'black') .attr('class','slide1') .style('text-anchor','start') .style("font-weight", "600"); /////headline 3 d3.select('svg').append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (cleft.C2)+","+(rTop.R2)+")") .text('Factions') .style("font", ""+ textSize.header+"px 'ewert'") .style("fill", 'black') .style('text-anchor','start') .style("font-weight", "600") .attr('class','slide1'); /////headline 2 d3.select('svg').append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (cleft.C3)+","+(rTop.R2)+")") .text('Locations') .style("font", ""+ textSize.header+"px 'ewert'") .style("fill", 'black') .attr('class','slide1') .style('text-anchor','start') .style("font-weight", "600"); /////headline 3 d3.select('svg').append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (cleft.C4) +","+(rTop.R2)+")") .text('Tasks') .style("font", ""+ textSize.header+"px 'ewert'") .style("fill", 'black') .style('text-anchor','start') .style("font-weight", "600") .attr('class','slide1'); d3.select('svg').append('g') .selectAll('.Location1') .data(data) .enter() .append('text') .attr('x',function(d){return cleft.C1CM2}) .attr('y',function(d){return margin.top+(yScale(d.First_Name))+r}) .style('text-anchor','Start') .text(function(d){return d.Location1}) .style("font", ""+ textSize.location1+"px 'ewert'") .attr('class','Location1 slide1') .style("fill", function(d){ return "text_fill"}) .style("opacity",0.8) .style("font-weight", "400") .style("opacity", function(d){if(d.Location1_nr==1) { return 1} else { return 0}}) d3.select('svg').append('g') .selectAll('.Location2') .data(data) .enter() .append('text') .attr('y',function(d){return margin.top+(yScale(d.First_Name))+r}) .attr('x',function(d){return cleft.C1CM1 }) .style('text-anchor','Start') .text(function(d){return d.Location2}) .style("font", ""+ textSize.location2+"px 'ewert'") .attr('class','Location2 slide1') .style("fill", function(d){ return "text_fill"}) .style("opacity", function(d){if(d.Location2_nr==1) { return 1} else { return 0}}) .style("font-weight", "400") d3.select('svg').append('g') .selectAll('.Alignment') .data(data) .enter() .append('text') .attr('y',function(d){return margin.top-30}) .attr('x',function(d){return margin.leftC1+xScale(d.Column)}) .style('text-anchor','Start') .text(function(d){return d.Alignment}) .style("font", ""+ textSize.Alignment+"px 'ewert'") .attr('class','slide1') .style("fill", function(d){ return "text_fill"}) .style("opacity", function(d){if(d.First_alignment=='1') { return 1} else { return 0}}) .style("font-weight", "600") /// d3.select('svg').append('g') .selectAll('circle') .data(data) .enter() .append('circle') .attr('cy',function(d){return margin.top+(yScale(d.First_Name))} ) .attr('cx',function(d,i) {return margin.leftC1+xScale(d.Column)}) .attr('r',r*1.3) .attr('class','circle_main circle_s1 slide1') .style("fill", function(d){if(d.Quest_giver==1) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Quest_giver==1) { return 1} else { return 0}}) d3.select('svg').call(tip); d3.select('svg').append('g') .selectAll('circle') .data(data) .enter() .append('circle') .attr('cy',function(d){return margin.top+(yScale(d.First_Name))} ) .attr('cx',function(d,i) {return margin.leftC1+xScale(d.Column)}) .attr('r',r) .attr('class','circle_main circle_s2 slide1') .style("fill", function(d){if(d.Column==1 & d.Deceased==0) { return color.g1} if(d.Column==2 & d.Deceased==0) { return color.g2} if(d.Column==3 & d.Deceased==0) { return color.g3} if(d.Deceased==1){ return color.g4} else { return color.g3}}) .style("opacity",1) d3.select('svg').append('g') .selectAll('circle') .data(data) .enter() .append('circle') .attr('cy',function(d){return margin.top+(yScale(d.First_Name))} ) .attr('cx',function(d,i) {return margin.leftC1+xScale(d.Column)}) .attr('r',r/2) .attr('class','circle_main circle_s3 slide1') .style("fill", function(d){if(d.Quest_target==1) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Quest_target==1) { return 1} else { return 0}}) d3.select('svg').append('g') .selectAll('circle') .data(data) .enter() .append('circle') .attr('cy',function(d){return margin.top+(yScale(d.First_Name))} ) .attr('cx',function(d,i) {return margin.leftC1+xScale(d.Column)}) .attr('r',r*2) .attr("class", function(d) { return " slide1 First_Name-" + d.First_Name+" circle_main circle_s4-"+d.First_Name }) .style("fill", function(d){if(d.Column==1 & d.Deceased==0) { return color.g1} if(d.Column==2 & d.Deceased==0) { return color.g2} if(d.Column==3 & d.Deceased==0) { return color.g3} if(d.Deceased==1){ return color.g4} else { return color.g3}}) .style("opacity",0) .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this) .style('opacity', 1) d3.selectAll(".First_Name-" + d.First_Name+".First_Name") .style("font-weight", "600") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font-weight", "600") .style('fill','whitesmoke') d3.selectAll(".Quest_target-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font-weight", "600") .style('fill','black') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.selectAll(".First_Name-" + d.First_Name+".circle_main") .style('opacity', 0) d3.selectAll(".First_Name-" + d.First_Name+".First_Name") .style("font-weight", "200") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font", "16px ") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_target-"+ d.First_Name+ ".Quest") .style('opacity', 1) .style("font", "16px ") .style("font-weight", "200") .style('fill','black') }); d3.select('svg').append('g') .selectAll('.First_Name') .data(data) .enter() .append('text') .attr('y',function(d){return margin.top+(yScale(d.First_Name))+r}) .attr('x',function(d){return margin.leftC1+xScale(d.Column)+12}) .style('text-anchor','Start') .text(function(d){return d.First_Name+" "+d.Name}) .style("font", ""+ textSize.name+"px 'ewert'") .attr("class", function(d) { return "slide1 Faction-"+d.Faction_id+" First_Name-" + d.First_Name+" First_Name Quest_giver-"+ d.First_Name+ " Quest_target-" + d.First_Name }) .style("fill", function(d){if(d.Deceased==0) { return "text_fill"} else { return color.dName}}) .style("font-weight", "200") .style('stroke-width',0.1) .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style("cursor", "default") d3.selectAll(".First_Name-" + d.First_Name+".circle_main") .style('opacity', 1) d3.selectAll(".First_Name-" + d.First_Name+".First_Name") .style("font-weight", "600") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font-weight", "600") .style('fill','whitesmoke') d3.selectAll(".Quest_target-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font-weight", "600") .style('fill','white') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.selectAll(".First_Name-" + d.First_Name+".circle_main") .style('opacity', 0) d3.selectAll(".First_Name-" + d.First_Name+".First_Name") .style("font", ""+ textSize.name+"px 'ewert'") .style("font-weight", "200") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font-size", "16px ") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_target-"+ d.First_Name+ ".Quest") .style('opacity', 1) .style("font-size", "16px ") .style("font-weight", "200") .style('fill','black') }); d3.select('svg').append('g') .selectAll('.Faction_headers') .data(Faction) .enter() .append('text') .attr('x',function(d){return margin.leftC1+plot.widthC1+margin.leftC2}) .attr('y',function(d){return margin.top+(yScale_faction(d.Row-1)+r)}) .style('text-anchor','Start') .text(function(d){return d.Alignment}) .attr("class", function(d) { return "slide1 " }) .style("font", ""+ textSize.Faction+"px 'ewert'") .style("pointer-events", function(d){if(d.First_faction==1) { return 'auto'} else { return 'none'}}) .style("opacity", function(d){if(d.First_faction==1) { return 1} else { return 0}}) . style("font-weight", "600") .on('mouseover', function(d) { d3.select(this).style("cursor", "default") }) d3.select('svg').append('g') .selectAll('.Faction') .data(Faction) .enter() .append('text') .attr('x',function(d){return margin.leftC1+plot.widthC1+margin.leftC2}) .attr('y',function(d){return margin.top+(yScale_faction(d.Row)+r)}) .style('text-anchor','Start') .text(function(d){return d.Faction_name}) .style("font", ""+ textSize.Faction+"px 'ewert'") .attr("class", function(d) { return "slide1 Faction-"+ d.Faction_id+" .Faction " }) . style("font-weight", "200") .on('mouseover', function(d) { // show the tooltip on mouse over // when the bar is mouse-overed, we slightly decrease opacity of the bar. // d3.select(this).style("cursor", "default") // d3.select(this) // .style("font", ""+ textSize.location1Hover+"px 'ewert'") d3.selectAll(".Faction-" + d.Faction_id +" ") .style('fill', 'black') . style("font-weight", "600") d3.select(this) .style("cursor", "default") .style('fill', 'black') . style("font-weight", "600") }) .on('mouseout', function(d) { // show the tooltip on mouse over // when the bar is mouse-overed, we slightly decrease opacity of the bar. // d3.select(this).style("cursor", "default") // d3.select(this) // .style("font", ""+ textSize.location1Hover+"px 'ewert'") d3.selectAll(".Faction-" + d.Faction_id +" ") .style('fill', 'black') . style("font-weight", "200") }) //The horistontal line in the plot d3.select('svg').append('g') .selectAll('.line') .data(data) .enter() .append("line") .style("stroke", "black") .attr('x1',function(d){return cleft.C1CM1}) .attr('y1',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('x2',function(d){return margin.leftC1+plot.widthC1}) .attr('y2',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('class','slide1 hline') .style("opacity", function(d){if(d.Location2_nr==1) { return 0.7} else { return 0}}) .style("stroke-dasharray",2.5) .style('stroke-width',0.3) ; //The horistontal line in the plot d3.select('svg').append('g') .selectAll('.line') .data(data) .enter() .append("line") .style("stroke", "black") .attr('x1',function(d){return cleft.C1CM2}) .attr('y1',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('x2',function(d){return margin.leftC1+plot.widthC1}) .attr('y2',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('class','slide1 hline') .style("opacity", function(d){if(d.Location1_nr==1) { return 0.3} else { return 0}}) .style("stroke-dasharray",2.5) .style('stroke-width',0.6) ; //The lines boxing in factions var max_faction = d3.max(Faction, function(d) { return +d.Row;} ); d3.select('svg').append("line") .style("stroke", "black") .attr('x1',function(d){return margin.leftC1+plot.widthC1}) .attr('y1',function(d){return margin.top-20}) .attr('x2',function(d){return margin.leftC1+plot.widthC1}) .attr("y2", function(){return margin.top+yScale_faction(max_faction)+50}) .attr('class','slide1 vline') .style("opacity",1) .style("stroke-dasharray",2.5) .style('stroke-width',0.5) ; d3.select('svg').append("line") .style("stroke", "black") .attr('x1',function(d){return margin.leftC1+plot.widthC1}) .attr("y1", function(){return margin.top+yScale_faction(max_faction)+50}) .attr('x2',function(d){return cleft.C3-margin.leftC3}) .attr("y2", function(){return margin.top+yScale_faction(max_faction)+50}) .attr('class','slide1 vline') .style("opacity",1) .style("stroke-dasharray",2.5) .style('stroke-width',0.5) ; d3.select('svg').append("line") .style("stroke", "black") .attr('x1',function(d){return margin.leftC1+plot.widthC1+margin.leftC2+plot.widthC2}) .attr('y1',function(d){return margin.top-20}) .attr('x2',function(d){return margin.leftC1+plot.widthC1+margin.leftC2+plot.widthC2}) .attr("y2", function(){return margin.top+plot.height}) .attr('class','slide1 vline') .style("opacity",1) .style("stroke-dasharray",2.5) .style('stroke-width',0.5) ; d3.select('svg').append("line") .style("stroke", "black") .attr('x1',function(d){return cleft.C4-margin.leftC4}) .attr('y1',function(d){return margin.top-20}) .attr('x2',function(d){return cleft.C4-margin.leftC4}) .attr("y2", function(){return margin.top+plot.height}) .attr('class','slide1 vline') .style("opacity",1) .style("stroke-dasharray",2.5) .style('stroke-width',0.5) ; ////Legend var legendleft=cleft.C2 var legendtop= margin.top+yScale_faction(max_faction)+130 var legendspace= 15 var rLegend=5 /////headline 1 d3.select('svg').append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (legendleft) +","+(legendtop)+")") .text('Symbol explanation') .style("font", ""+ textSize.headerlegend+"px 'ewert'") .style("fill", 'black') .attr('class','slide1') .style('text-anchor','start') .style("font-weight", "600"); d3.select('svg').append('g') .selectAll('circle') .data(legend_data) .enter() .append('circle') .attr("cy", function(d){ return legendtop+legendspace+(d.Row)*20}) .attr("cx", function(d){return legendleft+rLegend+(d.Column)*100}) .attr('r',rLegend*1.4) .attr('class','slide1') .style("fill", function(d){if(d.Row==6 & d.Column==0) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Row==6 & d.Column==0) { return 1} else { return 0}}) d3.select('svg').append('g') .selectAll('circle') .data(legend_data) .enter() .append('circle') .attr("cy", function(d){ return legendtop+legendspace+(d.Row)*20}) .attr("cx", function(d){if(d.Row<=3 & d.Column==0 ) { return legendleft+rLegend+(d.Column)*100} else {return legendleft+rLegend+(d.Column)*100}}) .attr('r',rLegend) .attr('class','Legend_circles slide1') .style("fill", function(d){if(d.Row==1 &d.Column==0 ) { return color.g1} if(d.Row==2 & d.Column==0 ) { return color.g2} if(d.Row==3 & d.Column==0) { return color.g3} else { return color.g4}}) d3.select('svg').append('g') .selectAll('circle') .data(legend_data) .enter() .append('circle') .attr("cy", function(d){ return legendtop+legendspace+(d.Row)*20}) .attr("cx", function(d){if(d.Row<=3 & d.Column==0 ) { return legendleft+rLegend+(d.Column)*100} else {return legendleft+rLegend+(d.Column)*100}}) .attr('r',rLegend/2) .attr('class','slide1') .style("fill", function(d){if(d.Row==7 & d.Column==0) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Row==7 & d.Column==0) { return 1} else { return 0}}) d3.select('svg').append('g') .selectAll('.legend_name') .data(legend_data) .enter() .append('text') .attr('y',function(d){return legendtop+legendspace+(d.Row)*20+4}) .attr("x", function(d){ return legendleft+rLegend+15+(d.Column)*100}) .style('text-anchor','Start') .text(function(d){return d.Alignment}) .style("font", ""+ textSize.legend+"px 'ewert'") .style("fill", function(d){ return "text_fill"}) .style('opacity',1) .style("font-weight", "200") .style('stroke-width',1) .attr("class", function(d) { return "slide1"}) d3.select('svg').call(tip_main_location); d3.select('svg').append('g') .selectAll('.Location_location_1') .data(location_data) .enter() .append('text') .attr('x',function(d){return cleft.C3}) .attr('y',function(d){return margin.top+(yScale_location(d.Location_name)+r)}) .style('text-anchor','Start') .text(function(d){return d.Location1}) .style("font", ""+ textSize.location1+"px 'ewert'") .attr("class", function(d) { return "slide1 Quest_location-" + d.Location_name+ " Location1" }) .style("font-weight", "200") .style("pointer-events", function(d){if(d.Location1_nr==1) { return 'auto'} else { return 'none'}}) .style("opacity", function(d){if(d.Location1_nr==1) { return 1} else { return 0}}) .on('mouseover', function(d) { // show the tooltip on mouse over tip_main_location.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style("cursor", "default") d3.select(this) .style("font-weight", "600") d3.selectAll(".Main_Quest_location-"+ d.Main_location_name +".Quest" ) .style("font-weight", "600") .style('fill','whitesmoke') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_main_location.hide(); d3.select(this) .style("font-weight", "200") d3.selectAll(".Main_Quest_location-"+ d.Main_location_name +".Quest" ) .style("font-weight", "200") .style('fill','black') }); d3.select('svg').call(tip_location); d3.select('svg').append('g') .selectAll('.Location_location_2') .data(location_data) .enter() .append('text') .attr('x',function(d){return cleft.C3C2}) .attr('y',function(d){return margin.top+(yScale_location(d.Location_name))+r}) .style('text-anchor','Start') .text(function(d){return d.Location2}) .style("font", ""+ textSize.location2+"px 'ewert'") .attr("class", function(d) { return "slide1 Quest_location-" + d.Location_name+ " Location2" }) .style("opacity",1) .style("font-weight", "200") .on('mouseover', function(d) { // show the tooltip on mouse over d3.select(this).style("cursor", "default") tip_location.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this) .style("font-weight", "600") d3.selectAll(".Quest_location-" + d.Location_name+ ".Quest" ) .style("font-weight", "600") .style('fill','whitesmoke') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_location.hide(); d3.select(this) .style("font-weight", "200") d3.selectAll(".Quest_location-" + d.Location_name+ ".Quest" ) .style("font-weight", "200") .style('fill','black') }); d3.select('svg').call(tip_quests) d3.select('svg').append('g') .selectAll('.quest') .data(Quest_data) .enter() .append('text') .attr('x',function(d){return cleft.C4}) .attr('y',function(d){return margin.top+yScaleQuest(d.Quest)}) .style('text-anchor','Start') .text(function(d){return d.Quest}) .style("font", ""+ textSize.quest+"px 'ewert'") .style("fill", function(d){ return "text_fill"}) .style("opacity",1) .style("font-weight", "200") .attr("class", function(d) { return "slide1 Quest_location-" + d.Location_name +" Main_Quest_location-"+ d.Main_location_name+ " Quest_giver-"+d.Quest_giver+" Quest_target-"+d.Quest_target+" Quest" }) .style("text-decoration", function(d){if(d.Completed==0) { return 'none'} else { return 'line-through'}}) .on('mouseover', function(d) { d3.select(this).style("cursor", "default") // show the tooltip on mouse over tip_quests.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.selectAll(".Quest_giver-" + d.Quest_giver+ ".First_Name") .style('opacity', 1) .style("font-weight", "600") .style('fill','whitesmoke') d3.select(this) .style('opacity', 1) .style("font-weight", "600") d3.selectAll(".Quest_target-" + d.Quest_target+".First_Name" ) .style('opacity', 1) .style("font-weight", "600") .style('fill','whitesmoke') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location2" ) .style("font-weight", "600") .style('fill','whitesmoke') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location1" ) .style("font-weight", "600") .style('fill','whitesmoke') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_quests.hide(); d3.select(this) .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_giver-" + d.Quest_giver+ ".First_Name") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_target-" + d.Quest_target+".First_Name" ) .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location2" ) .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location1" ) .style("font-weight", "200") .style('fill','black') }); }35:T1c4a,slide2 =function() { d3.select('svg') .selectAll(".Button1") .style('fill-opacity',0) d3.select('svg') .selectAll(".Button2") .style('fill-opacity',0.1) d3.select('svg') .selectAll(".Button3") .style('fill-opacity',0) d3.select('svg') .selectAll(".slide2") .remove() d3.select('svg') .selectAll(".slide1") .remove() d3.select('svg') .selectAll(".slideMaps") .remove() /////headline 1 d3.select("svg") .append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin2.left) +","+(margin.top-110)+")") .text('Treasury') .style("font", ""+ textSize.header+"px 'ewert'") .style("fill", 'black') .attr('class','slide2') .style('text-anchor','start') .style("font-weight", "600");; /////headline 1 d3.select("svg") .append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin2.left) +","+(margin.top-40)+")") .text('Gems and gold') .style("font", ""+ textSize.header2+"px 'ewert'") .style("fill", 'black') .attr('class','slide2') .style('text-anchor','start') .style("font-weight", "600");;; var margin2col2=600 /////headline 1 d3.select("svg") .append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin2.left+ margin2col2) +","+(margin.top-40)+")") .text('Shared magical items and consumables') .style("font", ""+ textSize.header2+"px 'ewert'") .style("fill", 'black') .attr('class','slide2') .style('text-anchor','start') .style("font-weight", "600");;; d3.select("svg") .selectAll('.text') .data(treasury_data) .enter() .append("text") .attr('x',function(d){return margin2.left}) .attr('y',function(d){return margin.top+(yScale_treasury(d.Id))+r}) .style('text-anchor','Start') .text(function(d){return d.Type}) .style("font", ""+ textSize.treasury+"px 'ewert'") .style("opacity",0.8) .style("font-weight", "300") .style("font-weight", function(d){if(d.Id==1) { return "600"} else { return "300"}}) .attr('class','slide2') ; d3.select("svg") .selectAll('.text') .data(treasury_data) .enter() .append("text") .attr('x',function(d){return margin2.left+75}) .attr('y',function(d){return margin.top+(yScale_treasury(d.Id))+r}) .style('text-anchor','Start') .text(function(d){return d.Name}) .style("font", ""+ textSize.treasury+"px 'ewert'") .style("opacity",0.8) .style("font-weight", function(d){if(d.Id==1) { return "600"} else { return "300"}}) .attr('class','slide2') d3.select("svg") .selectAll('.text') .data(treasury_data) .enter() .append("text") .attr('x',function(d){return margin2.left+250}) .attr('y',function(d){return margin.top+(yScale_treasury(d.Id))+r}) .style('text-anchor','middle') .text(function(d){return d.Amount}) .style("font", ""+ textSize.treasury+"px 'ewert'") .style("opacity",0.8) .style("font-weight", function(d){if(d.Id==1) { return "600"} else { return "300"}}) .attr('class','slide2') d3.select("svg") .selectAll('.text') .data(treasury_data) .enter() .append("text") .attr('x',function(d){return margin2.left+350}) .attr('y',function(d){return margin.top+(yScale_treasury(d.Id))+r}) .style('text-anchor','middle') .text(function(d){return d.Value}) .style("font", ""+ textSize.treasury+"px 'ewert'") .style("opacity",0.8) .style("font-weight", function(d){if(d.Id==1) { return "600"} else { return "300"}}) .attr('class','slide2') d3.select("svg") .selectAll('.text') .data(treasury_data) .enter() .append("text") .attr('x',function(d){return margin2.left+450}) .attr('y',function(d){return margin.top+(yScale_treasury(d.Id))+r}) .style('text-anchor','middle') .text(function(d){return d.Total_Value}) .style("font", ""+ textSize.treasury+"px 'ewert'") .style("opacity",0.8) .style("font-weight", function(d){if(d.Id==1) { return "600"} else { return "300"}}) .attr('class','slide2') d3.select("svg") .selectAll('.text') .data(item_data) .enter() .append("text") .attr('x',function(d){return margin2.left+margin2col2}) .attr('y',function(d){return margin.top+(yScale_items(d.Id))+r}) .style('text-anchor','Start') .text(function(d){return d.Type}) .style("font", ""+ textSize.treasury+"px 'ewert'") .style("opacity",0.8) .style("font-weight", function(d){if(d.Id==1) { return "600"} else { return "300"}}) .attr('class','slide2') ; d3.select("svg") .selectAll('.text') .data(item_data) .enter() .append("text") .attr('x',function(d){return margin2.left+margin2col2+150}) .attr('y',function(d){return margin.top+(yScale_items(d.Id))+r}) .style('text-anchor','Start') .text(function(d){return d.Name}) .style("font", ""+ textSize.treasury+"px 'ewert'") .style("opacity",0.8) .style("font-weight", function(d){if(d.Id==1) { return "600"} else { return "300"}}) .attr('class','slide2') d3.select("svg") .selectAll('.text') .data(item_data) .enter() .append("text") .attr('x',function(d){return margin2.left+margin2col2+420}) .attr('y',function(d){return margin.top+(yScale_items(d.Id))+r}) .style('text-anchor','middle') .text(function(d){return d.Amount}) .style("font", ""+ textSize.treasury+"px 'ewert'") .style("opacity",0.8) .style("font-weight", function(d){if(d.Id==1) { return "600"} else { return "300"}}) .attr('class','slide2') d3.select("svg") .selectAll('.text') .data(item_data) .enter() .append("text") .attr('x',function(d){return margin2.left+margin2col2+520}) .attr('y',function(d){return margin.top+(yScale_items(d.Id))+r}) .style('text-anchor','middle') .text(function(d){return d.Holder}) .style("font", ""+ textSize.treasury+"px 'ewert'") .style("opacity",0.8) .style("font-weight", function(d){if(d.Id==1) { return "600"} else { return "300"}}) .attr('class','slide2') d3.select("svg") .selectAll('.text') .data(item_data) .enter() .append("text") .attr('x',function(d){return margin2.left+margin2col2+450}) .attr('y',function(d){return margin.top+(yScale_items(d.Id))+r}) .style('text-anchor','middle') .text(function(d){return d.Total_Value}) .style("font", ""+ textSize.treasury+"px 'ewert'") .style("opacity",0.8) .style("font-weight", function(d){if(d.Id==1) { return "600"} else { return "300"}}) .attr('class','slide2') ; }36:T3795,slideMaps =function() { d3.select('svg') .selectAll(".Button1") .style('fill-opacity',0) d3.select('svg') .selectAll(".Button2") .style('fill-opacity',0) d3.select('svg') .selectAll(".Button3") .style('fill-opacity',0.1) d3.select('svg') .selectAll(".slide2") .remove() d3.select('svg') .selectAll(".slide1") .remove() d3.select('svg'). append('g').selectAll() .data(data) .enter() .append('image') .attr("xlink:href", "https://github.com/JDDalen/Broom/blob/master/Silver_Marches_v2_small.png?raw=true") .attr("x", function(d){ return plotwidthT/2-750}) .attr("y", function(d){ return margin.top }) .attr("width", 1500) .attr("height", 1000) .attr('class','slideMaps silver_marches maps'); ; const buttonStart=plotwidthT/2-750 const buttonTop=margin.top-50 const buttonRight=850 const buttonWidth=200 const buttonHeight=40 const buttonSpace=10 d3.select('svg') .append('rect') .attr('y',function(d,i){return margin.top-50}) .attr('x',function(d,i){return buttonStart}) .attr("width",buttonWidth) .attr("height",buttonHeight) .style('stroke','black') .style("fill-opacity",0.1 ) .style("stroke-opacity",0.7 ) .style('stroke-width','1') .style("padding", "6px") .attr('class','mButton1 slideMaps') .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}) .on( "mouseout", function(d) {d3.select(this).style("cursor", "default");}) .on('click',function() { d3.select('svg') .selectAll(".mButton1") .style('fill-opacity',0.1) d3.select('svg') .selectAll(".mButton2") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton3") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton4") .style('fill-opacity',0) d3.select('svg') .selectAll(".maps") .remove() d3.select('svg'). append('g').selectAll() .data(data) .enter() .append('image') .attr("xlink:href", "https://github.com/JDDalen/Broom/blob/master/Silver_Marches_v2_small.png?raw=true") .attr("x", function(d){ return plotwidthT/2-750}) .attr("y", function(d){ return margin.top }) .attr("width", 1500) .attr("height", 1000) .attr('class','slideMaps silver_marches maps'); }) d3.select('svg') .append('text') .attr('y',function(d,i){return buttonTop+buttonHeight/2+4}) .attr('x',function(d,i){return buttonStart+buttonWidth/2}) .style('text-anchor','middle') .text("Silver Marches") .style("font", ""+ textSize.Faction+"px 'ewert'") .style("opacity",1) .style("font-weight", "400") .attr('class',' slideMaps') .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}) .on( "mouseout", function(d) {d3.select(this).style("cursor", "default");}) .on('click',function() { d3.select('svg') .selectAll(".mButton1") .style('fill-opacity',0.1) d3.select('svg') .selectAll(".mButton2") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton3") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton4") .style('fill-opacity',0) d3.select('svg') .selectAll(".maps") .remove() d3.select('svg'). append('g').selectAll() .data(data) .enter() .append('image') .attr("xlink:href", "https://github.com/JDDalen/Broom/blob/master/Silver_Marches_v2_small.png?raw=true") .attr("x", function(d){ return plotwidthT/2-750}) .attr("y", function(d){ return margin.top }) .attr("width", 1500) .attr("height", 1000) .attr('class','slideMaps silver_marches maps'); }) d3.select('svg') .append('rect') .attr('y',function(d,i){return margin.top-50}) .attr('x',function(d,i){return buttonStart+buttonWidth+buttonSpace}) .attr("width",buttonWidth) .attr("height",buttonHeight) .style('stroke','black') .style("fill-opacity",0 ) .style("stroke-opacity",0.7 ) .style('stroke-width','1') .style("padding", "6px") .attr('class','mButton2 slideMaps') .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}) .on( "mouseout", function(d) {d3.select(this).style("cursor", "default");}) .on('click',function() { d3.select('svg') .selectAll(".mButton1") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton2") .style('fill-opacity',0.1) d3.select('svg') .selectAll(".mButton3") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton4") .style('fill-opacity',0) d3.select('svg') .selectAll(".maps") .remove() d3.select('svg').append('g').selectAll() .data(data) .enter() .append('image') .attr("xlink:href", "https://github.com/JDDalen/Broom/blob/master/Silverymoon_jpg_HD.jpg?raw=true") .attr("x", function(d){ return plotwidthT/2-750}) .attr("y", function(d){ return buttonTop+buttonHeight/2 }) .attr("width", 1500) .attr("height", 1000) .attr('class','slideMaps silverymoon maps'); }) d3.select('svg') .append('text') .attr('y',function(d,i){return buttonTop+buttonHeight/2+4}) .attr('x',function(d,i){return buttonStart+buttonWidth+buttonSpace+buttonWidth/2}) .style('text-anchor','middle') .text("Silverymoon") .style("font", ""+ textSize.Faction+"px 'ewert'") .style("opacity",1) .style("font-weight", "400") .attr('class','slideMaps') .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}) .on( "mouseout", function(d) {d3.select(this).style("cursor", "default");}) .on('click',function() { d3.select('svg') .selectAll(".mButton1") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton2") .style('fill-opacity',0.1) d3.select('svg') .selectAll(".mButton3") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton4") .style('fill-opacity',0) d3.select('svg') .selectAll(".maps") .remove() d3.select('svg').append('g').selectAll() .data(data) .enter() .append('image') .attr("xlink:href", "https://github.com/JDDalen/Broom/blob/master/Silverymoon_jpg_HD.jpg?raw=true") .attr("x", function(d){ return plotwidthT/2-750}) .attr("y", function(d){ return buttonTop+buttonHeight/2 }) .attr("width", 1500) .attr("height", 1000) .attr('class','slideMaps silverymoon maps'); }) d3.select('svg') .append('rect') .attr('y',function(d,i){return margin.top-50}) .attr('x',function(d,i){return buttonStart+buttonWidth*2+buttonSpace*2}) .attr("width",buttonWidth) .attr("height",buttonHeight) .style('stroke','black') .style("fill-opacity",0 ) .style("stroke-opacity",0.7 ) .style('stroke-width','1') .style("padding", "6px") .attr('class','mButton3 slideMaps') .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}) .on( "mouseout", function(d) {d3.select(this).style("cursor", "default");}) .on('click',function() { d3.select('svg') .selectAll(".mButton1") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton2") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton3") .style('fill-opacity',0.1) d3.select('svg') .selectAll(".mButton4") .style('fill-opacity',0) d3.select('svg') .selectAll(".maps") .remove() d3.select('svg'). append('g').selectAll() .data(data) .enter() .append('image') .attr("xlink:href", "https://github.com/JDDalen/Broom/blob/master/Sundabar.png?raw=true") .attr("x", function(d){ return plotwidthT/2-750}) .attr("y", function(d){ return margin.top }) .attr("width", 1500) .attr("height", 1000) .attr('class','slideMaps sundabar maps'); }) d3.select('svg') .append('text') .attr('y',function(d,i){return buttonTop+buttonHeight/2+4}) .attr('x',function(d,i){return buttonStart+buttonWidth*2+buttonSpace*2+buttonWidth/2}) .style('text-anchor','middle') .text("Sundabar") .style("font", ""+ textSize.Faction+"px 'ewert'") .style("opacity",1) .style("font-weight", "400") .attr('class','slideMaps') .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}) .on( "mouseout", function(d) {d3.select(this).style("cursor", "default");}) .on('click',function() { d3.select('svg') .selectAll(".mButton1") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton2") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton3") .style('fill-opacity',0.1) d3.select('svg') .selectAll(".mButton4") .style('fill-opacity',0) d3.select('svg') .selectAll(".maps") .remove() d3.select('svg'). append('g').selectAll() .data(data) .enter() .append('image') .attr("xlink:href", "https://github.com/JDDalen/Broom/blob/master/Sundabar.png?raw=true") .attr("x", function(d){ return plotwidthT/2-750}) .attr("y", function(d){ return margin.top }) .attr("width", 1500) .attr("height", 1000) .attr('class','slideMaps sundabar maps'); }) d3.select('svg') .append('rect') .attr('y',function(d,i){return margin.top-50}) .attr('x',function(d,i){return buttonStart+buttonWidth*3+buttonSpace*3}) .attr("width",buttonWidth) .attr("height",buttonHeight) .style('stroke','black') .style("fill-opacity",0 ) .style("stroke-opacity",0.7 ) .style('stroke-width','1') .style("padding", "6px") .attr('class','mButton4 slideMaps') .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}) .on( "mouseout", function(d) {d3.select(this).style("cursor", "default");}) .on('click',function() { d3.select('svg') .selectAll(".mButton1") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton2") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton3") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton4") .style('fill-opacity',0.1) d3.select('svg') .selectAll(".maps") .remove() d3.select('svg'). append('g').selectAll() .data(data) .enter() .append('image') .attr("xlink:href", "https://github.com/JDDalen/Broom/blob/master/Everlund.png?raw=true") .attr("x", function(d){ return plotwidthT/2-750}) .attr("y", function(d){ return margin.top }) .attr("width", 1500) .attr("height", 1000) .attr('class','slideMaps everlund maps'); }) d3.select('svg') .append('text') .attr('y',function(d,i){return buttonTop+buttonHeight/2+4}) .attr('x',function(d,i){return buttonStart+buttonWidth*3+buttonSpace*3+buttonWidth/2}) .style('text-anchor','middle') .text("Everlund") .style("font", ""+ textSize.Faction+"px 'ewert'") .style("opacity",1) .style("font-weight", "400") .attr('class','slideMaps') .on("mouseover", function(d) {d3.select(this).style("cursor", "pointer");}) .on( "mouseout", function(d) {d3.select(this).style("cursor", "default");}) .on('click',function() { d3.select('svg') .selectAll(".mButton1") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton2") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton3") .style('fill-opacity',0) d3.select('svg') .selectAll(".mButton4") .style('fill-opacity',0.1) d3.select('svg') .selectAll(".maps") .remove() d3.select('svg'). append('g').selectAll() .data(data) .enter() .append('image') .attr("xlink:href", "https://github.com/JDDalen/Broom/blob/master/Everlund.png?raw=true") .attr("x", function(d){ return plotwidthT/2-750}) .attr("y", function(d){ return margin.top }) .attr("width", 1500) .attr("height", 1000) .attr('class','slideMaps everlund maps'); }) }37:[] 31:{"id":"6e577ed745da347b","slug":"the-broom-of-faerun-v2-1","title":"The Broom of Faerun v2.1","thumbnail":"15413cb5b3767b2bc96d26c9a7a4d4a76daae05df25085bb88ce108d5b22c398","access_level":"public","create_time":"$D2020-12-16T14:07:29.150Z","update_time":"$D2021-05-21T18:36:30.031Z","view_time":null,"first_public_time":"$D2020-12-16T19:42:19.553Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"45fbd05608299361","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":"starter_2024"},"version":2771,"publish_version":2771,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc05f11c6819093b","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":null}],"members":[{"type":"individual","id":"dc05f11c6819093b","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"The Broom of Faerun v2.1","cells":[{"id":0,"value":"md`# The Broom of Faerun v2.1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`##### Click the ... in top left corner.
clik: View in fullscreen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2487,"value":"md`### Text and font-size`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"color= ({g1:\"#689768\",\n g2:\"#5a677d\",\n g3:\"#995a5e\",\n \n g4:\"darkgray\",\n q:\"whitesmoke\",\n dName:\"#606060\"\n })\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"textSize= ({mainHeader:45,\n header:29,\n header2:25,\n headerlegend:20,\n location1:19,\n location2:16,\n name:15,\n nameHover:19,\n Alignment:17,\n Faction:16,\n location1Hover:22,\n location2Hover:17,\n treasury:22,\n quest:17,\n questHover:20,\n legend:17\n })\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2485,"value":"md`### Tooltips`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"tip = d3Tip()\n\n .attr('class', \"d3-tip\")\n .style(\"color\", \"black\")\n .style(\"background-color\", 'rgba(202, 158, 110,.9)')\n\n .style(\"padding\", \"6px\")\n .style(\"border-radius\", \"10px\")\n .style(\"font\", \"16px 'ewert' \")\n.style(\"fill-opacity\",0)\n\n\n .offset([-5,0])\n .attr(\"width\",'100')\n\n .html(function(d) { return `Race: ${(d.Race)}
\n Occupation: ${(d.Occupation)}
\n Party Relationship: ${(d.Party_relationship)}
` \n ; })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1424,"value":"tip_location= d3Tip()\n\n .attr('class', \"d3-tip\")\n .style(\"color\", \"black\")\n .style(\"background-color\", 'rgba(202, 158, 110,.8)')\n\n .style(\"padding\", \"6px\")\n .style(\"border-radius\", \"10px\")\n .style(\"font\", \"16px 'ewert' \")\n.style(\"opacity\",0.2)\n\n\n .offset([-5,0])\n .attr(\"width\",100)\n \n .html(function(d) { return ` \n ${(d.Location_description)}
\n`\n\n ; })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"tip_main_location= d3Tip()\n\n .attr('class', \"d3-tip\")\n .style(\"color\", \"black\")\n .style(\"background-color\", 'rgba(202, 158, 110,.8)')\n\n .style(\"padding\", \"6px\")\n .style(\"border-radius\", \"10px\")\n .style(\"font\", \"16px 'ewert' \")\n.style(\"opacity\",0.2)\n\n .offset([-5,0])\n\n .attr(\"width\",100)\n .html(function(d) { return ` \n ${(d.Main_location_description)}
\n`\n\n ; })\n .attr(\"width\",50)\n .attr(\"height\", 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"tip_quests= d3Tip()\n\n .attr('class', \"d3-tip\")\n .style(\"color\", \"black\")\n .style(\"background-color\", 'rgba(202, 158, 110,.8)')\n\n .style(\"padding\", \"6px\")\n .style(\"border-radius\", \"10px\")\n .style(\"font\", \"16px 'ewert' \")\n.style(\"opacity\",0.2)\n\n .offset([-5, -150])\n\n .attr(\"width\",100)\n .html(function(d) { return ` ${(d.Quest)}
\n Quest Giver: ${(d.Quest_giver)}
\n Quest target: ${(d.Quest_target)}
\n Location: ${(d.Location2)} in ${(d.Location1)}
\n Description: ${(d.Description)}
\n Reward: ${(d.Reward)}` \n ; })\n .attr(\"width\",50)\n .attr(\"height\", 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2479,"value":"md`### Pages`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1949,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2541,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2462,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"xScale= d3.scaleLinear()\n .domain([1,4])\n .range([0 , (plot.widthC1)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"yScale= d3.scaleBand()\n .domain(data.map((d) => d[\"First_Name\"]))\n .range([0 , plot.height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"yScale_location= d3.scaleBand()\n .domain(location_data.map((d) => d[\"Location_name\"]))\n .range([0 , plot.height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2493,"value":"yScale_faction= d3.scaleLinear()\n .domain([0, d3.max(Faction, function(d) { return d.Row; })])\n\n .range([0 , plot.height/4])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"yScaleQuest= d3.scaleBand()\n .domain(Quest_data.map((d) => d[\"Quest\"]))\n .range([0 , plot.height/1.2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1488,"value":"yScale_treasury= d3.scaleBand()\n .domain(treasury_data.map((d) => d[\"Id\"]))\n .range([0 , plot.height/2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2004,"value":"yScale_items= d3.scaleBand()\n .domain(item_data.map((d) => d[\"Id\"]))\n .range([0 , plot.height/2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2465,"value":"md`### Plot size`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2683,"value":" row_count = d3.max(data, function(d) { return +d.Row;} );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1728,"value":"right=({start1:30,\n start2:190,\n startLine1:10,\n startLine2:390});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":" margin= ({top:350,\nbottom:150,\nleftC1:470,\nleftC2:30, \nleftC3:30, \nleftC4:30, \nright:0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1511,"value":" margin2= ({top:250,\nbottom:150,\n left:200,\nright:350})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2681,"value":"cleft=({C1:margin.leftC1,\n C1CM2:margin.leftC1-370,\n C1CM1:margin.leftC1-215,\n C2:margin.leftC1+plot.widthC1+margin.leftC2 ,\n C3:margin.leftC1+plot.widthC1+margin.leftC2+plot.widthC2+margin.leftC3 ,\n C3C2:margin.leftC1+plot.widthC1+margin.leftC2+plot.widthC2+margin.leftC3+150, \n C4:margin.leftC1+plot.widthC1+margin.leftC2+plot.widthC2+margin.leftC3+plot.widthC3+margin.leftC4 \n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2680,"value":"rTop=({R1:margin.top-180,\n R2:margin.top-80,\n\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"plot=({widthC1:400,\n widthC2:200,\n widthC3:360,\n widthC4:400,\n height:row_count*20,\n width2:530});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2678,"value":"plotwidthT=margin.leftC1+margin.leftC2+margin.leftC3+margin.leftC4+plot.widthC1+plot.widthC2+plot.widthC3+plot.widthC4+margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"r=5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2468,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"data_living=(data.filter(function(d){return d.Deceased== 0;}))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"legend_data=d3.json(\"https://raw.githubusercontent.com/JDDalen/Broom/master/legend.json\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"Quest_data=d3.json('https://raw.githubusercontent.com/JDDalen/Broom/master/quest.json')\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"data=d3.json(\"https://raw.githubusercontent.com/JDDalen/Broom/master/person2.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2258,"value":"Faction=d3.json(\"https://raw.githubusercontent.com/JDDalen/Broom/master/Faction.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1476,"value":"treasury_data=d3.json(\"https://raw.githubusercontent.com/JDDalen/Broom/master/treasury.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2001,"value":"item_data=d3.json(\"https://raw.githubusercontent.com/JDDalen/Broom/master/magic_items.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"location_data2=d3.json(\"https://raw.githubusercontent.com/JDDalen/Broom/master/locations.json\")\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"location_data=location_data2.sort((e,f) => d3.ascending(e.Main_location_name,f.Main_location_name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2719,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2472,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"async function addWebFont(selection, fontName, fontURL, fontType = 'woff2') {\n const fontData = await toDataURL(fontURL);\n return selection.append('style').text(`\n @font-face {\n font-family: '${fontName}';\n src: url(${fontData}) format('${fontType}');\n }\n `);\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"async function toDataURL(url) {\n return new Promise(async(resolve, reject) => {\n const res = await fetch(url);\n if(!res.ok) return reject(`Error: ${res.status} ${res.statusText}`);\n const blob = await res.blob();\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n reader.onloadend = () => resolve(reader.result);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"d3Tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"