color_q1 = d3.scaleOrdinal()
.domain(companies)
.range(d3.schemeCategory10);
color_q2 = d3.scaleSequential().domain([0, maxPrecipitation]).interpolator(d3.interpolateBlues)
color_q2 = d3.scaleSequential().domain([0, maxPrecipitation]).interpolator(d3.interpolateGreens)
{
const margin = {top: 20, right: 10, bottom: 10, left: 30};
const visWidth = width - margin.left - margin.right;
const x = d3.scaleBand()
.domain(d3.range(53))
.range([0, visWidth])
.padding(0.05);
const visHeight = x.step() * 7;
const svg = d3.select(DOM.svg(visWidth + margin.left + margin.right,
visHeight + margin.top + margin.bottom));
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const y = d3.scaleBand()
.domain(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])
.range([0, visHeight])
.padding(0.05)
// day of week labels
const yAxis = d3.axisLeft(y)
.tickPadding(10)
.tickSize(0);
g.append('g')
.call(yAxis)
.call(g => g.selectAll('.domain').remove());
// month labels
const firstOfMonths = data.filter(d => d.date.getDate() === 1);
g.selectAll('.month')
.data(firstOfMonths)
.join('text')
.attr('class', 'month')
.attr('font-family', 'sans-serif')
.attr('font-size', 10)
.attr('x', d => x(d.week))
.attr('y', -5)
.text(d => d3.timeFormat('%b')(d.date))
// squares
g.selectAll('rect')
.data(data)
.join('rect')
.attr('x', d => x(d.Weeknum))
.attr('y', d => y(d.Dayofweek))
.attr('width', x.bandwidth())
.attr('height', y.bandwidth())
.attr('fill', d => color_q2(d.DailyEnergy)) // this is where square color is set
return svg.node();
}
color_q4 = d3.scaleQuantize().domain(d3.extent(populations, d => d.population)).range(d3.schemeReds[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.
