maxPrice = d3.max(companyToPrices, ([company, prices]) => d3.max(prices, p => p.price))
color1 = d3.scaleOrdinal()
.domain(companies)
.range(d3.schemeSpectral[6]);
{
const margin = {top: 10, right: 30, bottom: 20, left: 40};
const visWidth = width - margin.left - margin.right;
const visHeight = 500 - margin.top - margin.bottom;
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleTime()
.domain([minStockDate, maxStockDate])
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain([0, maxPrice]).nice()
.range([visHeight, 0]);
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);
g.append('g')
.attr('transform', `translate(0,${visHeight})`)
.call(xAxis);
g.append('g')
.call(yAxis)
.call(g => g.selectAll('.domain').remove())
.append('text')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'middle')
.attr('fill', 'black')
.attr('x', 5)
.text('Stock Price ($)');
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.price));
const series = g.selectAll('.series')
.data(companyToPrices)
.join('g')
.attr('stroke', ([company, prices]) => color1(prices)) // this is where line color is set
.attr('class', 'series')
.append('path')
.datum(([company, prices]) => prices)
.attr('fill', 'none')
.attr('stroke-width', 1.5)
.attr('d', line);
return svg.node();
}
sc =[0,7,14,21,28,35,42,49,56]
color2 = d3.scaleThreshold().domain(sc).range(d3.schemeBlues[9])
legend({
color: color2,
title: "Precipitation",
})
{
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 = weather.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(weather)
.join('rect')
.attr('x', d => x(d.week))
.attr('y', d => y(d.day))
.attr('width', x.bandwidth())
.attr('height', y.bandwidth())
.attr('fill', d => color2(d.precipitation)) // this is where square color is set
return svg.node();
}
color3 = d3.scaleDiverging([-2.1, 0, 2.1], ["blue", "white", "red"])
legend({
color: color3,
title: "population change",
})
{
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const visWidth = 600 - margin.left - margin.right;
const visHeight = 400 - margin.top - margin.bottom;
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// draw map
const projection = d3.geoAlbersUsa()
.fitSize([visWidth, visHeight], usaGeo);
const path = d3.geoPath().projection(projection);
g.selectAll('.border')
.data(usaGeo.features.filter(d => d.properties.NAME !== 'Puerto Rico'))
.join('path')
.attr('class', 'border')
.attr('d', path)
.attr('fill', d => color3(stateToPopulation[d.properties.NAME].change)) // this is where the color of a state is set
.attr('stroke', 'white')
return svg.node();
}
color4 = d3.scaleQuantize()
.domain(d3.extent(populations, d => d.population))
.range(d3.schemePurples[5])
legend({
color: color4,
title: "Population",
})
{
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const visWidth = 600 - margin.left - margin.right;
const visHeight = 400 - margin.top - margin.bottom;
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// draw map
const projection = d3.geoAlbersUsa()
.fitSize([visWidth, visHeight], usaGeo);
const path = d3.geoPath().projection(projection);
g.selectAll('.border')
.data(usaGeo.features.filter(d => d.properties.NAME !== 'Puerto Rico'))
.join('path')
.attr('class', 'border')
.attr('d', path)
.attr('fill', d => color4(stateToPopulation[d.properties.NAME].population)) // this is where the color of a state is set
.attr('stroke', 'white')
return svg.node();
}
opacity = d3.scaleOrdinal()
.domain(highlightCountries)
.range([1]).unknown(.25)
color5 = d3.scaleOrdinal()
.domain(highlightCountries)
.range(d3.schemeCategory10).unknown("black")
{
const margin = {top: 10, right: 100, bottom: 20, left: 40};
const visWidth = width - margin.left - margin.right;
const visHeight = 500 - margin.top - margin.bottom;
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleTime()
.domain([minYear, maxYear])
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain([0, maxLifeExpect]).nice()
.range([visHeight, 0]);
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);
g.append('g')
.attr('transform', `translate(0,${visHeight})`)
.call(xAxis);
g.append('g')
.call(yAxis)
.call(g => g.selectAll('.domain').remove())
.append('text')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'middle')
.attr('fill', 'black')
.attr('x', 5)
.text('Life Expectancy');
const line = d3.line()
.x(d => x(d.year))
.y(d => y(d.life_expect));
const series = g.selectAll('.series')
.data(countryToLifeExpectancies)
.join('g')
.attr('class', 'series')
.attr('stroke', ([country, info]) => color5(country)) // this is where line color is set
.attr('stroke-opacity', ([country, info]) => opacity(country)) // this is where line opacity is set
.attr('stroke-width', 1)
.append('path')
.datum(([country, info]) => info)
.attr('fill', 'none')
.attr('d', line);
g.selectAll('.country-label')
.data(labelPoints)
.join('text')
.attr('class', 'country-label')
.attr('x', d => x(d.year) + 2)
.attr('y', d => y(d.life_expect))
.attr('font-size', 10)
.attr('font-family', 'sans-serif')
.attr('dominant-baseline', 'middle')
.text(d => d.country);
return svg.node();
}
color6 = d3.scaleOrdinal()
.domain(origins)
.range(d3.schemeSpectral[3])
{
// margin convention
const margin = {top: 10, right: 10, bottom: 50, left: 100};
const visWidth = 510 - margin.left - margin.right;
const visHeight = 460 - margin.top - margin.bottom;
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// create scales
const x = d3.scaleLinear()
.domain(d3.extent(cars, d => d.horsepower)).nice()
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(cars, d => d.weight)).nice()
.range([visHeight, 0]);
// create and add axes
const xAxis = d3.axisBottom(x);
g.append("g")
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis)
.call(g => g.selectAll('.domain').remove())
.append('text')
.attr('x', visWidth / 2)
.attr('y', 40)
.attr('fill', 'black')
.attr('text-anchor', 'middle')
.text('horsepower');
const yAxis = d3.axisLeft(y);
g.append('g')
.call(yAxis)
.call(g => g.selectAll('.domain').remove())
.append('text')
.attr('x', -40)
.attr('y', visHeight / 2)
.attr('fill', 'black')
.attr('dominant-baseline', 'middle')
.text('weight (lbs)');
// draw grid, based on https://observablehq.com/@d3/scatterplot
const grid = g.append('g')
.attr('class', 'grid');
grid.append('g')
.selectAll('line')
.data(y.ticks())
.join('line')
.attr('stroke', lightgray)
.attr('x1', 0)
.attr('x2', visWidth)
.attr('y1', d => 0.5 + y(d))
.attr('y2', d => 0.5 + y(d));
grid.append('g')
.selectAll('line')
.data(x.ticks())
.join('line')
.attr('stroke', lightgray)
.attr('x1', d => 0.5 + x(d))
.attr('x2', d => 0.5 + x(d))
.attr('y1', d => 0)
.attr('y2', d => visHeight);
// draw points
g.selectAll('circle')
.data(cars)
.join('circle')
.attr('cx', d => x(d.horsepower))
.attr('cy', d => y(d.weight))
.attr('fill', d => color6(d.origin)) // this is where the dot color is set
.attr('opacity', 1)
.attr('r', 3);
return svg.node();
}
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.
