Published
Edited
May 11, 2020
1 star
viewof clientId = text({title: "Client Id", placeholder: "Enter looker client id", description: ""})
viewof clientSecret = text({title: "Client Secret", placeholder: "Enter looker client secret", description: ""})
viewof hostname = text({title: "Hostname of Looker", placeholder: "Enter the looker path e.g: api.looker.company.com/api/3.1"})
legend({color, title: "Total Revenue By Practice"})
html`<svg viewBox="0 0 ${width} ${height}" style="max-width: ${width}px; font: 24px sans-serif;">
<g>
${MonthlyKPIs.map(p => svg`<rect fill="${color(p['transaction.total_revenue'])}" y="${y(p['practice.name1'])}" x="${x(0)}" width="${x(p['transaction.total_revenue']) - x(0)}" height="${y.bandwidth()}"></rect>`)}
</g>
<g fill="white" text-anchor="end" transform="translate(-6,${y.bandwidth() / 2})">
${MonthlyKPIs.map(p => svg`<text fill="${d3.lab(color(p['transaction.total_revenue'])).l < 60 ? "white" : "black"}" y="${y(p['practice.name1'])}" x="${x(p['transaction.total_revenue'])}" dy="0.35em">${p['practice.name1']}</text>`)}
</g>
${d3.select(svg`<g transform="translate(0,${margin.top})">`)
.call(d3.axisTop(x))
.call(g => g.select(".domain").remove())
.node()}
${d3.select(svg`<g transform="translate(${margin.left},0)">`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.node()}
</svg>`
theBars = svg => {
MonthlyKPIs.map(p => svg.append('rect')
.attr('fill', color(p['transaction.total_revenue']))
.attr('x', x(0))
.attr('y', y(p['practice.name1']))
.attr('width', x(p['transaction.total_revenue']) - x(0))
)
return svg;
}
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x2).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y2))
.call(g => g.select(".domain").remove())
function formatTick(d) {
const s = d;
return `\xa0${s}`;
}
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("class", "bars")
.selectAll("rect")
.data(MonthlyKPIs)
.join("rect")
.attr("x", p => x2(p['practice.name1']))
.attr("y", p => y2(p['transaction.total_revenue']))
.attr("height", p => y2(0) - y2(p['transaction.total_revenue']))
.attr("width", x2.bandwidth())
.attr("fill", p => color(p['transaction.total_revenue']))
.attr("rx", 15);
svg.append("g")
.attr("class", "x-axis")
.call(xAxis);
svg.append("g")
.attr("class", "y-axis")
.call(yAxis);
return svg.node();
}
x2 = d3.scaleBand()
.domain(MonthlyKPIs.map(p => p['practice.name1']))
.range([margin.left, width - margin.right])
.padding(0.1)
y2 = d3.scaleLinear()
.domain([0, d3.max(MonthlyKPIs, p => p['transaction.total_revenue'])]).nice()
.range([height - margin.bottom, margin.top])
md`# Appendix`
d3 = require('d3')
import {legend} from "@d3/color-legend"
import {text} from "@jashkenas/inputs"
apiURL = `https://cors-anywhere.herokuapp.com/https://${hostname}/`
token = d3.json(apiURL + "login", {
body: `client_id=${clientId}&client_secret=${clientSecret}`,
headers: {"content-type": "application/x-www-form-urlencoded", "Access-Control-Allow-Origin": "*"},
method: "POST",
mode: "cors"
})
MonthlyKPIs = d3.json(apiURL + 'looks/86/run/json', {
headers: {"content-type": "application/json", "Authorization": "Bearer "+ token.access_token},
method: "GET",
mode: "cors"
})
TotalRevenueByPractice = MonthlyKPIs.map(p => p['transaction.total_revenue'])
color = d3.scaleSequential()
.domain([0, d3.max(MonthlyKPIs, p => p['transaction.total_revenue'])])
.interpolator(d3.interpolateBlues)
height = 640
margin = ({top: 100, right: 100, bottom: 200, left: 100})
x = d3.scaleLinear()
.domain([0, d3.max(MonthlyKPIs, p => p['transaction.total_revenue'])])
.range([margin.left, width - margin.right])
.interpolate(d3.interpolateRound)
y = d3.scaleBand()
.domain(MonthlyKPIs.map(p => p['practice.name1']))
.range([margin.top, height - margin.bottom])
.padding(0.1)
.round(true)
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.
