myScale = (d) => 10 * d
myScale(0)
myScale(5)
myScale(-100)
scale = d3.scaleLinear()
{
const dMin = 0, dMax = 10
const rMin = 0, rMax = 100
scale
.domain([ dMin, dMax ])
.range([ rMin, rMax ])
return scale(5)
}
// A scale to set y values
ySliderScale = d3.scaleLinear()
.domain([ 0, 140 ])
.range([ 10, 130 ])
// A scale to set x values
// Ordinal scales require domain and range values to match 1:1 to work as expected
xSliderScale = d3.scaleOrdinal()
.domain([ 0, 1, 2, 3, 4 ])
.range([ 10, 40, 70, 100, 130 ])
// A scale to set colors
colorSliderScale = d3.scaleLinear()
.domain([0,100])
.range(['#eee', 'steelblue'])
{
const svg = html `<svg width="160" height="160" style="border: 1px solid #ccc"/>`
d3.select(svg).selectAll('rect').remove()
d3.select(svg)
.append('rect')
.attr('width', 20)
.attr('height', 20)
// Set the x value based on the slider value (passed into the x scale)
.attr('x', xSliderScale(xSliderValue))
// Same for y/y ccale!
.attr('y', ySliderScale(ySliderValue))
// Same for color/color scale!
.style('fill', colorSliderScale(colorSliderValue))
return svg
}
{
const svgHTML = html `<svg height="160" width="160" style="border: 1px solid #ccc" />`
// Define our data
const data = [ 0, 1, 2, 3, 4 ]
// The max height of the rects for convenience
const maxHeight = 140
// Set the x positions of our rects (ordinal)
// The domain is our data because the data values
// will be passed to the scale when we draw
const xScale = d3.scaleOrdinal()
.domain( data )
.range([ 10, 40, 70, 100, 130 ])
// The domain is the minimum value of our data
// to the maximum value of our data (continuous)
const yScale = d3.scaleLinear()
.domain([ 0, 4 ])
.range([ 10, maxHeight ])
// Color will be set based on the value of our data
// It's convenient to use a linear scale so we don't
// have to define all of the colors in between by hand
const colorScale = d3.scaleLinear()
.domain([ 0, 4 ])
.range(['#eee', 'steelblue'])
const svg = d3.select(svgHTML)
svg.selectAll('rect')
// data bind
.data( data )
// append all 5 rects
.join('rect')
.attr('width', 20)
.attr('y', 10)
// pass in the bound data value to the scales
// with an accessor function
// so that we can set the value based on the scale
.attr('x', (d) => xScale(d))
.attr('height', (d) => yScale(d))
.style('fill', (d) => colorScale(d))
return svgHTML
}
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.
