tooltip = d3
.select('body')
.append('div')
.attr('class', 'tooltip')
.style('position', 'absolute')
.style('z-index', '10')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background-color', 'white')
.style('border-radius', '4px')
.style('-webkit-border-radius', '10px')
.style('-moz-border-radius', '10px')
.style('-webkit-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')
.style('-moz-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')
.style('box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')
.style('color', color)
.style('font-family','sans-serif')
.text('a simple tooltip');
html `<p> <strong> Highlight countries with Military Spending Based on the Following Sliders: </strong> </p>`
html `<p> <strong> Percent Share of GDP Greater than: </strong> ${arbitrary_threshold} </p>`;
viewof arbitrary_threshold = Inputs.range([0, 10], {label: html`Percent Share of GDP Greater than:`, step: 1})
military spending.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
html `<p> <strong> Per Capita Military Spending Greater than: </strong> ${arbitrary_threshold_2} </p>`
viewof arbitrary_threshold_2 = Inputs.range([0, 3000], {label: html`Per Capita Military Spending Greater than:`, step: 100})
chart = {
const height = 480;
const arbitrary_padding = 160;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
const x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.Military_Spending)]).nice()
.range([arbitrary_padding+margin.left, width - margin.right]);
const y = d3.scaleBand()
.domain(data.map(d => d.Country))
.range([480 - margin.bottom, margin.top])
.padding(0.2);
const xAxis = g => g
.attr('transform', `translate(0,${480 - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 100))
const yAxis = g => g
.attr("transform", `translate(${arbitrary_padding+margin.left},0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
const yTitle = g => g.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 14)
.attr("y", 10)
.attr("transform", `translate(${100+margin.left},0)`)
.text("Country")
const xTitle = g => g.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 14)
.attr("x", width/2)
.attr("y", height-10)
.text("Military Spending (Millions)")
svg.append("g")
.attr("fill", color)
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", x(0))
.attr("y", d => y(d.Country))
.attr("width", d => x(d.Military_Spending) - x(0))
.attr("height", y.bandwidth())
.filter(function(d) {
return d.Percent_Share_of_GDP >= arbitrary_threshold && d.Per_Capita >= arbitrary_threshold_2;
})
.attr("fill", highlight_color);
svg.append('g')
.call(xAxis);
svg.append('g')
.call(yAxis);
svg.call(yTitle);
svg.call(xTitle);
return svg.node();
}
color = "#ea5f94"
highlight_color = "#ffd700"
d3 = require("d3@5")
margin = ({top: 30, right: 20, bottom: 50, left: 40})
data2 = {
const text = await FileAttachment("stanford_companies.csv").text();
return d3.csvParse(text, ({Company, Funding_Amount, Projects_Sponsored, Projects_Proposed}) => ({
Company: Company,
Funding_Amount: parseFloat(Funding_Amount.replace('$', '').replace(',', '')),
Projects_Sponsored: parseInt(Projects_Sponsored.replace('$', '').replace(',', '')),
Projects_Proposed: parseInt(Projects_Proposed.replace('$', '').replace(',', ''))
}));
}
chart2 = {
const height = 480;
const arbitrary_padding = 160;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
const x = d3.scaleLinear()
.domain([0, d3.max(data2, d => d.Funding_Amount)]).nice()
.range([arbitrary_padding+margin.left, width - margin.right]);
const y = d3.scaleBand()
.domain(data2.map(d => d.Company))
.range([480 - margin.bottom, margin.top])
.padding(0.2);
const xAxis = g => g
.attr('transform', `translate(0,${480 - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 100))
const yAxis = g => g
.attr("transform", `translate(${arbitrary_padding+margin.left},0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
const yTitle = g => g.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 14)
.attr("y", 10)
.attr("transform", `translate(${100+margin.left},0)`)
.text("Company Name")
const xTitle = g => g.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 14)
.attr("x", width/2)
.attr("y", height-10)
.text("Funding Awarded Between 2002 and 2023")
svg.append("g")
.attr("fill", color)
.selectAll("rect")
.data(data2)
.join("rect")
.attr("x", x(0))
.attr("y", d => y(d.Company))
.attr("width", d => x(d.Funding_Amount) - x(0))
.attr("height", y.bandwidth())
.on("mouseover", function(d) {
d3.select(this).attr("fill", highlight_color);
//Get this bar's x/y values, then augment for the tooltip
//Get this bar's x/y values, then augment for the tooltip
var yPosition =
parseFloat(d3.select(this).attr("y")) +
y.bandwidth() / 2;
var xPosition =
parseFloat(d3.select(this).attr("x")) / 2 + width / 2;
tooltip
.html(
`<div> <strong>Projects Sponsored: </strong>${d.Projects_Sponsored}</div><div><strong>Projects Proposed:</strong> ${d.Projects_Proposed}</div>`
)
.style('visibility', 'visible');
//Update the tooltip position and value
//d3.select("#tooltip")
// .style("left", xPosition + "px")
// .style("top", yPosition + "px")
// .select("#value")
// .text(d.violation);
//Show the tooltip
//d3.select("#tooltip").classed("hidden", false);
})
.on('mousemove', function () {
tooltip
.style('top', d3.event.pageY - 10 + 'px')
.style('left', d3.event.pageX + 10 + 'px');
})
.on('mouseout', function () {
tooltip.html(``).style('visibility', 'hidden');
d3.select(this).transition().attr('fill', color);
});
svg.append('g')
.call(xAxis);
svg.append('g')
.call(yAxis);
svg.call(yTitle);
svg.call(xTitle);
return svg.node();
}
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.
