// GLOBAL VARIABLES //
// Set dimensions
const width = 360
let dimensions = {
width: width,
height: width,
margin: {
top: 20,
right: 20,
bottom: 100,
left: 100,
},
}
dimensions.boundedWidth = dimensions.width
- dimensions.margin.left
- dimensions.margin.right
dimensions.boundedHeight = dimensions.height
- dimensions.margin.top
- dimensions.margin.bottom
// Create scales
const xScale = d3.scaleLinear()
.range([0, dimensions.boundedWidth])
const yScale = d3.scaleLinear()
.range([dimensions.boundedHeight, 0])
const xAxisGenerator = d3.axisBottom()
.scale(xScale)
const yAxisGenerator = d3.axisLeft()
.scale(yScale)
const xAccessor = d => parseFloat(d.xfrom) + 0.5 * Math.random() //hack to spread points a wee bit
const yAccessor = d => parseFloat(d.yfrom) + 0.5 * Math.random() //hack to spread points a wee bit that overlap exactly
const imgTitle = d => d.name
const imgAuthor = d => d.author
const srcURL = d => d.url
const imgURL = d => d.imgURL
const domainAccessor = d => d.primary_domain
const secondaryDomainAccessor = d => d.secondary_domain
const tooltip = d3.select("#tooltip")
const imgTitleTT = d3.select("#name-title")
const imgAuthorTT = d3.select("#author-title")
const srcURLTT = d3.select("#link-title")
const domainAccessorTT = d3.select("#primary-domain-title")
const secondDomainAccessorTT = d3.select("#secondary-domain-title")
const imgPreview = d3.select("#preview-img")
// CMT rationale variables
const structuralAccessor = d => d.structural_details
const ontologicalAccessor = d => d.ontological_details
const orientationalAccessor = d => d.orientational_details
const imagisticAccessor = d => d.imagistic_details
const textGraphicMetaphorAcc = d => d.text_support_graphical_metaphors
const textGraphicMetaphorDetailsAcc = d => d.text_support_graphical_metaphor_details
const structTT = d3.select("#structural-details")
const ontoTT = d3.select("#ontological-details")
const orientTT = d3.select("#orientational-details")
const imagTT = d3.select("#imagistic-details")
const textMetTT = d3.select("#text-support-graphical-metaphors")
const textMetTypeTT = d3.select("#text-support-graphical-metaphors-details")
function domainTick(whichDomain) {
if (whichDomain == "Biomedicine") {
//const yTick = [10, 20, 30, 40, 50, 60, 70, 80, 90]
const yTickStr = [
'molecules',
'viruses',
'cells',
'bacteria',
'tissues',
'organs',
'organ systems',
'organism',
'population',
]
//const xTick = [10, 20, 30, 40, 50, 60, 70, 80, 90]
const xTickStr = [
"nanosec",
"sec",
"min",
"hour",
"day",
"week",
"month",
"year"
]
return [xTickStr, yTickStr]
} else if (whichDomain == "Climate") {
//const yTick = [10, 20, 30]
const yTickStr = [
"local",
"regional",
"global"
]
//const xTick = [10, 20, 30, 40, 50]
const xTickStr = [
"<1 year",
"decade",
"century",
"thousand",
"" //HANNA check this
]
return [xTickStr, yTickStr]
} else if (whichDomain == "Space") {
//const yTick = [10, 20, 30, 40, 50, 60]
const yTickStr = [
"objects in space",
"planet",
"star",
"black holes",
"galaxy",
"universe",
]
//const xTick = [10, 20, 30, 40]
const xTickStr = [
"<1 yr",
"decade",
"million",
"billion"
]
return [xTickStr, yTickStr]
} else if (whichDomain == "Anthropology") {
//const yTick = [10, 20, 30, 40, 50]
const yTickStr = [
"local",
"regional",
"continental",
"intercontinental",
"global"
]
//const xTick = [10, 20, 30, 40, 50, 60, 70, 80]
const xTickStr = [
"<1 yr",
"decade",
"century",
"quincent.",
"thousand",
"centamill.",
"million",
"billion"
]
return [xTickStr, yTickStr]
}
}
function onMouseEnter(e, datum) {
const barLengths = [
{"metaphorType" : "Str", "count" : parseInt(datum.cnt_structural)},
{"metaphorType" : "Ont", "count" : parseInt(datum.cnt_ontological)},
{"metaphorType" : "Ori", "count" : parseInt(datum.cnt_orientational)},
{"metaphorType" : "Img", "count" : parseInt(datum.cnt_imagistic)},
]
updateBarPlot(barLengths)
//CMT rationale
structTT.text(structuralAccessor(datum))
ontoTT.text(ontologicalAccessor(datum))
orientTT.text(orientationalAccessor(datum))
imagTT.text(imagisticAccessor(datum))
textMetTT.text(textGraphicMetaphorAcc(datum))
textMetTypeTT.text(textGraphicMetaphorDetailsAcc(datum))
// Other image metadata to populate based on mouseHover:
imgTitleTT.text(imgTitle(datum))
imgAuthorTT.text(imgAuthor(datum))
srcURLTT.text(srcURL(datum))
domainAccessorTT.text(domainAccessor(datum))
secondDomainAccessorTT.text(secondaryDomainAccessor(datum))
imgPreview.attr("src", "./images/placeholder.png")
imgPreview.attr("src", imgURL(datum))
this.parentNode.appendChild(this); //move hovered item to top
d3.select(this)
.transition().ease(d3.easeLinear)
.duration(400)
.attr("fill", "black") // BRIGHT TURQ #5afaed
.attr("opacity", 1)
.attr("r", 10)
}
function onMouseLeave() {
tooltip.style("opacity", 0)
d3.select(this)
.transition().ease(d3.easeLinear)
.duration(400)
.attr("fill", "gray")
.attr("opacity", 0.5)
.attr("r", 5)
//imgPreview.attr("src", "./images/placeholder.png")
}
function setTickMarks(dataset) {
let whichDomain = domainAccessor(dataset[0])
console.log(dataset[0])
let ticks = domainTick(whichDomain)
console.log(ticks)
xAxisGenerator
.ticks(ticks[0].length)
.tickFormat(d => ticks[0][d-1]) //bring to 0 since lowest value in dataset is 1
yAxisGenerator
.ticks(ticks[1].length)
.tickFormat(d => ticks[1][d-1])
}
function styleAxes(dataset, scatterBounds) {
//redraw x axis
xScale.domain([d3.extent(dataset, xAccessor)[0]-0.5, d3.extent(dataset, xAccessor)[1]+0.5])
scatterBounds.selectAll(".myXaxis").transition()
.duration(750)
.call(xAxisGenerator)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-30)")
//redraw y axis
yScale.domain([d3.extent(dataset, xAccessor)[0]-0.5, d3.extent(dataset, yAccessor)[1]+0.5])
scatterBounds.selectAll(".myYaxis").transition()
.duration(750)
.call(yAxisGenerator)
}
async function drawScatterPlot(dataset) {
// Initial draw canvas
const scatterWrapper = d3.select("#scatterplot")
.append("svg")
.attr("width", dimensions.width)
.attr("height", dimensions.height)
const scatterBounds = scatterWrapper.append("g")
.attr("id", "scatter-bounds")
.style("transform", `translate(${
dimensions.margin.left
}px, ${
dimensions.margin.top
}px)`)
// Access data
//const dataset= await d3.csv(dataCSV)
//console.table(dataset[0])
setTickMarks(dataset)
const xAxis = scatterBounds.append("g")
.call(xAxisGenerator)
.style("transform", `translateY(${dimensions.boundedHeight}px)`)
.attr("class", "myXaxis")
// scatterBounds.selectAll(".myXaxis")
// .selectAll("text")
// .style("text-anchor", "end")
// .attr("dx", "-.8em")
// .attr("dy", ".15em")
// .attr("transform", "rotate(-30)")
const yAxis = scatterBounds.append("g")
.call(yAxisGenerator)
.attr("class", "myYaxis")
styleAxes(dataset, scatterBounds)
scatterBounds.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", -dimensions.margin.left + 15)
.attr("x", -dimensions.margin.top)
.attr("fill", "black")
//.style("font-size", "1.2em")
.attr("transform", "rotate(-90)")
.text("SPATIAL COVERAGE")
scatterBounds.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", dimensions.boundedWidth)
.attr("y", dimensions.boundedHeight + 55)
.text("TEMPORAL COVERAGE");
// const sqs = scatterBounds.selectAll("rect").data(rangeRectangles)
// sqs
// .join("rect")
// .attr("x", d => xScale(x1RectAccessor(d)))
// .attr("y", d => yScale(y2RectAccessor(d)))
// .attr("width", d => xScale(x2RectAccessor(d))-xScale(x1RectAccessor(d)))
// .attr("height", d => yScale(y1RectAccessor(d))-yScale(y2RectAccessor(d)))
// .attr("rx", 15)
// .attr("fill-opacity", 0.3)
//create update selection to bind new data
const dots = scatterBounds.selectAll("circle").data(dataset)
dots
.join("circle")
//.attr('class', 'circle-base')
.transition().duration(750)
.attr("cx", d => xScale(xAccessor(d)))
.attr("cy", d => yScale(yAccessor(d)))
.attr("fill", "gray") //teal color rgb(1, 148, 136)
.attr("opacity", 0.5)
.attr("r", 5)
// INTERACTIONS
scatterBounds.selectAll("circle").on("mouseenter", function(e, d){
console.log(e.target)
})
scatterBounds.selectAll("circle")
.on("mouseenter", onMouseEnter)
.on("mouseleave", onMouseLeave)
}
async function updateScatterPlot(dataset) {
//const dataset= await d3.csv(dataCSV)
console.log("this is my new data")
console.table(dataset[1])
const scatterBounds = d3.select("#scatter-bounds")
// redraw X and Y axes
setTickMarks(dataset)
styleAxes(dataset, scatterBounds)
// redraw dots in new position
const dots = scatterBounds.selectAll("circle").data(dataset)
dots
.join("circle")
.transition().duration(1000)
.attr("cx", d => xScale(xAccessor(d)))
.attr("cy", d => yScale(yAccessor(d)))
}
