2a:T1083,budgetes_viz = { console.log(settings); const cont = document.createElement("div"); const svg = d3.select(DOM.svg()); const cell_height = settings.graph.height - settings.graph.padding * 2; const tooltip = d3.select(document.createElement("div")).call(createTooltip); svg .attr("viewBox" , "0 0 " + settings.graph.width + " " + settings.graph.height) .attr("width" , settings.graph.width) .attr("height" , settings.graph.height); //tooltip svg.on("mousemove", function(d) { let [x,y] = d3.mouse(this); //line.attr("transform", `translate(${x} 0)`); y +=20; if(x>width/2) x-= 100; // tooltip.text("I am here"); tooltip .style("left", x + "px") .style("top", y + "px") }) //vertical scale for graphs const vscale = d3.scaleLinear() .domain(budget_range) .range( [0 , cell_height] ); const axis_scale = d3.scaleLinear() .domain(budget_range) .range( [cell_height , 0] ); const vaxis = d3.axisRight(axis_scale); //cell width for one movie const movie_w = (settings.graph.width - settings.graph.padding * 2)/data.length; let widths_acc = 0; var year_cells = svg.selectAll("g.year") .data(Object.keys(data_by_year)) .enter() .append("g") .attr("class" , "year") .attr("font-family" , "monospace") .attr("font-size" , 8) .attr("transform" , function(d){ //console.log(data_by_year[d].length); let trk = widths_acc * movie_w + settings.graph.padding ; widths_acc += data_by_year[d].length; return "translate(" + trk + " " + settings.graph.padding + ")"; }) .on("mouseover" , function(d){ d3.select(this).style("opacity" , 0.75); d3.select(this).select(".year_bg").attr("fill" , "white"); d3.select(this).select("text").attr("fill" , "black").attr("opacity" , 1); //console.log("TOOLTIP"); tooltip.html(createInfo(d)); tooltip.style("opacity" , 1); }) .on("mouseout" , function(d){ d3.select(this).style("opacity" , 1); d3.select(this).select(".year_bg").attr("fill" , "#eee"); d3.select(this).select("text").attr("fill" , "#888"); tooltip.style("opacity" , 0); }) ; //backs year_cells .append("rect") .attr("class" , "year_bg") .attr("width" , function(d){ return (data_by_year[d].length) * movie_w; }) .attr("height" , cell_height) .attr("fill" , "#eee") ; //some lines year_cells .append("line") .attr("x1" , 0) .attr("x2" , 0) .attr("y1" , 0) .attr("y2" , cell_height) .attr("stroke-width" , 0.5) .attr("stroke" , "#fff") ; //add rects - fixed budget year_cells .selectAll("rect.movie") .data(function(d){return data_by_year[d] }) .enter() .append("rect") .attr("width" , movie_w) .attr("x" , function(t,i){return movie_w * i}) .attr("height" , function(t){return vscale(t.fixed_sum)}) .attr("y" , function(t){return cell_height - vscale(t.fixed_sum)}) .attr("fill" , settings.colors.main_graph ) ; //rects - nominal budget year_cells .selectAll("rect.movie") .data(function(d){return data_by_year[d] }) .enter() .append("rect") .attr("width" , movie_w) .attr("x" , function(t,i){return movie_w * i}) .attr("height" , function(t){return vscale(t.budget_s)}) .attr("y" , function(t){return cell_height - vscale(t.budget_s)}) .attr("fill" , settings.colors.secondary_graph) ; //draw axis const vertical_axis = svg.append("g") .attr("pointer-events" , "none") .attr("class" , "axis") .attr("transform" , "translate(" + settings.graph.padding +" "+settings.graph.padding + ")") .call(vaxis) ; svg.selectAll(".tick").filter(function (d) { return d === 0; }).node().innerHTML = ""; //years year_cells .append("text") .attr("x" , 0) .attr("y" , 0) .attr("dy" , function(d){ return (data_by_year[d].length-1) * (movie_w/3); }) .attr("fill" , "#888") .attr("text-anchor" , "left") .attr("transform" , function(d,i){ return "rotate(-90) translate(-" + (cell_height+24) + " " + movie_w + ")"; }) .text(function(d){return d}) ; cont.appendChild(svg.node()); cont.appendChild(tooltip.node()); return cont; }2b:T12b1,income_viz = { const cont = document.createElement("div"); const svg = d3.select(DOM.svg()); const cell_height = settings.graph.height - settings.graph.padding * 2; const tooltip = d3.select(document.createElement("div")).call(createTooltip); svg .attr("viewBox" , "0 0 " + settings.graph.width + " " + settings.graph.height) .attr("width" , settings.graph.width) .attr("height" , settings.graph.height); //tooltip svg.on("mousemove", function(d) { let [x,y] = d3.mouse(this); y +=20; if(x>width/2) x-= 100; tooltip .style("left", x + "px") .style("top", y + "px") }) const vscale = d3.scaleLinear() .domain(diff_range) .range( [cell_height , 0] ); const axis_scale = d3.scaleLinear() .domain(diff_range) .range( [cell_height , 0] ); const size_scale = d3.scaleLinear() .domain(diff_size_scale) .range( [0 , vscale(diff_range[0])] ); const vaxis = d3.axisRight(axis_scale); //cell width for one movie const movie_w = (settings.graph.width - settings.graph.padding * 2)/data.length; let widths_acc = 0; var year_cells = svg.selectAll("g.year") .data(Object.keys(data_by_year)) .enter() .append("g") .attr("class" , "year") .attr("font-family" , "monospace") .attr("font-size" , 8) .attr("transform" , function(d){ //console.log(data_by_year[d].length); let trk = widths_acc * movie_w + settings.graph.padding ; widths_acc += data_by_year[d].length; return "translate(" + trk + " " + settings.graph.padding + ")"; }) .on("mouseover" , function(d){ d3.select(this).style("opacity" , 0.75); d3.select(this).select(".year_bg").attr("fill" , "white"); d3.select(this).select("text").attr("fill" , "black").attr("opacity" , 1); //console.log("TOOLTIP"); tooltip.html(createInfo(d)); tooltip.style("opacity" , 1); }) .on("mouseout" , function(d){ d3.select(this).style("opacity" , 1); d3.select(this).select(".year_bg").attr("fill" , "#eee"); d3.select(this).select("text").attr("fill" , "#888"); tooltip.style("opacity" , 0); }) ; //backs year_cells .append("rect") .attr("class" , "year_bg") .attr("width" , function(d){ return (data_by_year[d].length) * movie_w; }) .attr("height" , cell_height) .attr("fill" , "#eee") ; //some lines year_cells .append("line") .attr("x1" , 0) .attr("x2" , 0) .attr("y1" , 0) .attr("y2" , cell_height) .attr("stroke-width" , 0.5) .attr("stroke" , "#fff") ; //cols year_cells .selectAll("rect.year") .data(function(d){ //console.log(d , data_by_year[d]); return data_by_year[d]; }) .enter() .append("rect") .attr("width" , movie_w ) .attr("height" , function(t){ console.log(t.money_diff , size_scale( Math.abs(t.money_diff) )); return size_scale( Math.abs(t.money_diff) ); }) .attr("fill" , function(t){ if (t.money_diff<0){ return settings.colors.bad; }else{ return settings.colors.good; } }) .attr("x", function(t,i){return i*movie_w}) .attr("y" , function(t){ if (false){ return vscale(0) }else{ return vscale(0) - size_scale(Math.abs(t.money_diff)); } }) ; //.attr("y" ; //zero line svg.append("line") .attr("x1", settings.graph.padding) .attr("x2" , settings.graph.width - settings.graph.padding) .attr("y1" , vscale(0)+settings.graph.padding) .attr("y2" , vscale(0)+settings.graph.padding) .attr("stroke-width" , 0.5) .attr("stroke" , "gray") .attr("class" , "zero_line") ; //one line svg.append("line") .attr("x1", settings.graph.padding) .attr("x2" , settings.graph.width - settings.graph.padding) .attr("y1" , vscale(1)+settings.graph.padding) .attr("y2" , vscale(1)+settings.graph.padding) .attr("stroke-width" , 0.5) .attr("stroke" , "gray") .attr("class" , "one_line") ; //axis //draw axis const vertical_axis = svg.append("g") .attr("pointer-events" , "none") .attr("class" , "axis") .attr("transform" , "translate(" + settings.graph.padding +" "+settings.graph.padding + ")") .call(vaxis) ; svg.selectAll(".tick").filter(function (d) { return d === 0; }).node().innerHTML = ""; //years year_cells .append("text") .attr("x" , 0) .attr("y" , 0) .attr("dy" , function(d){ return (data_by_year[d].length-1) * (movie_w/3); }) .attr("fill" , "#888") .attr("text-anchor" , "left") .attr("transform" , function(d,i){ return "rotate(-90) translate(-" + (cell_height+24) + " " + movie_w + ")"; }) .text(function(d){return d}) ; cont.appendChild(svg.node()); cont.appendChild(tooltip.node()); return cont; }2c:Tb3c,baksindex = { const ddict = {}; let dobj = d3.csvParse("year,k_to_2019\n\ 1913,25.5188482490272\n\ 1914,28.620726172466\n\ 1915,28.1522321428571\n\ 1916,23.3559259259259\n\ 1917,18.7124629080119\n\ 1918,16.1694871794872\n\ 1919,14.8728773584906\n\ 1920,13.5761033369214\n\ 1921,17.9490512333966\n\ 1922,18.0690544412607\n\ 1923,16.7492695883134\n\ 1924,16.9975741239892\n\ 1925,16.1833190761334\n\ 1926,16.4435462842243\n\ 1927,17.0665764546685\n\ 1928,17.190640617901\n\ 1929,16.9215563506261\n\ 1930,18.1557581573896\n\ 1931,21.090635451505\n\ 1932,24.0690839694657\n\ 1933,23.0851738865162\n\ 1934,21.1851063829787\n\ 1935,20.6081699346405\n\ 1936,20.6531659388646\n\ 1937,19.5537984496124\n\ 1938,21.2207515423444\n\ 1939,21.090635451505\n\ 1940,20.6194005449591\n\ 1941,18.3405719825497\n\ 1942,16.2948320413437\n\ 1943,16.1625800939769\n\ 1944,16.2598195100988\n\ 1945,15.8710570469799\n\ 1946,13.5082470546233\n\ 1947,12.0729419272495\n\ 1948,11.6887859128823\n\ 1949,12.3568256041803\n\ 1950,11.8202436738519\n\ 1951,10.7673875924872\n\ 1952,10.878838412881\n\ 1953,10.8290211791643\n\ 1954,10.8383271268977\n\ 1955,10.8694627980465\n\ 1956,10.5718357082984\n\ 1957,10.1875605815832\n\ 1958,9.96224328593997\n\ 1959,9.92305271439811\n\ 1960,9.76176470588235\n\ 1961,9.69423520368947\n\ 1962,9.56677623261694\n\ 1963,9.43556109725686\n\ 1964,9.33085080147966\n\ 1965,9.15918663761801\n\ 1966,8.83413495213635\n\ 1967,8.6031377899045\n\ 1968,8.20572543916721\n\ 1969,7.74388047482603\n\ 1970,7.33267441860465\n\ 1971,7.084178992698\n\ 1972,6.87688113413304\n\ 1973,6.39023813545009\n\ 1974,5.69570976968237\n\ 1975,5.28739519284517\n\ 1976,5.04151898734177\n\ 1977,4.72308076394957\n\ 1978,4.37619708535739\n\ 1979,3.90833591571119\n\ 1980,3.44815456119566\n\ 1981,3.1499000999001\n\ 1982,2.99221826809015\n\ 1983,2.90648333077278\n\ 1984,2.78476484875248\n\ 1985,2.69146393512591\n\ 1986,2.64980740948246\n\ 1987,2.54774762642246\n\ 1988,2.44754511934795\n\ 1989,2.33415175817397\n\ 1990,2.21253727852172\n\ 1991,2.12828214647317\n\ 1992,2.0675737704918\n\ 1993,2.00863194776238\n\ 1994,1.95821343546217\n\ 1995,1.90487841715753\n\ 1996,1.84983866236433\n\ 1997,1.80975749748888\n\ 1998,1.78281110116383\n\ 1999,1.74330077405087\n\ 2000,1.68507170214661\n\ 2001,1.64057581407449\n\ 2002,1.61529200819672\n\ 2003,1.57935467712986\n\ 2004,1.53713589274832\n\ 2005,1.48635292269013\n\ 2006,1.44062595187329\n\ 2007,1.40016282426081\n\ 2008,1.34997548846459\n\ 2009,1.3555281607262\n\ 2010,1.33329715535365\n\ 2011,1.29117130066144\n\ 2012,1.26606862079477\n\ 2013,1.24813867459777\n\ 2014,1.22847300460719\n\ 2015,1.22765548969329\n\ 2016,1.21133597328418\n\ 2017,1.1858196571031\n\ 2018,1.15754664943652\n\ 2019,1\n\ "); dobj.forEach(function(e){ if(e.year>1928){ ddict[e.year] = Math.round(parseFloat(e.k_to_2019)*100)/100; } }) return ddict; }2d:[{"id":"9d1d6249651fbb9696d78c4b9e4ffeca380d118bd25323bd242869a2ebea0de6de80e5552ae11770d578386e625aa2881ecbf5d1916b715a56f6e02d391eb6f3","href":"https://static.observableusercontent.com/files/9d1d6249651fbb9696d78c4b9e4ffeca380d118bd25323bd242869a2ebea0de6de80e5552ae11770d578386e625aa2881ecbf5d1916b715a56f6e02d391eb6f3","name":"oscar.csv","type":"text/csv","lastModified":1598466356101.576,"size":88013}] 29:{"title":"Оскар в цифрах","cells":[{"id":0,"value":"md`# Оскар в цифрах\n### Бюджеты, скорректированные по индексу цен в сравнении с номинальным бюджетом\nтемно-серый — номинальный бюджет в долларах, синий — пересчет по индексу потребительских цен в США`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"md`### Сборы минус бюджет (номинал)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"md`### Отношение прибыли/убытков к бюджету`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"vegalite({\n data: { values: data },\n name: \"Interest by year\",\n width: 800,\n height: 600,\n mark: \"bar\",\n\n\n //\"tooltip\": {field: \"year\" , type: \"nominal\"},\n encoding: {\n color: {\n field: \"sucsess\",\n type: \"nominal\"\n \n },\n x: { \n field: \"oscar_year\", \n type: \"ordinal\" , \n title: \"Год\" , \n sort: \"ascending\"\n },\n\n y: {\n field: \"money_rel\", \n type: \"quantitative\" , \n title: \"Доля\" , \n tooltip: {\"field\": \"year\" , type: \"nominal\"},\n\n },\n\n }\n}\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"vegalite({\n data: { values: data.filter(function(e){return e.money_rel})},\n name: \"Money\",\n width: 900,\n height: 600,\n mark: \"bar\",\n\n\n //\"tooltip\": {field: \"year\" , type: \"nominal\"},\n encoding: {\n color: {\n fill: \"green\"\n },\n x: { \n field: \"money_rel\", \n type: \"quantitative\" , \n title: \"Отношение прибыли к убыткам\" , \n \n },\n\n y: {\n field: \"name_RUS\", \n type: \"nominal\" , \n title: \"Название\" , \n tooltip: {\"field\": \"year\" , type: \"nominal\"},\n sort: { field: \"money_rel\" , order:\"ascending\" , type: \"quantitative\" }\n\n },\n\n }\n}\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`### Коэффициент коррекции исторического курса доллара на основе индекса потребительских цен`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"vegalite({\n data: { values: baks_table.filter(function(e){ return e.year>=1929}) },\n name: \"Dollar correction\",\n width: 900,\n height: 200,\n mark: \"bar\",\n\n\n //\"tooltip\": {field: \"year\" , type: \"nominal\"},\n encoding: {\n color: {\n fill: \"green\"\n },\n x: { \n field: \"year\", \n type: \"ordinal\" , \n title: \"Год\" , \n sort: { field: \"year\" , order:\"ascending\" , type: \"ordinal\" }\n },\n\n y: {\n field: \"index\", \n type: \"quantitative\" , \n title: \"Множитель\" , \n tooltip: {\"field\": \"year\" , type: \"nominal\"},\n\n },\n\n }\n}\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`#### Настройки`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"settings = {\n return {\n graph: {\n width: 1000,\n height: 700,\n padding: 50\n },\n colors: {\n main_graph: \"#5db5ef\",\n secondary_graph: \"#666\",\n bad: \"#fc8a2d\",\n good: \"#4bbc7e\"\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"budget_range = {\nlet max = d3.max(data , function(e){return e.fixed_sum});\n return [0 , max]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"diff_range = {\nreturn d3.extent(data , function(e){return e.money_diff});\n //return [0 , max]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"diff_size_scale = {\n let extnts = d3.extent(data , function(e){return e.money_diff});\nreturn [0 , Math.abs(extnts[0]) + Math.abs(extnts[1])];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"time_range = {\nreturn d3.extent(data , function(e){\n return new Date(e.oscar_year , 6 , 1)\n \n})\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`#### Данные`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"data_by_year = {\nreturn d3.nest()\n .key(function(e){return e.oscar_year})\n .object(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"DOM.download(() => serialize_json(data_by_year), undefined, \"data_by_year as JSON\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = {\nlet rows = d3.csvParse(await FileAttachment(\"oscar.csv\").text())\n\n//dt.forEach(function(rows){\n \n var flds = /[^a-zA-Z0-9_]+/;\t\n \n rows.forEach(function(e){\n const nums = [\"oscar_year\" , \"budget\" , \"budget_s\" , \"bo_usa\" , \"bo_intl\" , \"sum_income\" , \"bo_ru\" , \"num\" ];\n \n nums.forEach(function(ee){\n e[ee] = +e[ee];\n });\n \n Object.keys(e).forEach(function(i){\n if(flds.test(i)){\n delete(e[i]);\n }\n });\n \n e.mpaa_code = e.mpaa_code.trim();\n if([\"R\" , \"G\" , \"PG-13\" , \"PG\"].indexOf(e.mpaa_code)==-1){\n e.mpaa_code=\"0\";\n }\n \n e.fixed_sum = Math.round(e.budget_s * baksindex[e.oscar_year]);\n e.money_diff = e.sum_income - e.budget_s;\n e.money_rel = e.sum_income / e.budget_s ;\n if(e.money_diff<0){\n e.sucsess = -1\n }else{\n e.sucsess = 1\n }\n });\n //fix sum\n return rows;\n\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"DOM.download(() => serialize_json(data), undefined, \"data as JSON\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"baks_table = {\n let yrs = Object.keys(baksindex);\n let outyrs = [];\n yrs.map(function(e){ outyrs.push({\"year\": e , \"index\" : baksindex[e] })});\n return outyrs\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"DOM.download(() => serialize_json(baksindex), undefined, \"baksindex as JSON\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`#### Тултипы`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"createTooltip = function(el) {\n el\n .style(\"position\", \"absolute\")\n .style(\"pointer-events\", \"none\")\n .style(\"top\", 0)\n .style(\"opacity\", 0)\n .style(\"background\", \"white\")\n .style(\"border-radius\", \"2px\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"padding\", \"10px\")\n .style(\"line-height\", \"1.3\")\n .style(\"z-index\", \"3\")\n .style(\"font\", \"14px sans-serif\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"createInfo = function(yr){\n let r = \"

\" + yr + \"

\";\nconst inf =data_by_year[yr];\n for (let m in inf){\n r+= \"\" + inf[m].name_ENG + \"\"\n r+= \"

$\" + inf[m].budget_s + \"
\"+\n \"\" +\"$\" + inf[m].fixed_sum + \"\"+\n \"

\";\n }\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`#### Библиотеки`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"vegalite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"function serialize_json (data) {\n let s = JSON.stringify(data);\n return new Blob([s], {type: \"application/json\"}) \n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2d","stdlib":"1","titling":"auto"}