// Setup default D3 objects // projection - defines our geo projection, how the map looks // geoPath - calculates d attribute of <path> so it looks like a map // quantize - threshold scale with 9 buckets constructor(props) { super(props); this.projection = d3.geoAlbersUsa() .scale(1280); this.geoPath = d3.geoPath() .projection(this.projection); this.quantize = d3.scaleQuantize() .range(d3.range(9)); this.updateD3(props); }
.scale(width) .translate([width / 2, height / 2]); let path = d3.geoPath().projection(projection);
function canvasMap(ctx, next) { const { airport } = ctx.state; const scale = ctx.query.scale || 1200; const projectionName = d3.hasOwnProperty(ctx.query.projection) ? ctx.query.projection : 'geoStereographic'; const canvas = new Canvas(960, 500); const canvasCtx = canvas.getContext('2d'); const projection = d3[projectionName]() .center([airport.data.longitude, airport.data.latitude]) .scale(scale); const path = d3.geoPath() .projection(projection) .context(canvasCtx); canvasCtx.beginPath(); path(topojson.mesh(land)); path(topojson.mesh(boundaries)); canvasCtx.stroke(); const airportProjected = projection([airport.data.longitude, airport.data.latitude]); canvasCtx.fillStyle = '#f00'; canvasCtx.fillRect(airportProjected[0] - 5, airportProjected[1] - 5, 10, 10); ctx.state.canvasOutput = canvas.toDataURL(); next(); }
.translate([width / 2, height / 2]); const path = d3.geoPath(projection);
.enter() .append('path') .attr('d', d3.geoPath().projection(projection));
componentDidMount() { let width = (this.chartContainer.clientWidth) ? this.chartContainer.clientWidth : DEFAULT_WIDTH; let height = width * 0.618; // some logic propsed by the author which seems to be based on the size // of this specific map // probably, this map scale was obtained after many trials let projection = d3.geoAlbersUsa() .scale(width) .translate([width / 2, height / 2]); let path = d3.geoPath().projection(projection); let svg = d3.select(this.chartContainer) .append("svg") .attr("width", width) .attr("height", height) .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", `0 0 ${width} ${height}`); let g = svg.append("g"); let us = require("./us-states.json"); g.selectAll(".states") .data(topojson.feature(us, us.objects.states).features) .enter().append("path") .attr("class", "states") .attr("d", path); d3.select(window).on("resize", this.updateSizes.bind(this)); }
.scale(width) .translate([width / 2, height / 2]); let path = d3.geoPath().projection(projection);
// Setup default D3 objects // projection - defines our geo projection, how the map looks // geoPath - calculates d attribute of <path> so it looks like a map // quantize - threshold scale with 9 buckets constructor(props) { super(props); this.projection = d3.geoAlbersUsa() .scale(1280); this.geoPath = d3.geoPath() .projection(this.projection); this.quantize = d3.scaleQuantize() .range(d3.range(9)); this.updateD3(props); }