30:Tdab,lineChart = (data) => { const svg = d3.select(createSVG(width+margin.left+margin.right, height+margin.top+margin.bottom)); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const yScale = d3.scaleLinear() .domain([0, d3.max(flatData, (d) => d.val)]) .range([height, 0]); const xScale = d3.scaleTime() .domain([moment(minDate), moment(maxDate)]) .range([0, width]); g.append("g") .attr("class", "y axis") .transition() .call(d3.axisLeft(yScale).tickSize(-width)) .selectAll("text") .filter((d,i) => i == 0).remove(); g.append("g") .attr("class", "x axis") .attr("transform", `translate(0,${height})`) .transition() .call(d3.axisBottom(xScale).tickSize(-(height))) .selectAll("line") .filter((d,i) => i == 0).remove(); const clip = DOM.uid("clip"); g.append("defs").append("clipPath") .attr("id", clip.id) .append("rect") .attr("width", width) .attr("height", height); g.append("text") .attr("class", "y-axis-text") .attr("text-anchor", "middle") .attr("transform", `translate(${10 -margin.left},${height/2}) rotate(-90)`) .text("Number of Listings"); const line = d3.line() .curve(d3.curveMonotoneX) .x(d => xScale(d.date)) .y(d => yScale(d.val)); // Create the lines const lines = g.append("g") .attr("class", "lines") .selectAll(".line") .data(data, d => d.key ) .enter().append("path") .attr("class", "line") .style("clip-path", clip) .style("stroke-width", 3) .style("stroke", (d, i) => { d.color = colorScale(d.key); return d.color }) .attr("d", (d) => line(d.values)) const voronoi = d3.voronoi() .x(d => xScale(d.date)) .y(d => yScale(d.val)) .extent([[0, 0], [width, height]]); const hoverGroup = g.append("g") .attr("class", "hoverGroup") .style("opacity", 0) .style("stroke-width", 1) .style("stroke", "#000") const hoverText = hoverGroup.append("text") .attr("class", "hover-text") .attr("x", width/2); const hoverCircle = hoverGroup.append("circle") .attr("r", 5) .style("fill", "#fff") g.append("g") .attr("class", "voronoi") .selectAll(".voronoi-path") .data(voronoi.polygons(d3.merge(data.map((d) => d.values)))) .enter().append("path") .attr("class", "voronoi-path") .attr("d", (d) => d ? "M" + d.join("L") + "Z" : null) .on("mouseenter", (d) => { d3.selectAll(".line") .filter((e) => d.data.area == e.key) .moveToFront() .transition() .style("stroke-width", 4) .style("stroke", "#000"); d3.select(hoverDetails).html(`${moment(d.data.date).format("MM/DD/YYYY")} - ${d.data.val}`); hoverGroup.style("opacity", 1); hoverCircle.moveToFront() .attr("cx", xScale(d.data.date)) .attr("cy", yScale(d.data.val)) hoverText.text(d.data.area) }) .on("mouseleave", (d) => { d3.selectAll(".line") .filter((e) => d.data.area == e.key) .transition() .style("stroke-width", 3) .style("stroke", d => d.color); d3.select(hoverDetails).html("Hover for details"); hoverGroup.style("opacity", 0) hoverText.text("") }); return svg.node(); }31:Te8d,YoYDifference = (data) => { const svg = d3.select(createSVG(width+margin.left+margin.right, height+margin.top+margin.bottom)); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const val = 'yoy'; const allValues = []; data.forEach((d, i) => { d.values.forEach((e,f) => { allValues.push(e[val]) }) }); const yScale = d3.scaleLinear() .domain(d3.extent(allValues)).nice() .range([height, 0]); const xScale = d3.scaleTime() .domain([moment(minDate).add('years',1), moment(maxDate)]) .range([0, width]); g.append("g") .attr("class", "y axis") .transition() .call(d3.axisLeft(yScale).tickSize(-width)) .selectAll("text") .filter((d,i) => i == 0).remove(); g.append("g") .attr("class", "x axis") .attr("transform", `translate(0,${height})`) .transition() .call(d3.axisBottom(xScale).tickSize(-(height))) .selectAll("line") .filter((d,i) => i == 0).remove(); const clip = DOM.uid("clip"); g.append("defs").append("clipPath") .attr("id", clip.id) .append("rect") .attr("width", width) .attr("height", height); g.append("text") .attr("class", "y-axis-text") .attr("text-anchor", "middle") .attr("transform", `translate(${10 -margin.left},${height/2}) rotate(-90)`) .text("YoY Number of Listings"); const line = d3.line() .curve(d3.curveMonotoneX) .x(d => xScale(d.date)) .y(d => yScale(d[val])); // Create the lines const lines = g.append("g") .attr("class", "lines") .selectAll(".line") .data(data, d => d.key ) .enter().append("path") .attr("class", "line") .style("clip-path", clip) .style("stroke-width", 3) .style("stroke", (d, i) => { d.color = colorScale(d.key); return d.color }) .attr("d", (d) => line(d.values.filter(e => e.yoy != null))) const voronoi = d3.voronoi() .x(d => xScale(d.date)) .y(d => yScale(d[val])) .extent([[0, 0], [width, height]]); const hoverGroup = g.append("g") .attr("class", "hoverGroup") .style("opacity", 0) .style("stroke-width", 1) .style("stroke", "#000") const hoverText = hoverGroup.append("text") .attr("class", "hover-text") .attr("x", width/2); const hoverCircle = hoverGroup.append("circle") .attr("r", 5) .style("fill", "#fff") g.append("g") .attr("class", "voronoi") .selectAll(".voronoi-path") .data(voronoi.polygons(d3.merge(data.map((d) => d.values.filter(e => e.yoy != null))))) .enter().append("path") .attr("class", "voronoi-path") .attr("d", (d) => d ? "M" + d.join("L") + "Z" : null) .on("mouseenter", (d) => { d3.selectAll(".line") .filter((e) => d.data.area == e.key) .moveToFront() .transition() .style("stroke-width", 4) .style("stroke", "#000"); d3.select(hoverDetails).html(`${moment(d.data.date).format("MM/DD/YYYY")} - ${d.data.val}`); hoverGroup.style("opacity", 1); hoverCircle.moveToFront() .attr("cx", xScale(d.data.date)) .attr("cy", yScale(d.data[val])) hoverText.text(d.data.area) }) .on("mouseleave", (d) => { d3.selectAll(".line") .filter((e) => d.data.area == e.key) .transition() .style("stroke-width", 3) .style("stroke", d => d.color); d3.select(hoverDetails).html("Hover for details"); hoverGroup.style("opacity", 0) hoverText.text("") }); return svg.node(); }32:T4aa,CSS = html`CSS for styling, that affects both the visualization as well as the entire notebook. `33:[] 2e:{"title":"StreetEasy Data","cells":[{"id":0,"value":"md`# StreetEasy Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`StreetEasy is a real estate listing website for New York City listings. Their economic research team reports on [NYC market trends](https://streeteasy.com/blog/nyc-housing-market-data/) using their extensive datasets on listings, and they provide some of that data in aggregate [here](https://streeteasy.com/blog/data-dashboard/). It's in a zipped format, so I'm using [JSZip](https://stuk.github.io/jszip/) and D3 to read in the files.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"viewof dataset = select({\n title: \"Select Data\",\n options: d3.set(links.map(d => `${d.dataset} - ${d.type}`)).values().sort(d3.ascending),\n value: \"Total Sales Inventory - All Home Types\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"viewof areas = select({\n title: \"Select Areas\",\n description: \"Hold the command key to select multiple\",\n options: d3.set(data.map(d => d.Area)).values().sort(d3.ascending),\n value: [\"Brooklyn\",\"Manhattan\", \"Queens\", \"Staten Island\", \"Bronx\"],\n multiple: true,\n size: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"viewof minDate = date({\n title: \"Min Date\", \n min: \"2010-01-01\",\n max: \"2018-12-31\",\n value: \"2010-01-01\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"viewof maxDate = date({\n title: \"Max Date\", \n min: \"2010-01-01\",\n max: \"2018-12-31\",\n value: \"2019-01-01\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"md`## ${dataset} \nfrom ${moment(minDate).format(\"MM/DD/YYYY\")} to ${moment(maxDate).format(\"MM/DD/YYYY\")}
\nfor ${areas.map(d => { return `' + d + \"\"} ).join(\", \")} `","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"lineChart(nestedData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"hoverDetails = md`Hover for details`","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"md`## ${dataset} - Year over Year Difference\nfrom ${moment(minDate).format(\"MM/DD/YYYY\")} to ${moment(maxDate).format(\"MM/DD/YYYY\")}
\nfor ${areas.map(d => { return `' + d + \"\"} ).join(\", \")} `","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"YoYDifference(yoyData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md`## Data and Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`The data is in a format that's not ideal for visualization, so I do this flatData process to clean it up. It's then nested using __d3.nest()__ so it will play nice with a line generator. Also, I'm having an issue with it loading correctly on first load, so I have it set to a while loop that stops after the 2nd attempt. Seems to work fine, though there is a skip.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"links = [\n { dataset: \"Total Sales Inventory\", \n type: \"All Home Types\", \n url: \"https://s3.amazonaws.com/streeteasy-market-data-api/data_repository/A1_totalInventory_All.zip\" }, \n { dataset: \"Total Sales Inventory\", \n type: \"Condos\", \n url: \"https://s3.amazonaws.com/streeteasy-market-data-api/data_repository/B1_totalInventory_Condo.zip\" }, \n { dataset: \"Total Sales Inventory\", \n type: \"Coops\", \n url: \"https://s3.amazonaws.com/streeteasy-market-data-api/data_repository/C1_totalInventory_Coop.zip\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"data = {\n let i = 0;\n while (i < 2) { // hack to get it to work on intial load\n yield Promises.delay(1000, read_zip(links.filter((d) => { return `${d.dataset} - ${d.type}` == dataset })[0].url));\n i += 1\n }\n}\n// data = read_zip(links.filter((d) => { return `${d.dataset} - ${d.type}` == dataset })[0].url)","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"flatData = {\n \n const columns = data.columns.filter((d) => d != \"Area\" || d != \"Boro\" || d != \"AreaType\" )\n , flatData = [];\n\n const filterData = data.filter((d) => areas.indexOf(d[\"Area\"]) != -1)\n\n filterData.forEach((d) => {\n columns.forEach((col) => {\n d[\"date\"] = moment(col, \"YYYY-MM-DD\");\n if(+d[col] > 0) { \n flatData.push({\"date\": d[\"date\"], \"val\": +d[col], \"area\": d[\"Area\"] }); \n }\n });\n });\n\n return flatData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"nestedData = d3.nest()\n .key(function(d) { return d.area })\n .entries(flatData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"yoyData = {\n \n const returnArray = d3.nest()\n .key(function(d) { return d.area })\n .entries(flatData)\n \n returnArray.forEach((neighborhood, index) => {\n neighborhood.values.forEach((country, cI) => {\n const check = neighborhood.values[cI - 12]\n if(check != undefined) {\n country.yoy = country.val - check.val\n country.yoyDiff = country.val / check.val - 1\n } else {\n country.yoy = null;\n }\n })\n })\n return returnArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"margin = ({top: 30, right: 10, bottom: 30, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"width = window.innerWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"colorScale = d3.scaleOrdinal(d3.schemeDark2)\n .domain(d3.set(flatData.map((d) => d.area)).values())","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"d3.selection.prototype.moveToFront = function() { \n return this.each(function(){\n this.parentNode.appendChild(this);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"read_zip = (url, name) => {\n // Parse the file name, if not provided\n\tname = name || url.replace(/^.*[/]/, '').replace(/\\.zip([?].*)?$/, '');\n\n const promise = new JSZip.external.Promise(function (resolve, reject) {\n JSZipUtils.getBinaryContent(url, function(err, data) {\n if (err) {\n reject(err);\n } else {\n resolve(data);\n }\n });\n });\n \n // window.parsedCSV;\n promise.then(JSZip.loadAsync) // 2) chain with the zip promise\n .then(function(zip) {\n return zip.file(name + \".csv\").async(\"string\"); // 3) chain with the text content promise\n })\n .then(function success(text) { \n window.parsedCSV = d3.csvParse(text); // having some hoisting issues, so this is a hacky fix\n }, function error(e) {\n console.log(e);\n });\n \n return window.parsedCSV\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"moment = require('moment@2.22.2/moment.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"JSZip = require('https://unpkg.com/jszip@3.1.5/dist/jszip.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"JSZipUtils = require('https://bundle.run/jszip-utils@0.0.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"import { createSVG, d3, jitter } from \"@pstuffa/helpers\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"import {slider, date, input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"md`Adding ability to have default multiple values selected.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"function select(config = {}) {\n let {value: formValue, title, description, submit, multiple, size, options} = config;\n if (Array.isArray(config)) options = config;\n options = options.map(o => typeof o === \"string\" ? {value: o, label: o} : o);\n const form = input({\n type: \"select\", title, description, submit, \n getValue: input => {\n const selected = Array.prototype.filter.call(input.options, i => i.selected).map(i => i.value);\n return multiple ? selected : selected[0];\n },\n form: html`\n \n `\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}