Published
Edited
Dec 9, 2020
md`# Axes`
fruits = [
{name: "🍊", count: 21},
{name: "🍇", count: 13},
{name: "🍏", count: 8},
{name: "🍌", count: 5},
{name: "🍐", count: 3},
{name: "🍋", count: 2},
{name: "🍎", count: 1},
{name: "🍉", count: 1}
]
md`## Adding Scales to previously rendered chart`
{
const x1 = d3.scaleBand()
.domain(fruits.map(d => d.name))
.range([margin.left, width - margin.right])
.padding(0.1)
const y1 = d3.scaleLinear()
.domain([0, d3.max(fruits, d => d.count)])
.range([height - margin.bottom, margin.top])
const svgVertical = html`<svg width=${width} height=${height} style='border: 1px dashed black'</svg>`
const xAxis1 = g =>
g.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x1))
const yAxis1 = g =>
g.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y1))
d3.select(svgVertical)
.selectAll('rect')
.data(fruits)
.enter()
.append('rect')
.attr('x', d => {
// console.log(d.name, x1(d.name))
return x1(d.name)
})
.attr('y', d => y1(d.count))
.attr('width', x1.bandwidth())
.attr('height', d => y1(0) - y1(d.count))
.attr('fill', 'plum')
d3.select(svgVertical)
.append('g').call(xAxis1)
d3.select(svgVertical)
.append('g').call(yAxis1)
// Make an y axis on the right
return svgVertical
}
md`
An axis consists of a path element of class “domain” representing the extent of the scale’s domain, followed by transformed g elements of class “tick” representing each of the scale’s ticks. Each tick has a line element to draw the tick line, and a text element for the tick label
`
md `
---
<h3 style="text-align: right">
[Enter-Update-Exit Pattern →](https://observablehq.com/@parshwamehta13/enter-update-exit-pattern)
</h3>
`
md`---
## Appendix`
width = 640
height = 202
margin = ({top: 40, right: 20, bottom: 20, left: 20})
d3 = require("d3@6")
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.
