Published
Edited
Jun 7, 2022
1 fork
umap = d3.csvParse(await FileAttachment("umap2d@1.csv").text(), d3.autoType)
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const x = d3.scaleLinear()
.domain(d3.extent(umap, d => d.x)).nice()
.range([margin.left, width - margin.right])
const y = d3.scaleLinear()
.domain(d3.extent(umap, d => d.y)).nice()
.range([height - margin.bottom, 0])
const yAxis = d3
.axisLeft(y)
.tickFormat(formatTicks)
const xAxis = d3
.axisBottom(x)
.tickFormat(formatTicks)
const colorScale = d3.scaleSequential()
.range(['red',"green"])
.domain([0, 1])
const tooltip = svg.append("rect")
.attr('id', 'tooltip')
.attr('rx', 5)
.attr('ry', 5)
.attr('width', width / 2)
.attr('height', height / 2)
.attr('x', width / 4)
.attr('y', height / 4)
.style('fill', 'gray')
.style('opacity', 1.00);
// A function that change this tooltip when the leaves a point: just need to set opacity to 0 again
const mouseleave = function(event,d) {
tooltip
.transition()
.duration(200)
.style("opacity", 0)
dots.style('opacity', 1.0);
d3.selectAll('.bar-label').remove();
}
function addLabel(axis, label, x)
{
axis
.selectAll('.tick:last-of-type text')
.clone()
.text(label)
.attr('x', x)
.style('text-anchor', 'start')
.style('font-weight', 'semi-bold')
.style('fill', 'black')
}
svg.attr('id', 'myviz');
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(xAxis)
.call(addLabel, 'Ask Valuation', 25);
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(yAxis)
.call(addLabel, "Deal Valuation", 25);
function showData(event, d)
{
const current = d3.select(this);
dots
.style("opacity", 0.1);
let xpos = parseFloat(current.attr('cx'));
let ypos = parseFloat(current.attr('cy'));
console.log("Xpositions {}", xpos);
current
.style("opacity", 1.0);
const label = svg
.append('text')
.attr('class', 'bar-label text-sm')
.attr('fill', 'white')
.style('text-anchor', 'start')
.style('font-weight', 'bold')
.style('font-family', 'Arial')
.text(`Category: ${d.Category}`);
const labelval = svg
.append('text')
.attr('class', 'bar-label text-sm')
.attr('fill', 'white')
.style('text-anchor', 'start')
.style('font-weight', 'bold')
.style('font-family', 'Arial')
.text(`Deal Valuation: ${d3.format(".2~s")(d.DealValuation)}`);
const labelask = svg
.append('text')
.attr('class', 'bar-label text-sm')
.attr('fill', 'white')
.style('text-anchor', 'start')
.style('font-weight', 'bold')
.style('font-family', 'Arial')
.text(`Ask Valuation: ${d3.format(".2~s")(d.AskValuation)}`);
const labeltitle = svg
.append('text')
.attr('class', 'bar-label text-sm')
.attr('fill', 'white')
.style('text-anchor', 'start')
.style('font-weight', 'bold')
.style('font-family', 'Arial')
.text(`Name: ${d.TitleHT}`);
const labelBBox = label.node().getBBox();
console.log("Bounding Box: {}", labelBBox)
label
.attr('y', ypos + 20)
.attr('x', xpos + 20);
labelval
.attr('y', ypos + 40)
.attr('x', xpos + 20);
labelask
.attr('y', ypos + 60)
.attr('x', xpos + 20);
labeltitle
.attr('y', ypos + 80)
.attr('x', xpos + 20);
d3.select("#tooltip")
.style('opacity', 1.0)
.attr('width', labelBBox.width*1.5)
.attr('height', labelBBox.height*5);
// .attr('x', xpos)
// .attr('y', ypos);
}
const dots = svg.append("g");
dots
.selectAll(".scatter")
.data(umap)
.join("circle")
.attr('class', 'scatter')
.attr("cx", d => x(d['x']))
.attr("cy", d => y(d['y']))
.attr("r", 5)
.attr("id", (d, i) => `${i}`)
.style('stroke', 'dodgerblue')
.style("fill", (d) => colorScale(d.labels))
.style("fill-opacity", 0.25)
.on("mouseover", showData)
.on('mouseleave', (event, d) => {
tooltip.style('opacity', 0);
dots.style('opacity', 1.0);
d3.selectAll('.bar-label').remove();
});
return svg.node();
}
data = FileAttachment("penguins.csv").csv({typed: true})
height = 800
margin = ({top: 180, right: 120, bottom: 40, left: 80})
numeric_data = d3.csvParse(await FileAttachment("numeric_deals.csv").text(), d3.autoType)
FileAttachment("numeric_deals.csv").csv()
require('d3')
// Drawing utilities.
function formatTicks(d) {
return d3
.format('~s')(d)
.replace('M', ' mil')
}
umap2d1 = FileAttachment("umap2d@1.csv").csv()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
