{ // always double check class="" & .selectAll() are matched properly when updates don't work const div = html`

`; const selectMode = html` `; const selectDate = html``; availableDates.forEach(d => { const option = html``; selectDate.appendChild(option); }); let viewRentMode = RENT_MODES.AVERAGE; let viewDate = availableDates[0]; let viewCurrency = 'won'; let timeBrush = null; const brushWidth = settings.timeChartWidth / availableDates.length; const svg = d3 .create('svg') .attr('width', settings.width) .attr('height', settings.height); const clippedWidth = settings.width - settings.margin * 2; const clippedHeight = settings.height - settings.margin * 2; const stage = svg .append('g') .attr('transform', translate(settings.margin, settings.margin)); const stageChart = svg .append('g') .attr('transform', translate(settings.chartX, settings.chartY)); const stageTimeChart = svg .append('g') .attr('transform', translate(settings.timeChartX, settings.timeChartY)); const stageTimeBrush = svg .append('g') .attr('transform', translate(settings.timeChartX, settings.timeChartY)); const stageTimeAxis = stageTimeChart.append('g'); // .attr('transform', translate(0, settings.timeChartHeight)); // const infoText = svg // .append('g') // .attr('transform', translate(settings.infoTextX, settings.infoTextY)) // .append('text'); // infoText.text('no data'); const wonFormat = v => `${Math.floor(v * .1)}만`; // --------------------------- function render() { const data = mergeData(viewRentMode); const barHeight = (settings.chartHeight - data.features.length * settings.chartGap) / data.features.length; const geoMercator = d3 .geoMercator() // the center uses longtitude and latitude // get Long/Lat data from google maps .center([128, 36]) .fitSize([settings.mapWidth, settings.mapHeight], data); // must contain FeatureCollection data const pathGen = d3.geoPath(geoMercator); const colorScale = d3 .scaleLinear() .domain([200, 1000]) .range([1, 0]); const getColor = d => { const value = d.properties[viewDate]; const t = colorScale(value); return d3.interpolateRdYlBu(t); }; const barScale = d3 .scaleLinear() .domain([200, 1000]) .range([0, settings.chartWidth]); const chartAxisX = d3.axisTop(barScale).tickFormat(wonFormat); const onMouseEnter = (d, i, e) => { d3.select(`.geopath.${d.properties.name_eng}`) .select('path') .attr('stroke', 'purple') .attr('stroke-width', 3); d3.select(`.chart-bar.${d.properties.name_eng}`) .select('rect') .attr('stroke', 'purple') .attr('stroke-width', 3); d3.select(`.chart-line.${d.properties.name_eng}`) .attr('stroke', 'purple') .raise(); }; const onMouseLeave = (d, i, e) => { d3.select(`.geopath.${d.properties.name_eng}`) .select('path') .attr('stroke-width', 1) .attr('stroke', 'rgba(0,0,0,.3)'); d3.select(`.chart-bar.${d.properties.name_eng}`) .select('rect') .attr('stroke', 'transparent'); d3.select(`.chart-line.${d.properties.name_eng}`).attr( 'stroke', getColor ); }; // ---- map enter const drawMapPath = enter => enter .append('path') .attr('d', pathGen) .attr('stroke', 'rgba(0,0,0,.3)') .attr('fill', getColor) .on('mouseenter', onMouseEnter) .on('mouseleave', onMouseLeave); const gEnter = enter => enter .append('g') .attr('class', (d, i) => ['geopath', d.properties.name_eng, `data-${i}`].join(' ') ) .call(drawMapPath); // ---- map update const updatePath = update => update .select('path') .transition() .duration(500) .attr('fill', getColor); const gUpdate = update => update.call(updatePath); stage .selectAll('.geopath') .data(data.features, d => d.properties.name_eng) .join(gEnter, gUpdate); // exit is not necessary // --- bar enter const putRect = enter => enter .append('rect') .attr('width', d => barScale(d.properties[viewDate])) .attr('height', d => barHeight) .attr('fill', getColor) .on('mouseenter', onMouseEnter) .on('mouseleave', onMouseLeave); const putBarNumber = enter => enter .append('text') .classed('text-number', true) .attr('transform', d => translate(barScale(d.properties[viewDate]), 3)) .text(d => wonFormat(d.properties[viewDate])) .attr('fill', 'black') .attr('alignment-baseline', 'hanging') .attr('text-anchor', 'start'); const putBarName = enter => enter .append('text') .classed('text-location', true) .attr('transform', d => translate(-20, 3)) .text(d => d.properties.location) .attr('fill', 'black') .attr('alignment-baseline', 'hanging') .attr('text-anchor', 'start'); const bEnter = enter => enter .append('g') .attr('class', (d, i) => ['chart-bar', d.properties.name_eng, `data-${i}`].join(' ') ) .attr('transform', (d, i) => translate(0, i * (barHeight + settings.chartGap)) ) .call(putRect) .call(putBarNumber) .call(putBarName); // --- bar update const setBarGroup = update => update .transition() .duration(200) .attr('transform', (d, i) => translate(0, i * (barHeight + settings.chartGap)) ); const setBarRect = update => update .select('rect') .transition() .duration(200) .attr('width', d => barScale(d.properties[viewDate])) .attr('fill', getColor); const setBarNumber = update => update .select('.text-number') .transition() .duration(200) .attr('transform', d => translate(barScale(d.properties[viewDate]), 3)) .text(d => wonFormat(d.properties[viewDate])); const bUpdate = update => update .call(setBarGroup) .call(setBarRect) .call(setBarNumber); const sortedData = data.features.sort((a, b) => a.properties[viewDate] > b.properties[viewDate] ? -1 : 1 ); stageChart .selectAll('.chart-bar') .data(sortedData, d => d.properties.name_eng) .join(bEnter, bUpdate); stageChart.call(chartAxisX); const scaleTimeX = d3 .scaleLinear() .domain([0, availableDates.length]) .range([0, settings.timeChartWidth]); const scaleTimeY = d3 .scaleLinear() .domain([200, 1000]) .range([settings.timeChartHeight, 0]); const scaleAxisTimeX = d3 .scaleLinear() .domain([ new Date(availableDates[0]), new Date(availableDates[availableDates.length - 1]) ]) .range([0, settings.timeChartWidth - brushWidth]); const timeAxisY = d3.axisLeft(scaleTimeY).tickFormat(wonFormat); stageTimeChart.call(timeAxisY); const timeAxisX = d3 .axisBottom(scaleAxisTimeX) .tickFormat(d3.timeFormat("%Y-%b")) .tickSize(settings.timeChartHeight); stageTimeAxis.call(timeAxisX); const timePathGen = d3 .line() .x(v => scaleTimeX(v.timeIndex)) .y(v => scaleTimeY(v.value)); const mapTimeData = d => Object.entries( lodash.omit(d.properties, [ 'name', 'base_year', 'name_eng', 'code', 'location' ]) ).map(([key, value], i) => ({ timeIndex: i, time: key, value: value })); const timeScaler = d3 .scaleLinear() .domain([ 0, settings.timeChartWidth - settings.timeChartWidth / availableDates.length ]) .range([0, availableDates.length]); const onBrush = (d, i, e) => { const locX = d3.brushSelection(e[i]); // returns X1, X2 if (locX[0] === settings.timeChartWidth - brushWidth) { viewDate = availableDates[availableDates.length - 1]; } else { const idx = Math.floor(timeScaler(locX[0])); viewDate = availableDates[idx]; } selectDate.value = viewDate; render(); }; const tEnter = enter => enter .append('path') .attr('class', d => ['chart-line', d.properties.name_eng].join(' ')) .attr('fill', 'none') .attr('stroke', getColor) .attr('d', d => timePathGen(mapTimeData(d))); const tUpdate = update => update.attr('stroke', getColor); stageTimeChart .selectAll('.chart-line') .data(sortedData, d => d.properties.name_eng) .join(tEnter, tUpdate); if (!timeBrush) { timeBrush = d3 .brushX() .extent([ [0, 0], [settings.timeChartWidth - brushWidth, settings.timeChartHeight] ]); stageTimeBrush.call(timeBrush.on('end', onBrush)); stageTimeBrush.call(timeBrush.move, [0, brushWidth]); stageTimeBrush.select('.overlay').remove(); stageTimeBrush.selectAll('.handle').remove(); } } d3.select(selectMode).on('change', function() { viewRentMode = selectMode.value; render(); }); d3.select(selectDate).on('change', function() { viewDate = selectDate.value; const scaleAxisTimeX = d3 .scaleLinear() .domain([ new Date(availableDates[0]), new Date(availableDates[availableDates.length - 1]) ]) .range([0, settings.timeChartWidth - brushWidth]); const newLocationX = scaleAxisTimeX(new Date(viewDate)); stageTimeBrush.call(timeBrush.move, [ newLocationX, newLocationX + brushWidth ]); render(); }); render(); div.appendChild(selectMode); div.appendChild(selectDate); div.appendChild(svg.node()); return div; }