Published unlisted
Edited
May 14, 2022
X Axis Tick Label not showing @X=Min and @X=Max
<div id='here'></div>
{ const data = await d3.json("https://raw.githubusercontent.com/smpa01/d3data/main/test.json");
//namespace
const svgns = 'http://www.w3.org/2000/svg'
const svg = d3.select('#here').append('svg')
//define dimension
const width = 1280;
const height = 720;
svg
//.attr('xmlns', svgns)
.attr('viewBox', `0 0 ${width} ${height}`)
//---create a rect encompassing viewBox --- to be removed later
svg.append('rect')
.attr('class', 'vBoxRect')
.attr('width', `${width}`)
.attr('height', `${height}`)
.attr('fill', 'none')
.attr('stroke', 'red')
//------------------------2. CREATE BOUND------------------------//
const padding = {
top: 70,
bottom: 50,
left: 70,
right: 50
}
const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width - padding.right - padding.left;
//create BOUND rect -- to be removed later
svg.append('rect')
.attr('class', 'boundRect')
.attr('x', `${padding.left}`)
.attr('y', `${padding.top}`)
.attr('width', `${boundWidth}`)
.attr('height', `${boundHeight}`)
.attr('fill', 'none')
.attr('stroke', 'green')
//create bound element
const bound = svg.append('g')
.attr('class', 'bound')
//specify transform, must be .style and not .attr, px needs to be mentioned
.style('transform', `translate(${padding.left}px,${padding.top}px)`)
////////////////////////////////////////////////////////////
//////////////////////// 3 CREATE SCALE ////////////////////
////////////////////////////////////////////////////////////
//scale converts a domain (data) to range (pixel)
const scaleX = d3.scaleLinear()
.range([0, boundWidth])
.domain(d3.extent(data, d => d.Year))
bound.append('g')
.attr('class', 'xAxis')
.append('g')
.attr('class', 'xAxisBottom')
.call(d3.axisBottom(scaleX).ticks().tickFormat(d3.format("d")))
.style('transform', `translateY(${boundHeight}px)`)
}
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.
