Public
Edited
May 7, 2023
example= FileAttachment("startupdata-type@1.csv").csv()
startupdata-type@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viz = {
// code from here until for container and axeses referenced from others
// define plotting parameters
const barMargin = { top: 15, right: 15, bottom: 60, left: 70 };
const barWidth = 390;
const barHeight = 200;
const barX = d3
.scaleBand()
.domain(startupdataType1.map((d) => d.Market))
.range([barMargin.left, barWidth])
.padding(0.5);
const barXAxis = (g) => g.attr("transform", `translate(0, ${barHeight})`).call(d3.axisBottom().scale(barX));
const barY = d3
.scaleLinear()
.domain([0, d3.max(startupdataType1, (d) => d.count) + 15])
.range([barHeight, barMargin.top]);
const barYAxis = (g) => g.attr("transform", `translate(${barMargin.left}, 0)`).call(d3.axisLeft().scale(barY));
// create the container
const svg = d3
.create("svg")
.attr("width", barWidth + barMargin.left + barMargin.right)
.attr("height", barHeight + barMargin.top + barMargin.bottom)
.attr("fill","#22222");
// code for populating the axeses and bar graphs have been modified by me for fonts, labelling, colours and the transition (animation)
// add x axis
svg.append("g")
.attr("transform", "translate(0," + 15 + ")")
.call(barXAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("font-family", "sans-serif")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-30)");
svg
.append("text")
.attr("x", barWidth / 2) // center label
.attr("y", barHeight + barMargin.bottom + barMargin.top - 5)
.attr("text-anchor", "middle")
.attr("font-size", 12)
.attr("font-family", "sans-serif")
.text("Market types");
// add y axis
svg.append("g").call(barYAxis);
svg
.append("text")
// .attr("x", barWidth / 2) // center label
// .attr("y", barHeight)
.attr("font-size", 12)
.attr("font-family", "sans-serif")
.attr("transform",`translate(${barMargin.left / 2}, ${barHeight / 2})rotate(-90)`)
.attr("text-anchor", "middle")
.text("number of startups");
// creating bars with animation
svg
.append("g")
.attr("id", "bars")
.selectAll("rect")
.data(startupdataType1)
.join("rect")
.attr("width", barX.bandwidth())
.attr("x", (d) => barX(d.Market))
.attr("height", 0)
.attr("y", barHeight)
.transition()
.delay((d, i) => {return 200 * i;})
.attr("height", (d) => barHeight - barY(d.count))
.attr("y", (d) => barY(d.count))
.attr("fill", "#019A5A");
// add count as text
svg
.append("g")
.attr("id", "numbers")
.selectAll()
.data(startupdataType1)
.join("text")
.attr("text-anchor", "middle")
.attr("font-size", 8)
.attr("font-family", "sans-serif")
.attr("x", (d) => barX(d.Market) + barX.bandwidth()/2)
.attr("y", barHeight - 5)
.transition()
.delay((d, i) => {return 200 * i;})
.attr("y", (d) => barY(d.count) - 5)
.text(d => d.count)
return svg.node();
}
// highlight the bars when user hovers over
highlight_bars = {
let color = "#097E4D";
let rects = d3.select(viz).selection("g#bars").selectAll("rect");
rects.on("mouseover.highlight", function (d) {
let rect = d3.select(this);
rect.attr("fill", color).append("svg:title").text(d => {return (d.Market+ ':' + d.count)});
});
rects.on("mouseout.highlight", function (d) {
let rect = d3.select(this);
rect.attr("fill", "#019A5A");
});
}
startupdata-product@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viz2 = {
// code from here until for container and axeses referenced from others
// define plotting parameters
const barMargin = { top: 15, right: 10, bottom: 60, left: 50 };
const barWidth = 400;
const barHeight = 200;
const barX = d3
.scaleBand()
.domain(startupdataProduct1.map((d) => d.type))
.range([barMargin.left, barWidth])
.padding(0.5);
const barXAxis = (g) => g.attr("transform", `translate(0, ${barHeight})`).call(d3.axisBottom().scale(barX));
const barY = d3
.scaleLinear()
.domain([0, d3.max(startupdataProduct1, (d) => d.count) + 15])
.range([barHeight, barMargin.top]);
const barYAxis = (g) => g.attr("transform", `translate(${barMargin.left}, 0)`).call(d3.axisLeft().scale(barY));
// create the container
const svg = d3
.create("svg")
.attr("width", barWidth + barMargin.left + barMargin.right)
.attr("height", barHeight + barMargin.top + barMargin.bottom)
.attr("fill","#22222");
// code for populating the axeses and bar graphs have been modified by me for fonts, labelling, colours and the transition (animation)
// add x axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + 10 + ")")
.call(barXAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("font-family", "sans-serif")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-30)");
svg
.append("text")
.attr("x", barWidth / 2) // center label
.attr("y", barHeight + barMargin.bottom + barMargin.top - 5)
.attr("text-anchor", "middle")
.attr("font-size", 12)
.attr("font-family", "sans-serif")
.text("Product types");
// add y axis
svg.append("g").call(barYAxis);
svg
.append("text")
// .attr("x", barWidth / 2) // center label
// .attr("y", barHeight)
.attr("font-size", 12)
.attr("font-family", "sans-serif")
.attr("transform",`translate(${barMargin.left / 2}, ${barHeight / 2})rotate(-90)`)
.attr("text-anchor", "middle")
.text("number of startups");
// creating bars with animation
svg
.append("g")
.attr("id", "bars")
.selectAll("rect")
.data(startupdataProduct1)
.join("rect")
.attr("width", barX.bandwidth())
.attr("x", (d) => barX(d.type))
.attr("height", 0)
.attr("y", barHeight)
.transition()
.delay((d, i) => {return 200 * i;})
.attr("height", (d) => barHeight - barY(d.count))
.attr("y", (d) => barY(d.count))
.attr("fill", "#019A5A");
// add count as text
svg
.append("g")
.attr("id", "numbers")
.selectAll()
.data(startupdataProduct1)
.join("text")
.attr("text-anchor", "middle")
.attr("font-size", 8)
.attr("font-family", "sans-serif")
.attr("x", (d) => barX(d.type) + barX.bandwidth()/2)
.attr("y", barHeight - 5)
.transition()
.delay((d, i) => {return 200 * i;})
.attr("y", (d) => barY(d.count) - 5)
.text(d => d.count)
return svg.node();
}
// highlight the bars when user hovers over
highlight2 = {
let color = "#097E4D";
let rects = d3.select(viz2).selection("g#bars").selectAll("rect");
rects.on("mouseover.highlight", function (d) {
let rect = d3.select(this);
rect.attr("fill", color).append("svg:title").text(d => {return (d.type+ ':' + d.count)});
});
rects.on("mouseout.highlight", function (d) {
let rect = d3.select(this);
rect.attr("fill", "#019A5A");
});
}
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.
