Data Visualization Developer at The Associated Press
otherChart = {
const height = 700
let data = wobus
if (selectedRegion !== 'All') data = wobus.filter(d => d.region === selectedRegion)
const highlighted = [wobus[0], wobus[23], wobus[51]]
const yScale = d3.scaleLinear().domain([0, d3.max(data, d => d.baseline)]).range([height - margin, margin])
const xScale = d3.scalePoint().domain(['left', 'right']).range([margin, width - margin])
function getNewDays(d) {
return Math.round(d.baseline + (d.baseline * (d[wobusScenario] / 100 ) ) )
}
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
svg.append('g')
.attr('transform', `translate(0,${height - margin + 10})`)
.call(d3.axisBottom(xScale).ticks(5))
.call(g => g.select(".domain").remove())
const arcGenerator = d3.arc()
.outerRadius(8)
.innerRadius(0)
.startAngle(-Math.PI / 2)
.endAngle(Math.PI / 2);
svg.selectAll('lines')
.data(data, d => d.name)
.join('line')
.attr('x1', d => xScale('left'))
.attr('x2', d => xScale('right'))
.attr('y1', d => yScale(d.baseline) - 5)
.attr('y2', d => yScale(getNewDays(d)) - 5)
.attr('stroke-width', 2)
.attr('stroke',d => highlighted.map(a => a.name).includes(d.name) ? 'darkgrey' : 'lightgrey')
.attr('opacity', d => highlighted.map(a => a.name).includes(d.name) ? 1 : .3 )
let circles = svg
.selectAll("resorts")
.data(data, d => d.name)
.join("path")
.attr('transform', d => `translate(${xScale('left')},${yScale(d.baseline)})` )
.attr("d", d => arcGenerator(d))
.attr("fill", 'steelblue' )
.attr('stroke', 'steelblue')
.attr('stroke-width', 1)
.attr("opacity", d => highlighted.map(a => a.name).includes(d.name) ? 1 : .3)
let newCircles = svg
.selectAll("resorts")
.data(data, d => d.name)
.join("path")
.attr('transform', d => `translate(${xScale('right')},${yScale(getNewDays(d))})` )
.attr("d", d => arcGenerator(d))
.attr("fill", 'tomato' )
.attr('stroke', 'tomato')
.attr('stroke-width', 1)
.attr("opacity", d => highlighted.map(a => a.name).includes(d.name) ? 1 : .3)
svg.append('g')
.attr('transform', `translate(${margin - 15},0)`)
.call(d3.axisLeft(yScale).ticks(5))
return svg.node()
}
yScale = d3.scaleLinear().domain([d3.min(wobus, d => d[selectedScenario]), 0]).range([height - margin, margin])
colorScale = d3.scaleSequential().domain([-100, 0]).interpolator(d3.interpolateRdBu)
heightScale = d3.scaleLinear().domain(d3.extent(wobus, d => d.baseline)).range([1, 40])
xScale = d3.scaleLinear().domain(d3.extent(wobus, d => d.base_elev_ft)).range([margin, width - margin])
map = {
// Construct a path generator.
const width = 900
const R = 5
const curve = d3.line().curve(d3.curveBumpX);
const settings = [["Northeast", [-77.189941,40.245992, 2] ], ["Southwest", [-60,40.245992, 2] ], ["Northwest", [-60,40.245992, 2] ] ]
const zoom = d3.zoom()
.scaleExtent([1, 8])
.on('zoom', zoomed)
function clicked(e, d) {
const center = projection([-77.189941,40.245992])
e.stopPropagation();
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(2)
.translate(-center[0], -center[1]),
d3.pointer(e, svg.node())
);
}
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
const heightScale = d3.scaleLinear().domain([0, 10000]).range([2, 15])
const arcGenerator = d3.arc()
.outerRadius(d => heightScale(d.base))
.innerRadius(0)
.startAngle(-Math.PI / 2)
.endAngle(Math.PI / 2);
const defs = svg.append('defs')
defs
.append('marker')
.attr('id', 'arrow')
.attr('orient', 'auto')
.attr('markerHeight', 25)
.attr('markerWidth', 25)
.attr('viewBox', "0 0 12 12")
.attr('refX', 6)
.attr('refY', 6)
.append('path')
.attr('d', "M2,2 L10,6 L2,10 L6,6 L2,2")
.attr('fill', '#B84E58')
defs.selectAll('gradients')
.data(connections)
.join('linearGradient')
.attr("id", (d, i) => `gradient${i}`)
.attr('x1', d => d.lon > d.match.lon ? 1 : 0)
.attr('x2', d => d.lon > d.match.lon ? 0 : 1)
.selectAll('stops')
.data(d => [{offset: 0, color: 'steelblue'},
{offset: .7, color: '#B84E58'}])
.join('stop')
.attr('offset', s => s.offset)
.attr('stop-color', s => s.color )
const g = svg.append("g")
// states background
g.append("path")
.datum(topojson.merge(us, us.objects.lower48.geometries))
.attr("fill", "#ddd")
.attr("d", d3.geoPath())
.on('click', clicked);
g.append("path")
.datum(topojson.mesh(us, us.objects.lower48, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", d3.geoPath())
g.selectAll('circle')
.data(connections)
.join('path')
.attr('transform', d => `translate(${projection([d.lon, d.lat])[0]},${projection([d.lon, d.lat])[1]} )`)
.attr('d', d => arcGenerator(d))
.attr('fill', 'steelblue')
.attr('stroke', 'white')
/*
svg.selectAll('circle')
.data(connections)
.join('path')
.attr('transform', d => `translate(${projection([d.match.lon, d.match.lat])[0]},${projection([d.match.lon, d.match.lat])[1]} )`)
.attr('d', d => arcGenerator(d.match))
.attr('fill', '#B84E58')
.attr('opacity', .5)
.attr('stroke', 'white')
*/
g.selectAll('line')
.data(connections)
.join('path')
.attr('d', d => curve([projection([d.lon, d.lat]), projection([d.match.lon, d.match.lat]) ] ))
.attr('stroke',(d, i) => `url(#gradient${i})`)
.attr('stroke-width', 1)
.attr('opacity', .7)
.attr('fill', 'none')
.attr('marker-end', 'url(#arrow)')
.on('mouseover', function(d, obj){
d3.select(this).attr('stroke-width', 3).attr('opacity', 1)
mutable chosenResort = `${obj.name} will have as long of a season as ${obj.match.name}`
})
.on('mouseout', function(){d3.select(this).attr('stroke-width', 1).attr('opacity', .7) })
g.call(zoom)
function zoomed(e) {
g.attr('transform', e.transform)
}
return svg.node()
}
{const path = d3.geoPath(projection)
return path(topojson.merge(us, us.objects.lower48.geometries))
}
{const x0 = -98.114433, y0 = 40, x1 = -63.309746, y1 = 50.058131
return projection([x0, y0])
}
projection = d3.geoAlbersUsa().scale(1280).translate([480, 300])
us = {
const us = await d3.json("https://cdn.jsdelivr.net/npm/us-atlas@1/us/10m.json");
us.objects.lower48 = {
type: "GeometryCollection",
geometries: us.objects.states.geometries.filter(d => d.id !== "02" && d.id !== "15")
};
return us;
}
topojson.feature(counties, counties.objects.counties).features
counties = FileAttachment("counties-albers-10m.json").json()
treemap(emissions).descendants()
d3.rollups(emissions.filter(d => !topResorts.includes(d.name)), v => d3.sum(v, d => d.value), d => d.source)
.map(d => ({name: 'Other', source: d[0], value: d[1]}))
topResorts = d3.rollups(emissionsData, v => d3.sum(v, d => d.emissions), d => d['ski area name']).sort((a, b) => b[1] - a[1]).map(d => d[0]).slice(0, 15)
emissionsData = await FileAttachment("sustainable_slopes.csv").csv()
top = {const data = await FileAttachment("sustainable_slopes.csv").csv()
const top = d3.rollups(data, v => d3.sum(v, d => d.emissions), d => d.source ).sort((a,b) => b[1] - a[1] ).slice(0, 7).map(d => d[0])
return [...top, 'other']
}
eCopy = {
const emissions = d3.csvParse(await FileAttachment("sustainable_slopes.csv").text(), d => ({name: d['ski area name'],scope: +d.scope, source: top.includes(d.source) ? d.source : 'other', emissions: +d.emissions}) )
const resorts = d3.rollups(emissions, v => d3.sum(v, d => d.emissions), d => d.source, d => d.name)
.sort((a, b) => d3.sum(b[1], d => d[1]) - d3.sum(a[1], d => d[1]) )
.map(d => (
d[1].map(x => ({source: d[0], name: x[0], value: x[1] }))
.sort((a, b) => top.indexOf(a.source) - top.indexOf(b.source) )
)).flat(1)
return resorts
}
skiCounties = await FileAttachment('ski_counties.json').json()
path = d3.geoPath(d3.geoAlbersUsa())
path(skiCounties.features[0])
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.