2b:null 2c:["$","title",null,{"children":"Used Car Marketplace Explorer | Ilyá Belsky | Observable"}] 31:T498,viewof selectedModel = { if (!selectedMake) { return placeholder( `👆 Select a make in the table above 👆`, null ); } const cellWidth = (width - 267) / 3; const cellHeight = 80; const data = aq.from(modelsSearch).rename({ model_id: "id" }); return Inputs.table(data, { rows: 20, multiple: false, columns: data.select(aq.not("id")).columnNames(), width: { model: 110, // offers: 45, price: cellWidth, year: cellWidth, km: cellWidth }, align: { price: "center", year: "center", km: "center" }, format: { model: modelCell(cellHeight), offers: sparkbar(d3.max(modelsOfMake, (d) => d.offers)), price: histogramCell(priceStatsOfMake, { width: cellWidth, tickFormat: ",.3r" // height: cellHeight }), year: histogramCell(yearStatsOfMake, { width: cellWidth, tickFormat: ".0f" // height: cellHeight }), km: histogramCell(kmStatsOfMake, { width: cellWidth, tickFormat: ",.3r" // height: cellHeight }) } }); }32:T5e3,viewof selectedCoche = Inputs.table(offersSearch, { // layout: "auto", multiple: false, rows: 25, width: { image: 100, title: 220, year: 50, km: 80, price: 80, fuel_type: 13, location: 100 // warranty: 10, // offer_type: 80 }, columns: [ "image", "title", // "engine", // "doors", "year", "km", "price", "fuel_type", "main_province", // "warranty", // "offer_type", "published_at" ], header: { main_province: "🇪🇦", fuel_type: "⛽", published_at: "📅" }, // sort: "price", format: { // engine: colorCell(enginesScale), // doors: colorCell(doorsScale), year: colorCell(yearScale), price: sparkbar( d3.max(selectedOffers, (d) => d.price), colorPrimary, // ",.5r" ), km: sparkbar( d3.max(selectedOffers, (d) => d.km), colorPrimary, ".2s" ), main_province: colorCell(provinceScale), fuel_type: (d) => d[0], // fuelType: colorCell(fuelScale), // offerType: colorCell(offerScale), warranty: (d) => (d ? "🏦" : ""), published_at: (d) => `${d3.utcFormat("%m-%d")(d)} (${ d3.utcDay.range(d, new Date()).length } days)`, title: (d, i, arr) => html`${d}`, image: (d, i, arr) => html`

` } })33:T4c0,offersOfSelectedModel = coches.size ? coches .filter( aq.escape( (d) => !transmissionTypeId || d.transmission_type_id === transmissionTypeId ) ) .filter( aq.escape( (d) => !selectedProvinces.length || selectedProvinces.includes(d.main_province) ) ) .filter( aq.escape( (d) => fuel_type.length === 0 || fuel_type.includes(d.fuel_type) ) ) .filter( aq.escape((d) => warranty.length === 0 || warranty.includes(d.warranty)) ) .filter( aq.escape( (d) => offer_type.length === 0 || offer_type.includes(d.offer_type) ) ) .filter( aq.escape( (d) => is_financed === "both" || (is_financed === "yes") === d.is_financed ) ) .filter( aq.escape( (d) => is_certified === "both" || (is_certified === "yes") === d.is_certified ) ) .filter( aq.escape( (d) => is_professional === "both" || (is_professional === "yes") === d.is_professional ) ) : []34:T448,modelsCell = (maxOffers) => { const f = d3.format(".3s"); return (d, i, arr) => { const make = arr.get("make", i); const totalOffers = arr.get("offers", i); const models = modelOffers.filter((d) => d.make === make); const makeStyle = { cursor: "default", display: "flex", background: colorPrimary, width: `${(totalOffers / maxOffers) * 100}%`, overflow: "hidden", borderLeft: `.5px solid ${colorPrimary}`, borderRight: `.5px solid ${colorPrimary}` }; const modelStyle = (modelOffers) => ({ color: colorPrimary, background: "white", opacity: 0.9, margin: "0.5px 0.5px 0.5px 0", width: `${(modelOffers / totalOffers) * 100}%`, overflow: "hidden", textAlign: "center", padding: "0px" }); return htl.html`

${models.map( (model) => htl.html`

${model.model}

` )}

`; }; }35:T41f,modelCell = (height) => (d, i, arr) => { const images = imagesOfMake .filter((d) => d.model_id === arr.get("id", i)) .map((d) => d.image); return htl.html`

${d}

`; }36:T6a2,histogramCell = (dataArr, { height = 16, width, tickFormat } = {}) => { const domain = d3.extent(dataArr, (d) => d.value); return (mean, i, arr) => { const id = arr.get("id", i); const data = dataArr.filter((d) => d.id === id); const textAnchor = mean < domain[0] + (domain[1] - domain[0]) / 2 ? "start" : "end"; return Plot.plot({ x: { domain, label: null, // type: type, tickSize: 0, tickPadding: -10, ticks: 0, tickFormat }, y: { label: null }, marks: [ // Show bounding box of the extent for the current row Plot.rectX([d3.extent(data, (d) => d.value)], { fill: colorPrimary, fillOpacity: 0.1, x1: "0", x2: "1", stroke: colorPrimary, strokeOpacity: 0.2 }), // Show histogram Plot.areaY( data, Plot.binX( { y: "sum" }, { x: "value", y: "offers", fill: colorPrimary, opacity: 0.4, curve: "linear" } ) ), // Show mean Plot.tickX([mean], { stroke: colorPrimary, strokeWidth: 2 }), Plot.textX([mean], { fill: colorPrimary, stroke: "white", fontWeight: "bold", text: (d) => (tickFormat ? d3.format(tickFormat)(d) : d), textAnchor, dx: -4 * (textAnchor === "end" ? 1 : -1) }), Plot.frame({ stroke: colorPrimary }) ], width, height, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 0 }); }; }37:T229a,/* Refs: https://observablehq.com/@d3/brushable-parallel-coordinates https://observablehq.com/@fheyen/brushable-parallel-coordinates -- wrapped d3 charts examples: https://observablehq.com/@d3/slope-chart?collection=@d3/charts https://observablehq.com/@d3/beeswarm vertical https://observablehq.com/@oluckyman/teachers-compare?collection=@oluckyman/ismart */ function ParallelCoordinatesChart( data, { keys, // data dimensions group, // given d in data, returns a categorical value for color initialSelection, // array of [key, [min, max]] groups, // an array of ordinal values representing the data groups colors = d3.schemeTableau10, // an array of color strings, for the dots scale = {}, // object of scale/axis settings { [key]: { tickFormat } } onBrush, // an optional callback to call when brushed with args: (key, [brushMin, brushMax]) width = 640, // outer width, in pixels height, // outer height, in pixels (depends on keys count by default) keyHeight = 120, brushHeight = 50, // height of brush rect marginTop = 20, // top margin, in pixels marginRight = 150, // right margin, in pixels marginBottom = 20, // bottom margin, in pixels marginLeft = 30 // left margin, in pixels } = {} ) { const deselectedColor = "#ddd"; // Convert data from arquero to js array, if needed // TODO: skip null and undefined data data = Array.from(data); const sample = data[0]; // TODO: should accept getters as well keys = keys || Object.keys(sample); height = height || keys.length * keyHeight; // Compute values const coordinates = keys.map((key) => d3.map(data, (d) => d[key])); const G = group == null ? null : d3.map(data, group); // Compute scale types const scaleTypes = coordinates.map( (coos, i) => scale[keys[i]]?.type || inferScaleType(coos) ); // Compute domains const domains = coordinates.map((values, i) => scaleTypes[i] !== "ordinal" ? d3.extent(values) : ordinalDomain(values) ); if (G && groups === undefined) groups = d3.sort(G); // Construct scales const scales = scaleTypes.map((type, i) => ({ ordinal: d3.scalePoint, temporal: d3.scaleUtc, linear: d3.scaleLinear, log: d3.scaleLog } [type]() .domain(domains[i]) .range( scale[keys[i]]?.reverse ? [width - marginRight, marginLeft] : [marginLeft, width - marginRight] )) ); const x = new Map(Array.from(keys, (key, i) => [key, scales[i]])); const y = d3.scalePoint(keys, [marginTop, height - marginBottom]); const color = group == null ? null : d3.scaleOrdinal(groups, colors); // Chart // const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10); const line = d3 .line() .defined(([, value]) => value != null) .x(([key, value]) => x.get(key)(value)) .y(([key]) => y(key)); const path = svg .append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-opacity", 0.1) .selectAll("path") // .data(data.slice().sort((a, b) => d3.ascending(a[keyz], b[keyz]))) .data(data) .join("path") .attr("stroke", (d, i) => (G ? color(G[i]) : "plum")) .attr("d", (d) => line(d3.cross(keys, [d], (key, d) => [key, d[key]]))); const brush = d3 .brushX() .extent([ [marginLeft, -(brushHeight / 2)], [width - marginRight, brushHeight / 2] ]) .on("start brush end", brushed); // Axes // const coos = svg .append("g") .selectAll("g") .data(keys) .join("g") .attr("transform", (d) => `translate(0,${y(d)})`) .each(function (key) { d3.select(this).call( d3.axisBottom(x.get(key)).tickFormat(scale[key]?.tickFormat || null) ); }) .call((g) => g .append("text") .attr("x", marginLeft) .attr("y", -6) .attr("text-anchor", "start") .attr("fill", "currentColor") .text((d) => d) ) .call((g) => g .selectAll("text") .clone(true) .lower() .attr("fill", "none") .attr("stroke-width", 5) .attr("stroke-linejoin", "round") .attr("stroke", "white") ) .call(brush); const selections = new Map(initialSelection); // Preselect svg.property("value", data); coos.each(function (key, i) { const preset = selections.get(key); if (preset) { const range = preset.map(x.get(key).copy().clamp(true)); d3.select(this).call(brush.move, range); } }); function brushed({ selection }, key) { const xScale = x.get(key); const isOrdinal = !xScale.invert; const getSelectedValues = isOrdinal ? (s) => s : (s) => s .map(xScale.invert) .map(n => n.toFixed(5)) // fix rounding glitches like 18300.000000000015 if (selection === null) selections.delete(key); else selections.set( key, scale[key]?.reverse ? getSelectedValues(selection).reverse() : getSelectedValues(selection) ); if (onBrush) onBrush(key, selections.get(key)); console.log(selection, selections) const selected = []; const isActive = (d) => Array.from(selections).every(([key, [min, max]]) => !!x.get(key).invert ? d[key] >= min && d[key] <= max : min <= x.get(key)(d[key]) && x.get(key)(d[key]) <= max ); path.each(function (d, i) { const active = isActive(d); d3.select(this) .style("stroke", active ? (G ? color(G[i]) : "plum") : deselectedColor) .attr("stroke-opacity", active ? 0.6 : 0.1); if (active) { d3.select(this).raise(); selected.push(d); } }); coos.call((g) => g .selectAll(".selected-range") .data((d) => [d]) .join("text") .classed("selected-range", true) .attr("x", width - marginRight + 8) .attr("y", 4) .attr("text-anchor", "start") .attr("fill", "currentColor") .attr("font-size", "14px") .text((key) => { let extent = d3.extent(data.filter(isActive), (d) => d[key]); if (extent[0] === extent[1]) extent = [extent[0]]; if (scale[key]?.reverse) extent.reverse(); const scaleType = scaleTypes[keys.indexOf(key)]; return extent .filter((v) => v !== undefined) .map((value) => scale[key]?.tickFormat ? scale[key]?.tickFormat(value) : scaleType === "temporal" ? d3.utcFormat("%y–%m–%d")(value) : value ) .join(" • "); }) ); svg.property("value", selected).dispatch("input"); } // // Basement // // Infer scale types // strings and booleans imply an ordinal scale; // dates imply a UTC scale; // and anything else is linear. // Unless they represent text, we recommend explicitly converting strings to more specific types when loading data (e.g., with d3.autoType or Observable’s FileAttachment). For simplicity’s sake, Plot assumes that data is consistently typed; type inference is based solely on the first non-null, non-undefined value. // Infer the scale type from the data! Prefer the domain, if // present, over channels. (The domain and channels should be consistently // typed, and the domain is more explicit and typically much smaller.) We only // check the first defined value for expedience and simplicitly; we expect // that the types are consistent. // if (domain !== undefined) { // if (isOrdinal(domain)) return asOrdinalType(kind); // if (isTemporal(domain)) return "utc"; // return "linear"; // } function inferScaleType(values) { if (isOrdinal(values)) return "ordinal"; if (isTemporal(values)) return "temporal"; return "linear"; } function isOrdinal(values) { for (const value of values) { if (value == null) continue; const type = typeof value; return type === "string" || type === "boolean"; } } function isTemporal(values) { for (const value of values) { if (value == null) continue; return value instanceof Date; } } function defined(x) { return x != null && !Number.isNaN(x); } function ordinalDomain(data) { const values = new d3.InternSet(); for (const v of data) values.add(v); return d3.sort(values, ascendingDefined); } function ascendingDefined(a, b) { return defined(b) - defined(a) || d3.ascending(a, b); } svg.append("g").attr("transform", `translate(0,${marginTop})`); return svg.node(); }38:[] 2f:{"id":"78b92ed38ed9cf06","slug":"coches-catalog-explorer","title":"Used Car Marketplace Explorer","thumbnail":"cc055cf82d5fbd210749637e0b447a26af2a61d1d904a555aa7ac26d51e78e08","access_level":"public","create_time":"$D2023-11-23T15:45:21.813Z","update_time":"$D2026-01-06T17:04:14.385Z","view_time":null,"first_public_time":"$D2024-08-20T09:28:06.463Z","fork":true,"stars":6,"starred":false,"owner":{"type":"team","id":"4330efe17d3f85df","login":"oluckyman","name":"Ilyá Belsky","avatar_url":"https://avatars-next.observableusercontent.com/4fd43f90fde77934b5f4caa4453accf60bdeeb2cc01f813bfc0ad738c2b77958","tier":"starter_2024"},"version":4597,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"35030f2775c5ade5","login":"oluckyman","name":"Ilyá Belsky","avatar_url":"https://avatars-next.observableusercontent.com/4fd43f90fde77934b5f4caa4453accf60bdeeb2cc01f813bfc0ad738c2b77958","tier":null}],"members":[{"type":"individual","id":"35030f2775c5ade5","login":"oluckyman","name":"Ilyá Belsky","avatar_url":"https://avatars-next.observableusercontent.com/4fd43f90fde77934b5f4caa4453accf60bdeeb2cc01f813bfc0ad738c2b77958","tier":null,"role":"editor"},{"type":"team","id":"4330efe17d3f85df","login":"oluckyman","name":"Ilyá Belsky","avatar_url":"https://avatars-next.observableusercontent.com/4fd43f90fde77934b5f4caa4453accf60bdeeb2cc01f813bfc0ad738c2b77958","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Used Car Marketplace Explorer","cells":[{"id":0,"value":"# Used Car Marketplace Explorer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4495,"value":"This tool visualizes data from [coches.net](https://coches.net), a Spanish used car marketplace. I built it to see the whole market at a glance when I was looking for a car.\n\nIt provides a bird's-eye view of the Spanish used car market and lets you quickly compare prices, mileage, and other specs across different makes and models.\n\nData is collected daily from coches.net listings.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4276,"value":"\n Crawled at \n \n ${d3.timeFormat('%d %b %H:%m')(crawledAt)}\n \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3146,"value":"viewof makesSearch = Inputs.search(makes, {\n placeholder: \"Filter by make, e.g. Suzuki\",\n format: (d) => (d === 1 ? \"1 make\" : `${d} makes`)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3144,"value":"viewof selectedMake = {\n const width = 150;\n const data = aq.from(makesSearch).rename({ make_id: \"id\" });\n return Inputs.table(data, {\n rows: 10,\n multiple: false,\n columns: data.select(aq.not(\"id\")).columnNames(),\n width: {\n make: 110,\n offers: 45,\n price: width,\n year: width,\n km: width\n },\n align: {\n models: \"left\",\n price: \"center\",\n year: \"center\",\n km: \"center\"\n },\n format: {\n offers: sparkbar(\n d3.max(makes, (d) => d.offers),\n colorPrimary\n ),\n models: modelsCell(d3.max(makes, (d) => d.offers)),\n price: histogramCell(priceStats, { width, tickFormat: \",.3r\" }),\n year: histogramCell(yearStats, {\n width,\n tickFormat: \".0f\"\n }),\n km: histogramCell(kmStats, {\n width,\n tickFormat: \",.3r\"\n })\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4046,"value":"viewof modelsSearch = Inputs.search(modelsOfMake, {\n placeholder:\n \"Filter by model\" +\n (modelsOfMake.size ? `, e.g. ${modelsOfMake.get('model')}` : \"\"),\n format: (d) => (d === 1 ? \"1 model\" : `${d} models`)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3424,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3865,"value":"viewof transmissionTypeId = {\n if (!coches.size) return htl.html``;\n return Inputs.radio([1, 2, null], {\n label: \"Transmission Type\",\n value: null,\n format: (d) => (d ? [\"Automatic\", \"Manual\"][d - 1] : \"Any\")\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4099,"value":"viewof selectedProvinces = {\n if (!coches.size) return htl.html``;\n return Inputs.checkbox(locations, {\n label: \"Provinces\",\n format: colorCell(provinceScale)\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4316,"value":"viewof fuel_type = filterUI(\"fuel_type\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4388,"value":"viewof is_professional = filterUI('is_professional', 'bool')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4357,"value":"viewof warranty = filterUI('warranty')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4359,"value":"viewof is_financed = filterUI('is_financed', 'bool')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4367,"value":"viewof is_certified = filterUI('is_certified', 'bool')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4395,"value":"viewof offer_type = filterUI(\"offer_type\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3791,"value":"viewof selectedOffers = {\n if (!selectedMake) {\n return placeholder('', []);\n }\n if (!selectedModel) {\n return placeholder(\n `👆 Select a model in the table with photos above 👆`,\n []\n );\n }\n return ParallelCoordinatesChart(offersOfSelectedModel, {\n // keys: \"publicationDate year km price engine location\".split(\" \"),\n keys: \"year km price\".split(\" \"),\n width,\n // height: 400,\n // keyHeight: 60,\n group: selectedProvinces.length ? (d) => d.main_province : undefined,\n groups: locations,\n // colors: provinceScale.range(),\n scale: {\n year: { tickFormat: d3.format(\"\") },\n km: { tickFormat: d3.format(\".2s\"), reverse: true },\n price: { type: \"log\" }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3825,"value":"viewof offersSearch = Inputs.search(selectedOffers, { format: d => d === 1 ? '1 offer' : `${d} offers`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3826,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3669,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3888,"value":"selectedCoche","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3997,"value":"---\n# Boring zone\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3478,"value":"modelsOfMake = {\n if (!selectedMake) return [];\n return aq.from(\n await memoizedApi(\"modelsOfMake\", {\n makeId: selectedMake.id,\n priceMax,\n kmMax,\n yearMin\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4595,"value":"Inputs.table(modelsOfMake, { layout: 'auto', rows: 5 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3535,"value":"priceStatsOfMake = {\n if (!selectedMake) return [];\n return await memoizedApi(\"priceStatsOfMake\", {\n makeId: selectedMake.id,\n priceMax,\n kmMax,\n yearMin\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3653,"value":"yearStatsOfMake = {\n if (!selectedMake) return [];\n return await memoizedApi(\"yearStatsOfMake\", {\n makeId: selectedMake.id,\n priceMax,\n kmMax,\n yearMin\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3645,"value":"kmStatsOfMake = {\n if (!selectedMake) return [];\n return await memoizedApi(\"kmStatsOfMake\", {\n makeId: selectedMake.id,\n priceMax,\n kmMax,\n yearMin\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3769,"value":"imagesOfMake = {\n if (!selectedMake) return [];\n return await memoizedApi(\"imagesOfMake\", { makeId: selectedMake.id });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3957,"value":"cochesApi = {\n if (!selectedModel) return [];\n return aq.from(\n await memoizedApi(\"coches\", {\n makeId: selectedMake.id,\n modelId: selectedModel.id,\n priceMax,\n kmMax,\n yearMin\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3820,"value":"coches = cochesApi","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3811,"value":"Inputs.table(coches, { layout: 'auto', rows: 5 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3795,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4295,"value":"filterColumns = \"fuel_type, warranty, is_financed, is_certified, is_professional, has_urge, offer_type\".split(\n \", \"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2171,"value":"---\n# Code\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4305,"value":"stats = (column, table) => table.groupby(column).count().orderby(aq.desc('count'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4551,"value":"placeholder = (msg, value) => {\n const element = msg\n ? html`\n${msg}\n\n`\n : html``;\n element.value = value;\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4313,"value":"filterUI = (column, type = \"checkbox\", table = coches) => {\n if (!table.size) return htl.html``\n const columnStats = stats(column, table);\n const disabled = columnStats.size <= 1;\n return type === \"checkbox\"\n ? Inputs.checkbox(columnStats.objects(), {\n label: column,\n format: (d) => `${d[column]} (${d.count})`,\n valueof: (d) => d[column],\n disabled\n })\n : Inputs.radio(\n [\n ...columnStats\n .objects()\n .map((d) => ({ ...d, [column]: d[column] ? \"yes\" : \"no\" })),\n !disabled && {\n [column]: \"both\",\n count: aq.agg(columnStats, op.sum(\"count\"))\n }\n ].filter((d) => d),\n {\n label: column,\n format: (d) => `${d[column]} (${d.count})`,\n valueof: (d) => d[column],\n value: disabled ? (columnStats.get(column) ? \"yes\" : \"no\") : \"both\",\n disabled\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3277,"value":"colorPrimary = '#fa8072'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3150,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3765,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3297,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3830,"value":"yearScale = d3.scaleSequential()\n .domain(d3.extent(offersOfSelectedModel, (d) => +d.year))\n .interpolator(d3.interpolateGreys);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4122,"value":"provinceScale = d3.scaleOrdinal().domain(locations).range(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3946,"value":"memoizedApi = memoize(async (endpoint, params) => await api(endpoint, params))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3453,"value":"memoize = (func) => {\n const cache = {};\n\n return function (...args) {\n const key = JSON.stringify(args);\n if (cache[key]) {\n return cache[key];\n }\n\n const result = func.apply(this, args);\n cache[key] = result;\n return result;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3239,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4003,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"---\n# Data\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3896,"value":"api = (url, params = {}) => {\n // Create a new URL\n const apiUrl = new URL(`https://coches.belsky.in/api/${url}`);\n\n // Add the properties in params as search parameters\n Object.keys(params).forEach((key) =>\n apiUrl.searchParams.append(key, params[key])\n );\n\n // Perform the fetch and return the response as JSON\n return fetch(apiUrl).then((res) => res.json());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"priceMax = 300000 - 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"yearMin = new Date().getFullYear() - 99","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1855,"value":"kmMax = 1000000 - 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4267,"value":"crawledAt = api('crawledAt').then(res => new Date(res[0].crawled_at))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3906,"value":"makes = await api(\"makes\", { yearMin, kmMax, priceMax })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3922,"value":"modelOffers = await api(\"modelOffers\", { yearMin, kmMax, priceMax })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3928,"value":"priceStats = await api(\"priceStats\", { yearMin, kmMax, priceMax })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3935,"value":"kmStats = await api(\"kmStats\", { yearMin, kmMax, priceMax })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3937,"value":"yearStats = await api(\"yearStats\", { yearMin, kmMax, priceMax })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4074,"value":"locations = `\nMadrid\t53410\nBarcelona\t29103\nValencia\t16072\nSevilla\t14683\nMálaga\t13442\nAlicante\t11620\nMurcia\t8425\nVizcaya\t6928\nLas Palmas\t6248\nA Coruña\t5793\nGranada\t5637\nSta. C. Tenerife\t5534\nBaleares\t5459\nToledo\t5385\nPontevedra\t5285\nAsturias\t5143\nZaragoza\t5110\nCádiz\t4924\nTarragona\t4259\nBadajoz\t4162\nGirona\t4103\nAlmería\t4102\nCórdoba\t3756\nJaén\t3660\nValladolid\t3416\nNavarra\t3291\nCastellón\t2839\nCantabria\t2741\nCiudad Real\t2597\nLleida\t2536\nSalamanca\t2521\nGuipúzcoa\t2477\nBurgos\t2399\nLugo\t2241\nHuelva\t2155\nLeón\t1995\nÁlava\t1882\nAlbacete\t1758\nLa Rioja\t1743\nCáceres\t1672\nOrense\t1365\nHuesca\t1039\nGuadalajara\t837\nCuenca\t823\nPalencia\t787\nZamora\t731\nÁvila\t710\nSegovia\t664\nTeruel\t479\nSoria\t277\nMelilla\t141\nCeuta\t107\n`\n .trim()\n .split(\"\\n\")\n .map((d) => d.split(\"\\t\")[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"---\n## Imports\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":367,"value":"import {sparkbar, colorCell} from \"@oluckyman/toolbelt\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"import { table, columns, aq, op } from '@oluckyman/toolbelt'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"