2d:null 2e:["$","title",null,{"children":"The Broom of Faerun v6 | Joakim Dalen | Observable"}] 33:T6390,chart={ ///Creating the canvas const svg=d3.select(DOM.svg(plot.width+margin.left+margin.right+plot.width2, 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", 2130) .attr("height", "1600") .style("object-fit","fill") .attr('opacity',0.03) /////headline 1 svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left-l.start1) +","+(margin.top-110)+")") .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 2 svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+plot.width+right.start1) +","+(margin.top-110)+")") .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("+ (margin.left+plot.width+margin.right+125) +","+(margin.top-110)+")") .text('Quests') .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 margin.left-l.start1}) .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 margin.left-l.start2}) .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('circle') .data(data) .enter() .append('circle') .attr('cy',function(d){return margin.top+(yScale(d.First_Name))} ) .attr('cx',function(d,i) {return margin.left+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.left+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.g1} if(d.Column==3 & d.Deceased==0) { return color.g2} 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.left+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.left+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.g1} if(d.Column==3 & d.Deceased==0) { return color.g2} 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", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "400") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "600") .style('fill','#689493') d3.selectAll(".Quest_target-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "600") .style('fill','#689493') }) .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", "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.left+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 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", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "400") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font", "16px ") .style("font-weight", "600") .style('fill','#689493') d3.selectAll(".Quest_target-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font", "16px ") .style("font-weight", "600") .style('fill','#4378a2') }) .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') .data(data) .enter() .append('text') .attr('y',function(d){return margin.top-30}) .attr('x',function(d){return margin.left+xScale(d.Column)}) .style('text-anchor','Start') .text(function(d){return d.Faction}) .style("font", ""+ textSize.Faction+"px 'ewert'") .attr('class','slide1') .style("fill", function(d){ return "text_fill"}) .style("opacity", function(d){if(d.First_faction=='1') { return 1} else { return 0}}) .style("font-weight", "600") //The horistontal line in the plot svg.append('g') .selectAll('.line') .data(data) .enter() .append("line") .style("stroke", "#282828") .attr('x1',function(d){return margin.left-l.start2}) .attr('y1',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('x2',function(d){return margin.left+plot.width}) .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", "#282828") .attr('x1',function(d){return margin.left-l.start1}) .attr('y1',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('x2',function(d){return margin.left+plot.width}) .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) ; ////Legend var legendleft=margin.left+400 var legendtop=margin.top-100 var rLegend=5 svg.append('g') .selectAll('circle') .data(legend_data) .enter() .append('circle') .attr("cy", function(d){ return legendtop+(d.Column)*20}) .attr("cx", function(d){if(d.Row<=3 & d.Column==0 ) { return legendleft+rLegend+(d.Row-1)*110} else {return legendleft+rLegend+(d.Row-1)*110}}) .attr('r',rLegend*1.4) .attr('class','slide1') .style("fill", function(d){if(d.Row==2 & d.Column==1) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Row==2 & d.Column==1) { return 1} else { return 0}}) svg.append('g') .selectAll('circle') .data(legend_data) .enter() .append('circle') .attr("cy", function(d){ return legendtop+(d.Column)*20}) .attr("cx", function(d){if(d.Row<=3 & d.Column==0 ) { return legendleft+rLegend+(d.Row-1)*110} else {return legendleft+rLegend+(d.Row-1)*110}}) .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+(d.Column)*20}) .attr("cx", function(d){if(d.Row<=3 & d.Column==0 ) { return legendleft+rLegend+(d.Row-1)*110} else {return legendleft+rLegend+(d.Row-1)*110}}) .attr('r',rLegend/2) .attr('class','slide1') .style("fill", function(d){if(d.Row==3 & d.Column==1) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Row==3 & d.Column==1) { return 1} else { return 0}}) svg.append('g') .selectAll('.legend_name') .data(legend_data) .enter() .append('text') .attr('y',function(d){return legendtop+(d.Column)*20+4}) .attr("x", function(d){ return legendleft+rLegend+15+(d.Row-1)*110}) .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 margin.left+plot.width+right.start1}) .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", ""+ textSize.location1Hover+"px 'ewert'") d3.selectAll(".Main_Quest_location-"+ d.Main_location_name +".Quest" ) .style("font-weight", "600") .style('fill','#4378a2') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_main_location.hide(); d3.select(this) .style("font", ""+ textSize.location1+"px 'ewert'") .style("font-weight", "200") d3.selectAll(".Main_Quest_location-"+ d.Main_location_name +".Quest" ) .style("font", ""+ textSize.quest+"px 'ewert'") .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 margin.left+plot.width+right.start2}) .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", ""+ textSize.location2Hover+"px 'ewert'") d3.selectAll(".Quest_location-" + d.Location_name+ ".Quest" ) .style("font", ""+ textSize.questHover+"px 'ewert'") .style("font-weight", "600") .style('fill','#4378a2') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_location.hide(); d3.select(this) .style("font", ""+ textSize.location2+"px 'ewert'") .style("font-weight", "200") d3.selectAll(".Quest_location-" + d.Location_name+ ".Quest" ) .style("font", ""+ textSize.quest+"px 'ewert'") .style("font-weight", "200") .style('fill','black') }); //The Vertical line in the plot svg.append("line") .style("stroke", "Gray") .attr('x1',function(d){return margin.left+plot.width+right.startLine1}) .attr('y1',function(d){return margin.top-20}) .attr('x2',function(d){return margin.left+plot.width+right.startLine1}) .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", "Gray") .attr('x1',function(d){return margin.left+plot.width+right.startLine2}) .attr('y1',function(d){return margin.top-20}) .attr('x2',function(d){return margin.left+plot.width+right.startLine2}) .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.call(tip_quests) svg.append('g') .selectAll('.quest') .data(Quest_data) .enter() .append('text') .attr('x',function(d){return margin.left+plot.width+margin.right+125}) .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", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "600") .style('fill','#689493') d3.select(this) .style('opacity', 1) .style("font", ""+ textSize.questHover+"px 'ewert'") .style("font-weight", "400") d3.selectAll(".Quest_target-" + d.Quest_target+".First_Name" ) .style('opacity', 1) .style("font", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "600") .style('fill','#4378a2') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location2" ) .style("font", ""+ textSize.location2Hover+"px 'ewert'") .style("font-weight", "600") .style('fill','#4378a2') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location1" ) .style("font", ""+ textSize.location1Hover+"px 'ewert'") .style("font-weight", "600") .style('fill','#4378a2') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_quests.hide(); d3.select(this) .style("font", ""+ textSize.quest+"px 'ewert'") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_giver-" + d.Quest_giver+ ".First_Name") .style("font", ""+ textSize.name+"px 'ewert'") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_target-" + d.Quest_target+".First_Name" ) .style("font", ""+ textSize.name+"px 'ewert'") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location2" ) .style("font", ""+ textSize.location2+"px 'ewert'") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location1" ) .style("font", ""+ textSize.location1+"px 'ewert'") .style("font-weight", "200") .style('fill','black') }); var buttonBottom=100 var buttonRight=500 var buttonWidth=200 var buttonHeight=40 svg.append('g') .append('rect') .attr('y',function(d,i){return plot.height+margin.top+margin.bottom-buttonBottom}) .attr('x',function(d,i){return plot.width+margin.left+margin.right+plot.width2-buttonRight}) .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 plot.height+margin.top+margin.bottom-buttonBottom+buttonHeight/2+4}) .attr('x',function(d,i){return plot.width+margin.left+margin.right+plot.width2-buttonRight+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 plot.height+margin.top+margin.bottom-buttonBottom}) .attr('x',function(d,i){return plot.width+margin.left+margin.right+plot.width2-buttonRight+buttonWidth+10}) .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 plot.height+margin.top+margin.bottom-buttonBottom+buttonHeight/2+4}) .attr('x',function(d,i){return plot.width+margin.left+margin.right+plot.width2-buttonRight+buttonWidth+buttonWidth/2+10}) .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");}) return svg.node(); }34:T56c5,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(".slide2") .remove() d3.select('svg') .selectAll(".slide2") .remove() d3.select('svg') .selectAll(".slide1") .remove() /////headline 1 d3.select("svg") .append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left-l.start1) +","+(margin.top-110)+")") .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 2 d3.select("svg") .append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+plot.width+right.start1) +","+(margin.top-110)+")") .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("+ (margin.left+plot.width+margin.right+125) +","+(margin.top-110)+")") .text('Quests') .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 margin.left-l.start1}) .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 margin.left-l.start2}) .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('circle') .data(data) .enter() .append('circle') .attr('cy',function(d){return margin.top+(yScale(d.First_Name))} ) .attr('cx',function(d,i) {return margin.left+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.left+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.g1} if(d.Column==3 & d.Deceased==0) { return color.g2} 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.left+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.left+xScale(d.Column)}) .attr('r',r*2) .attr("class", function(d) { return "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.g1} if(d.Column==3 & d.Deceased==0) { return color.g2} 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", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "400") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "600") .style('fill','#689493') d3.selectAll(".Quest_target-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "600") .style('fill','#689493') }) .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", "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.left+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 First_Name-" + d.First_Name+" First_Name Quest_giver-"+ d.First_Name+ " Quest_target-" + d.First_Name }) .style("fill", function(d){ return "text_fill"}) .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", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "400") d3.selectAll(".Quest_giver-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font", "16px ") .style("font-weight", "600") .style('fill','#689493') d3.selectAll(".Quest_target-"+d.First_Name+ ".Quest") .style('opacity', 1) .style("font", "16px ") .style("font-weight", "600") .style('fill','#4378a2') }) .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') .data(data) .enter() .append('text') .attr('y',function(d){return margin.top-30}) .attr('x',function(d){return margin.left+xScale(d.Column)}) .style('text-anchor','Start') .text(function(d){return d.Faction}) .style("font", ""+ textSize.Faction+"px 'ewert'") .attr('class','slide1') .style("fill", function(d){ return "text_fill"}) .style("opacity", function(d){if(d.First_faction=='1') { return 1} else { return 0}}) .style("font-weight", "600") //The horistontal line in the plot d3.select("svg").append('g') .selectAll('.line') .data(data) .enter() .append("line") .style("stroke", "#282828") .attr('x1',function(d){return margin.left-l.start2}) .attr('y1',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('x2',function(d){return margin.left+plot.width}) .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", "#282828") .attr('x1',function(d){return margin.left-l.start1}) .attr('y1',function(d){return margin.top+yScale(d.First_Name)-12}) .attr('x2',function(d){return margin.left+plot.width}) .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) ; ////Legend var legendleft=margin.left+400 var legendtop=margin.top-100 var rLegend=5 d3.select("svg").append('g') .selectAll('circle') .data(legend_data) .enter() .append('circle') .attr("cy", function(d){ return legendtop+(d.Column)*20}) .attr("cx", function(d){if(d.Row<=3 & d.Column==0 ) { return legendleft+rLegend+(d.Row-1)*110} else {return legendleft+rLegend+(d.Row-1)*110}}) .attr('r',rLegend*1.4) .attr('class','slide1') .style("fill", function(d){if(d.Row==2 & d.Column==1) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Row==2 & d.Column==1) { return 1} else { return 0}}) d3.select("svg").append('g') .selectAll('circle') .data(legend_data) .enter() .append('circle') .attr("cy", function(d){ return legendtop+(d.Column)*20}) .attr("cx", function(d){if(d.Row<=3 & d.Column==0 ) { return legendleft+rLegend+(d.Row-1)*110} else {return legendleft+rLegend+(d.Row-1)*110}}) .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+(d.Column)*20}) .attr("cx", function(d){if(d.Row<=3 & d.Column==0 ) { return legendleft+rLegend+(d.Row-1)*110} else {return legendleft+rLegend+(d.Row-1)*110}}) .attr('r',rLegend/2) .attr('class','slide1') .style("fill", function(d){if(d.Row==3 & d.Column==1) { return color.q} else { return "#af4474"}}) .style("opacity", function(d){if(d.Row==3 & d.Column==1) { 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+(d.Column)*20+4}) .attr("x", function(d){ return legendleft+rLegend+15+(d.Row-1)*110}) .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 margin.left+plot.width+right.start1}) .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", ""+ textSize.location1Hover+"px 'ewert'") d3.selectAll(".Main_Quest_location-"+ d.Main_location_name +".Quest" ) .style("font-weight", "600") .style('fill','#4378a2') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_main_location.hide(); d3.select(this) .style("font", ""+ textSize.location1+"px 'ewert'") .style("font-weight", "200") d3.selectAll(".Main_Quest_location-"+ d.Main_location_name +".Quest" ) .style("font", ""+ textSize.quest+"px 'ewert'") .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 margin.left+plot.width+right.start2}) .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", ""+ textSize.location2Hover+"px 'ewert'") d3.selectAll(".Quest_location-" + d.Location_name+ ".Quest" ) .style("font", ""+ textSize.questHover+"px 'ewert'") .style("font-weight", "600") .style('fill','#4378a2') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_location.hide(); d3.select(this) .style("font", ""+ textSize.location2+"px 'ewert'") .style("font-weight", "200") d3.selectAll(".Quest_location-" + d.Location_name+ ".Quest" ) .style("font", ""+ textSize.quest+"px 'ewert'") .style("font-weight", "200") .style('fill','black') }); //The Vertical line in the plot d3.select("svg").append("line") .style("stroke", "Gray") .attr('x1',function(d){return margin.left+plot.width+right.startLine1}) .attr('y1',function(d){return margin.top-20}) .attr('x2',function(d){return margin.left+plot.width+right.startLine1}) .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", "Gray") .attr('x1',function(d){return margin.left+plot.width+right.startLine2}) .attr('y1',function(d){return margin.top-20}) .attr('x2',function(d){return margin.left+plot.width+right.startLine2}) .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").call(tip_quests) d3.select("svg").append('g') .selectAll('.quest') .data(Quest_data) .enter() .append('text') .attr('x',function(d){return margin.left+plot.width+margin.right+125}) .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", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "600") .style('fill','#689493') d3.select(this) .style('opacity', 1) .style("font", ""+ textSize.questHover+"px 'ewert'") .style("font-weight", "400") d3.selectAll(".Quest_target-" + d.Quest_target+".First_Name" ) .style('opacity', 1) .style("font", ""+ textSize.nameHover+"px 'ewert'") .style("font-weight", "600") .style('fill','#4378a2') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location2" ) .style("font", ""+ textSize.location2Hover+"px 'ewert'") .style("font-weight", "600") .style('fill','#4378a2') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location1" ) .style("font", ""+ textSize.location1Hover+"px 'ewert'") .style("font-weight", "600") .style('fill','#4378a2') }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip_quests.hide(); d3.select(this) .style("font", ""+ textSize.quest+"px 'ewert'") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_giver-" + d.Quest_giver+ ".First_Name") .style("font", ""+ textSize.name+"px 'ewert'") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_target-" + d.Quest_target+".First_Name" ) .style("font", ""+ textSize.name+"px 'ewert'") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location2" ) .style("font", ""+ textSize.location2+"px 'ewert'") .style("font-weight", "200") .style('fill','black') d3.selectAll(".Quest_location-" + d.Location_name+ ".Location1" ) .style("font", ""+ textSize.location1+"px 'ewert'") .style("font-weight", "200") .style('fill','black') }); }35:T1bb8,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(".slide2") .remove() d3.select('svg') .selectAll(".slide1") .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:[] 31:{"id":"e4cee02c54ab8386","slug":"the-broom-of-faerun-v6","title":"The Broom of Faerun v6","thumbnail":"00c106560eecc630d845876611e5b04959086fde1ccedfba65e51f5cb1e9ce33","access_level":"public","create_time":"$D2020-11-26T20:39:35.462Z","update_time":"$D2020-12-15T13:07:02.443Z","view_time":null,"first_public_time":"$D2020-12-01T20:35:59.273Z","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":2214,"publish_version":2214,"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 v6","cells":[{"id":0,"value":"md`# The Broom of Faerun v6`","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":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= ({header:29,\n header2:25,\n location1:19,\n location2:15,\n name:15,\n nameHover:19,\n Faction:17,\n location1Hover:22,\n location2Hover:17,\n treasury:22,\n quest:17,\n questHover:20,\n legend:14\n })\n\n ","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":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":829,"value":"faction =function() { \n \n \nd3.select('svg')\n .data(data)\n \n .selectAll(\".circle_main,.Name,.hline\")\n .transition()\n .duration(500)\n .attr('cy',function(d){return margin.top+(yScale_ordered(d.Name))})\n .attr('y',function(d){return margin.top+(yScale_ordered(d.Name)+r)})\n \n\n .attr('y1',function(d){return margin.top+yScale_ordered(d.Name)-12})\n\n .attr('y2',function(d){return margin.top+yScale_ordered(d.Name)-12}) ;\n \n d3.select('svg')\n .data(data) \n .selectAll(\".Location2,.Location1\") \n .transition()\n .duration(500)\n .attr('y',function(d){return margin.top+(yScale_ordered(d.Name)+r)})\n .style(\"opacity\", function(d){if(d.Location1_nr==1) { return 1}\n else { return 1}})\n}","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":326,"value":"l=({start1:350,\n start2:195});","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":113,"value":"text_fill= 'Black'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"xScale= d3.scaleLinear()\n .domain([1,7])\n .range([0 , (plot.width)])","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":43,"value":"yScale_living= d3.scaleBand()\n .domain(data_living.map((d) => d[\"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":832,"value":"yScale_ordered= d3.scaleBand()\n .domain(data.map((d) => d[\"Name\"]))\n .range([0 , plot.height])","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.5])","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/25*14])","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/25*4])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":" margin= ({top:250,\nbottom:150,\n left:450,\nright:300})","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":25,"value":"plot=({width:850,\n height:900,\n width2:530});","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":23,"value":"d3 = require(\"d3@5\")","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/person.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":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"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"