31:T837,grid_map = { const width = 800; const height = 500; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const speedDomain = speed_domains; const speedDomainForLegend = speedDomain.slice(0, speedDomain.length); const speedDomainForTick = speedDomain.slice(0, speedDomain.length); const color = (d) => ["#decbe4", "#ccebc5", "#b3cde3", "#fbb4ae"][d]; const titleColor = (d) => ["#000", "#333", "#333", "#333"][d]; const baseWidthForJpGridMap = 193.5; const baseHeightForJpGridMap = 113.13; const x = d3 .scaleLinear() .domain([0, baseWidthForJpGridMap]) .range([0, width]); const y = d3 .scaleLinear() .domain([0, baseHeightForJpGridMap]) .range([0, (width * baseHeightForJpGridMap) / baseWidthForJpGridMap]); const legend = svg.append("g"); const legendWidth = 20; const legendHeight = 100; const legendThresholdHeight = legendHeight / speedDomainForLegend.length; const legendMergin = 30; const legendScale = d3 .scaleLinear() .domain(d3.extent(speedDomainForTick)) .range([0, legendHeight]); const legendAxis = d3 .axisRight(legendScale) .tickValues(speedDomain) .tickFormat((d) => (d > 1 ? `${d} days` : `${d} day`)); legend .append("g") .attr("transform", `translate(${legendWidth},${legendMergin})`) .call(legendAxis); legend .append("g") .attr("transform", `translate(0,${legendMergin})`) .selectAll("rect") .data(speedDomainForLegend) .enter() .append("rect") .attr("width", legendWidth) .attr("height", legendThresholdHeight) .attr("x", 0) .attr("y", (d, i) => legendThresholdHeight * i) .attr("fill", (d) => color(d)); legend .append("text") .attr("x", 0) .attr("y", 15) .attr("class", "legend-title") .text("Estimated delivery time based on warehouse locations and carriers"); new GridMap(svg.append("g"), x, y, merge(grid_map_data, speed_data), "speed") .setColor(color) .setTitleColor(titleColor) .setTitleKey("name") .renderMap() .renderTitles(); return svg.node(); }32:T650,function multiChoice(config = {}) { const {title, description, placeholder, submit, options} = config; const checked = config.value const isChecked = value => type === 'checkbox' ? (checked || []).indexOf(value) > -1 : value === checked const type = config.type === 'radio' || config.type === 'checkbox' ? config.type : 'radio' const _options = (Array.isArray(config) ? config : options) .map(o => typeof o === 'string' ? { value: o, label: o } : o) const getValue = input => { if (type === 'checkbox') { return Array.prototype.filter.call(input, radio => radio.checked).map(input => input.value) } const checked = Array.prototype.find.call(input, radio => radio.checked) return checked ? checked.value : undefined } const form = input({ title, description, submit, form: html` `, // By making some simple changes to @jashkenas/input (support for subscribing to the form's // `onchange` event), this code could be spared from declaring `action()` action: form => { const update = (e) => { e && e.preventDefault(); form.value = getValue(form.input) form.dispatchEvent(new CustomEvent("input")) } form.onchange = update update() } }) form.output.remove(); form.style.fontSize = "1em"; return form; }33:T533, class GridMap { constructor(container, x, y, data, valueKey) { this.container = container .selectAll('rect') .data(data) .enter().append('g') .attr('data-id', (d) => d.id) .attr('transform', (d) => `translate(${x(d.x)},${y(d.y)})`); this.x = x; this.y = y; this.valueKey = valueKey; this.color = () => 'lightgray'; this.titleColor = () => 'black'; } setColor(color) { this.color = color; return this; } setTitleColor(titleColor) { this.titleColor = titleColor; return this; } renderMap() { this.container.append('rect') .attr('width', (d) => this.x(d.width)) .attr('height', (d) => this.y(d.height)) .attr('fill', (d) => this.color(d[this.valueKey])); return this; } setTitleKey(titleKey) { this.titleKey = titleKey; return this; } renderTitles() { this.container.append('svg') .attr('class', 'title') .attr('width', (d) => this.x(d.width)) .attr('height', (d) => this.y(d.height)) .append('text') .attr('x', '50%') .attr('y', '55%') .attr('alignment-baseline', 'middle') .attr('text-anchor', 'middle') .attr('fill', (d) => this.titleColor(d[this.valueKey])) .text((d) => d[this.titleKey]); return this; } } 34:[] 2f:{"title":"How long does it take for a package to ship across Japan?","cells":[{"id":0,"value":"md`# How long does it take for a package to ship across Japan?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"viewof notebook_lang = select({\n title: \"Visualization Language\",\n description: \"Choose between English or 日本語\",\n options: [{label: \"English\", value: \"en\"},\n {label: \"日本語\", value: \"ja\"}],\n value: \"en\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`There are 47 prefectures in Japan services by three major carriers JP Post${reference(\n \"https://www.post.japanpost.jp/send/deli_days/index.html\",\n \"JP Post ゆうパケット翌配ワイド\"\n)}, Sagawa${reference(\n \"https://www.sagawa-exp.co.jp/send/days.html\",\n \"Sagawa 飛脚\"\n)}, and Yamato${reference(\n \"http://date.kuronekoyamato.co.jp/date/Main\",\n \"Yamato 宅急便\"\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"md`### Single Origin\nWhen shipping from a single origin, the time packages spend in transit depends on the carriers middle and last mile. This means the ability to deliver a package to customers in the next day or in two days or more than two days is decided by your carrier and the time of the day the package is handed over to the carrier company.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"viewof ship_from = select({\n title: \"Origin Prefecture\",\n description: \"Which prefecture are you shipping from?\",\n options: prefecture_data_local,\n value: \"JP-13\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"viewof ship_to = select({\n title: \"Destination Prefecture\",\n description: \"Which prefecture are you shipping to?\",\n options: prefecture_data_local,\n value: \"JP-22\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"table(d3.filter(carrier_data, d => d.from_iso === ship_from && d.to_iso === ship_to), {\n columns: {\n from_iso: {\n title: \"Origin\",\n formatter: d => iso_to_name(d)\n },\n to_iso: {\n title: \"Destination\",\n formatter: d => iso_to_name(d)\n },\n carrier_name: {\n title: \"Carrier\"\n },\n transit_time_in_day: {\n title: \"Delivery Time\",\n formatter: d => {\n let message = \"\"\n if(d === \"1\")\n message = \"Next day\"\n else if (d === \"2\")\n message = \"Within two days\"\n else\n message = \"More than two days\"\n return message\n }\n },\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`### Multiple Origins\nWhen fulfilling orders from an online marketplace, products are shipped to customers from multiple warehouse locations across Japan. By shipping products to customers from the nearest warehouse, the delivery time can be as fast as next-day from the date of of fulfilment.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"viewof mas = Inputs.search(prefecture_data_local, {\n placeholder: \"Type to filter prefectures\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"viewof items = Inputs.table(mas, {\n width: 200,\n height: 250,\n required: false,\n value: prefecture_data_local.filter((_, i) => [1, 3, 7, 9].includes(i))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"viewof carrier_used = select({\n title: \"Your Carriers\",\n description: \"Select all the carriers you can ship with. Use CTRL+Left Click or CMD+Left Click to multi-select options.\",\n options: [...new Set(d3.map(carrier_data, d => d.carrier_name))],\n value: [\"JP Post\", \"Sagawa\", \"Yamato\"],\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"references = md`## References\n\n

${d.title} - ${DOM.text(d.url.replace(/^http[s]\\:\\/\\//, \"\"))}`)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md `## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"md `### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"html ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"md `### Packages`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"import {select, input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"import { multiAutoSelect } from \"@john-guerra/multi-auto-select\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"import {table} from \"@tmcw/tables\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"md `### Class and Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"function reference(url, title = \"\") {\n if (!reference_data.length) document.head.appendChild(html`\n`);\n let i = mutable reference_data.findIndex(f => f.url === url);\n if (i < 0) {\n i = mutable reference_data.push({url, title});\n mutable reference_data = mutable reference_data;\n } else {\n ({url, title} = mutable reference_data[i]);\n ++i;\n }\n const a = document.createElement(\"A\");\n a.className = \"reference\";\n a.title = title;\n a.rel = \"noreferrer\";\n a.target = \"_blank\";\n a.textContent = i.toString().replace(/\\d/g, i => superscript[i]);\n a.href = url;\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"function checkboxes(config = {}) {\n return multiChoice(Object.assign({ type: 'checkbox' }, config))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"merge = (array1, array2) => {\n return array1.map((value, index) => {\n return Object.assign(value, array2[index]);\n });\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"function iso_to_name(iso) {\n let pref = prefecture_dict.get(iso.split(\"-\")[1])[0]\n return notebook_lang === \"en\" ? pref.name_en : pref.name_ja\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"function get_destinations_by_speed(d, speed) {\n let destination = new Set()\n const result = d.get(speed).reduce((acc, item) => {\n if(!destination.has(item.to_iso)) {\n destination.add(item.to_iso, { \"to_iso\": item.to_iso })\n acc.push({ \"to_iso\": item.to_iso })\n }\n return acc\n }, [])\n \n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"md `### Data and Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"superscript = \"⁰¹²³⁴⁵⁶⁷⁸⁹\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"mutable reference_data = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"prefecture_data = d3.csv(\"https://gist.githubusercontent.com/Rayraegah/cf6f34f0b85da8159112fc11c74b1624/raw/fab7e49a7ce5adb5cb8233c7e9312b342c0576d0/public_prefecture_data.csv\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"carrier_data = d3.csv(\"https://gist.githubusercontent.com/Rayraegah/cf6f34f0b85da8159112fc11c74b1624/raw/fab7e49a7ce5adb5cb8233c7e9312b342c0576d0/public_transit_data\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"prefecture_name_data = d3.csv(\"https://gist.githubusercontent.com/Rayraegah/cf6f34f0b85da8159112fc11c74b1624/raw/f2bbc952b6d8619774ae466b7efbaa6396d20a27/short_prefecture_locale.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"prefecture_data_local = d3.map(prefecture_name_data, (d) => ({\n label: notebook_lang === \"en\" ? d.name_en : d.name_ja,\n value: `JP-${d.id}`\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"prefecture_dict = d3.group(prefecture_name_data, d => d.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"grid_map_data = d3.json(\"https://gist.githubusercontent.com/Rayraegah/cf6f34f0b85da8159112fc11c74b1624/raw/f2bbc952b6d8619774ae466b7efbaa6396d20a27/japan_grid_map.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"warehouse_locations = items.map((c) => c[items.columns[1]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"coverage = {\n const all_destinations = []\n \n for(let origin of warehouse_locations) {\n all_destinations.push(...d3.filter(carrier_data, d => d.from_iso === origin))\n }\n \n return all_destinations\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"speed_data = {\n const tt_data = d3.group(coverage, d => d.carrier_name)\n const coverage_by_carrier = []\n const coverage_by_speed = []\n \n for(let c of carrier_used) {\n coverage_by_carrier.push(...tt_data.get(c))\n }\n \n for(let i = 1; i <= 47; i++) {\n const num = i < 10 ? `0${i}` : i\n const jp_xx = coverage_by_carrier.filter(d => d.to_iso === `JP-${num}`)\n const speed = d3.min(jp_xx, d => d.transit_time_in_day)\n /* jp_xx.reduce((min, p) => p.transit_time_in_day < min ? \n p.transit_time_in_day : min, jp_xx[0].transit_time_in_day);*/\n coverage_by_speed.push({name: iso_to_name(`JP-${num}`), speed })\n }\n \n return coverage_by_speed\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"speed_domains = {\n const unique_speed_values = new Set(d3.map(speed_data, d => d.speed))\n return [...unique_speed_values].sort()\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}