31:T292e,{ // 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; }32:[{"id":"fbb17ca24ae88a2dc06b8604f6fae853452796b5be82237df966fc151eed6adb4b5d3cd41cf30770686ce8311019eeae8f14c2b9e24d387f27b7071f1791fd6c","href":"https://static.observableusercontent.com/files/fbb17ca24ae88a2dc06b8604f6fae853452796b5be82237df966fc151eed6adb4b5d3cd41cf30770686ce8311019eeae8f14c2b9e24d387f27b7071f1791fd6c","name":"topoKorea.json","type":"application/json","lastModified":1574852908671.322,"size":218804},{"id":"53e7935728bb0f3f76cbe5a2ab66f4377f9f32629e3944bc6451e716fbf5f20666bab20bdca6b3de04dd04956432e01e549f41cc66639dae6451489c77a336b6","href":"https://static.observableusercontent.com/files/53e7935728bb0f3f76cbe5a2ab66f4377f9f32629e3944bc6451e716fbf5f20666bab20bdca6b3de04dd04956432e01e549f41cc66639dae6451489c77a336b6","name":"median-rent-skorea@1.csv","type":"text/csv","lastModified":1574934272104.182,"size":4096},{"id":"54ab975c865cd6e03128c6c084686e05b0c71008a5ee0eb86f394bb46267a535eeec627749d67b40a429f6827a9cc42ae2e5e659e8058a7afaaff6aa3b71efde","href":"https://static.observableusercontent.com/files/54ab975c865cd6e03128c6c084686e05b0c71008a5ee0eb86f394bb46267a535eeec627749d67b40a429f6827a9cc42ae2e5e659e8058a7afaaff6aa3b71efde","name":"avg-rent-skorea@1.csv","type":"text/csv","lastModified":1574934254883.457,"size":4096}] 2f:{"title":"Monthly Rent in South Korea","cells":[{"id":52,"value":"md` # Monthly Rent in South Korea\n## 한국의 월세\n### by Park Seongryeol - [sungryeolp@gmail.com](mailto:sungryeolp@gmail.com)\n- drag the gray selection zone on timeline chart in order to browse specific timespan\n- change sorting/display option from selections above\n- 하단의 타임라인 차트에서 회색으로 선택된 부분을 드래그하여 특정한 시간대를 열람할 수 있습니다\n- 상단의 선택지에서 정렬/표시 옵션을 변경할 수 있습니다\n## data\n- Geography: Statistics Korea '2018/통계청 2018년 자료\n- Rent: Korea Appraisal Board/한국감정원\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"availableDates = Object.keys(avgRentCsv[0]).slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"RENT_MODES = ({\n AVERAGE: 'AVERAGE',\n MEDIAN: 'MEDIAN'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"translate = (x,y) => `translate(${x},${y})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"mergedDataSample = mergeData(RENT_MODES.MEDIAN)","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"// merges data on geoJson\nmergeData = mode => {\n const _geoJson = lodash.cloneDeep(geoJson);\n _geoJson.features.map(g => {\n // cloned group\n if (mode === RENT_MODES.AVERAGE) {\n const ltdk = ltdKeys[g.properties.name]; // location-to-data key\n const dk = avgRentKey[ltdk];\n const _c = avgRentCsv[dk];\n g.properties = { ...g.properties, ..._c };\n return g;\n }\n if (mode === RENT_MODES.MEDIAN) {\n const ltdk = ltdKeys[g.properties.name]; // location-to-data key\n const dk = medianRentKey[ltdk];\n const _c = medianRentCsv[dk];\n g.properties = { ...g.properties, ..._c };\n return g;\n }\n });\n return _geoJson;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"// location to data\nltdKeys = ({\n 전라남도: '전남',\n 제주특별자치도: '제주',\n 광주광역시: '광주',\n 전라북도: '전북',\n 충청남도: '충남',\n 세종특별자치시: '세종',\n 대전광역시: '대전',\n 경기도: '경기',\n 인천광역시: '인천',\n 서울특별시: '서울',\n 강원도: '강원',\n 경상북도: '경북',\n 경상남도: '경남',\n 대구광역시: '대구',\n 울산광역시: '울산',\n 부산광역시: '부산',\n 충청북도: '충북'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"avgRentKey = avgRentCsv.reduce((ac, cv, i) => ({ ...ac, [cv.location]: i }), {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"avgRentCsv = d3\n .csvParse(await FileAttachment(\"avg-rent-skorea@1.csv\").text())\n .map(a =>\n lodash.mapValues(a, (v, k) => (k === 'location' ? v : parseInt(v, 10)))\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"medianRentKey = avgRentCsv.reduce(\n (ac, cv, i) => ({ ...ac, [cv.location]: i }),\n {}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"medianRentCsv = d3\n .csvParse(await FileAttachment(\"median-rent-skorea@1.csv\").text())\n .map(a =>\n lodash.mapValues(a, (v, k) => (k === 'location' ? v : parseInt(v, 10)))\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"topoData = await FileAttachment(\"topoKorea.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"geoJson = topojson.feature(topoData, topoData.objects.skorea_provinces_2018_geo)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"settings = ({\n width: 900,\n height: 600,\n margin: 50,\n mapWidth: 300,\n mapHeight: 300,\n chartX: 400,\n chartY: 50,\n chartWidth: 200,\n chartHeight: 300,\n chartGap: 5,\n infoTextX: 20,\n infoTextY: 20,\n timeChartX: 50,\n timeChartY: 400,\n timeChartWidth: 600,\n timeChartHeight: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"lodash = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}