Published
Edited
Sep 18, 2020
colors = d3.scaleOrdinal(
["Min", "Touches"],
d3.schemeGnBu[9].slice(3)
)
height = 500
margin = ({
top: 10,
right: 0,
bottom: 30,
left: 30
})
yScale = d3.scaleLinear(
[ 0, d3.max(tnd_starts_perten, d => d.total) ],
[ height - margin.bottom, margin.top ]
)
xScale = d3.scaleBand(
tnd_starts_perten.map(d => d.location),
[ margin.left, width - margin.right ]
).padding(0.2)
xAxis = d3.axisBottom(xScale)
.tickSizeOuter(0)
yAxis = d3.axisLeft(yScale)
chart = {
const svg = d3.create('svg')
.attr('width', 900)
.attr('height', 500)
// Pass our data to the stack to generate the layer positions
const chartData = stack(tnd_starts_perten)
const groups = svg.append('g')
// Each layer of the stack goes in a group
// the group contains that layer for all countries
.selectAll('g')
.data( chartData )
.join('g')
// rects in the same layer will all have the same color, so we can put it on the group
// we can use the key on the layer's array to set the color
.style('fill', "black")
groups.selectAll('rect')
// Now we place the rects, which are the children of the layer array
.data(d => d)
.join('rect')
.attr('x', d => xScale(d.data.Date))
.attr('y', d => yScale(d[1]))
.attr('height', d => yScale(d[0]) - yScale(d[1]))
.attr('width', xScale.bandwidth())
svg.append('g')
.attr('transform', `translate(0,${ height - margin.bottom })`)
.call(xAxis)
svg.append('g')
.attr('transform', `translate(${ margin.left },0)`)
.call(yAxis)
.select('.domain').remove()
return svg.node()
}
stack(tnd_starts_perten)
stack = d3.stack()
.keys( ["Min", "Touches"] )
tnd_starts_perten[0]
viewof stackedBar = vl.markBar() // Make a bar chart
.data(tnd_starts_perten) // Using the alphabet data
.encode(
vl.x().fieldO("Date"), // .sort(vl.fieldQ("frequency").order("descending")), // Letters are ordinal on the x-axis
vl.y().fieldQ("Min") // Frequency on the y-axis
)
.render()
tnd_starts_perten = tnd_starts.map(d => ({'Date': d.Date, Min: d.Min, Touches: Math.round((10*d.Touches/d.Min) * 10) / 10}))
d3 = require("d3@5")
import { vl } from "@vega/vega-lite-api"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.