// Linear scale, mapping 0 - 50 to 0 - 100
linearScale = d3.scaleLinear()
.domain([0, 50])
.range([0, 100])
linearScale(25)
{
const width= 400
const height = 30 // While width is given, we need to define the height of our svg
const svg = d3.select(DOM.svg(width, height)) // Defining svg
const margin = { left: 30, top: 10, right: 10, bottom: 10 } // Make some empty space around your x axis using margin
const xScale = d3.scaleLinear()
.domain([0, 50])
.range([margin.left, width - margin.right])
svg.append('g').call(d3.axisBottom(xScale))// Append it to svg
return svg.node() // Return it, and Observable will show it as output
}
{
const height = 250
const svg = d3.select(DOM.svg(60, height)) // Defining svg
const margin = { left: 30, top: 10, right: 10, bottom: 10 }
const yScale = d3.scaleLinear()
.domain([0, 50])
.range([height - margin.bottom, margin.top])
svg.append('g').call(d3.axisLeft(yScale))// Append it to svg
.attr('transform', `translate(${margin.left},0)`)
return svg.node()
}
{
const height = 50
const svg = d3.select(DOM.svg(width, height))
const margin = { left: 30, top: 10, right: 10, bottom: 20 }
const xScale = d3.scaleLinear()
.domain([0, 50])
.range([margin.left, width - margin.right])
svg.append('g') //the "g" elements is usful to apply transformations to several objects inside the same group
.call(d3.axisBottom(xScale))
.attr('transform', `translate(0,${height - margin.bottom})`)
svg.selectAll('circle')
.data([0, 10, 20, 30, 40,50])
.enter()
.append('circle')
.attr('cx', d => xScale(d))
.attr('cy', 20)
.attr('r', 10)
.attr('fill', 'purple')
return svg.node()
}
{
const height = 400
const svg = d3.select(DOM.svg(width, height))
const margin = { left: 30, top: 10, right: 10, bottom: 20 }
const xScale = d3.scaleLinear()
.domain(d3.extent(exponentialData.map(d => d.x))) //check the extent and map functions at https://github.com/d3/d3-array
.range([margin.left, width - margin.right])
svg.append('g')
.call(d3.axisBottom(xScale))
.attr('transform', `translate(0,${height - margin.bottom})`)
const yScale = d3.scaleLinear()
.range([height - margin.bottom, margin.top])
.domain(d3.extent(exponentialData.map(d => d.y)))
svg.append('g')
.call(d3.axisLeft(yScale))
.attr('transform', `translate(${margin.left},0)`)
svg.selectAll('circle')
.data(exponentialData)
.enter()
.append('circle')
// Circles are distributed along the x-axis
.attr('cx', d => xScale(d.x))
// Along y-axis as well, and it becomes two dimensional
.attr('cy', d => yScale(d.y))
.attr('r', 10)
.attr('fill', 'purple')
return svg.node()
}
d3 = require('d3@5')
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.
