30:Tac7,viz = { const width = 800; const height =800; const fontsize = 24; const axisnums = [1,2,3,4,5,6,7,8,9]; var cellcount = axisnums.length; const mysvg = d3.select(DOM.svg()); mysvg.attr("viewBox" , "0 0 " + (width+2) + " " + (height+2)) .attr("width" , width+2) .attr("height" , height+2) .attr("style" , "font-family: 'Cousine' ; text-anchor: middle") ; //draw const rows = mysvg.selectAll("g.row") .data(digits) .enter() .append("g") .attr("class" , "row") .attr("fill" , function(p,i){ return i%2==0 ? "#eee" : "white" }) .attr("font-weight" , "bold") .attr("transform" , function(d,i){ return "translate(0 " + (height/(cellcount+1))*(i+1) + ")"; }) var nums = rows .selectAll("g.digit") .data(function(d){return d}) .enter() .append("g") .attr("transform" , function(t, i){ return "translate(" + (width/(cellcount+1))*(i+1) + " 0)"; }) ; nums.append("rect") //.attr("fill" , function(p,i){ return i%2==0 ? "#cccccc" : "white" }) .attr("stroke-width" , 1) .attr("stroke" , "gray") .attr("width" , width/(cellcount+1)) .attr("height" , height/(cellcount+1)) ; nums.append("text") //.append("text") .attr("text-anchor" , "middle") .attr("dx" , width/((cellcount+1)*2)) .attr("dy" , width/((cellcount+1)*2)+fontsize/3 ) .attr("font-size" , fontsize) .attr("fill" , "black") .text(function(s){return s}) ; //axis //horizontal const hg = mysvg.selectAll("g.haxis") .data(axisnums) .enter() .append("g") .attr("font-size" , fontsize) .attr("class" , "haxis") .attr("transform" , function(d , i){ return "translate(" + height/(cellcount+1)*(i+1) + " 0)"; }) ; hg.append("text") .attr("text-anchor" , "middle") .attr("dx" , width/(9*2)) .attr("dy" , height/(9*2)+fontsize*0.8) .text(function(d){return d}); //vertical const vg = mysvg.selectAll("g.vaxis") .data(axisnums) .enter() .append("g") .attr("class" , "vaxis") .attr("font-size" , fontsize) .attr("transform" , function(d , i){ return "translate(0 " + (height/(cellcount+1))*(i+1) + ")"; }) ; vg.append("text") .attr("text-anchor" , "middle") .attr("dx" , width/(9*2)+fontsize/2) .attr("dy" , width/(9*2)+fontsize/3) .text(function(d){return d}); //more rect mysvg.append("rect") .attr("x" , function(){return width/(cellcount+1)}) .attr("y" , function(){return height/(cellcount+1)}) .attr("width" , function(){return width - (width/(cellcount+1))}) .attr("height" , function(){return height-(width/(cellcount+1))}) .attr("stroke-width" , 1) .attr("fill" , "none") .attr("stroke" , "black") ; return mysvg.node(); }31:[] 2e:{"title":"Случайные цифр в квадрате","cells":[{"id":0,"value":"md`# Случайные цифр в квадрате`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"html`Лабораторная работа: SVG и D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"DOM.download(() => serialize(viz), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`## Статистика`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"vegalite({\n data: {values: stats},\n width: 550,\n mark: \"bar\",\n \"tooltip\": {\"field\": \"stat\", \"type\": \"quantitative\"},\n encoding: {\n y: {field: \"number\", type: \"ordinal\" , title: \"Цифра\"},\n x: {field: \"stat\", type: \"quantitative\" , title: \"Количество\"},\n \"tooltip\": {\"field\": \"stat\", \"type\": \"quantitative\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`## Использованные материалы`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"html`

Моноширинный шрифт

Cousine: 0123456789 0123456789

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`### Функция М. Бостока, сохраняющая элемент в SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT, null, false);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"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"},{"id":8,"value":"d3 = require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"vegalite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"stats = {\n let st = [];\n let std = {};\n let stout = [];\n digits.forEach(function(e){st = st.concat(e)});\n st.forEach(function(e){\n if(!std[e]){\n std[e]=1;\n }else{\n std[e]++;\n }});\n \n for (let k in Object.keys(std)){\n stout.push({\"number\": k , \"stat\" : std[k]});\n }\n return stout;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`### Просто случайные`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"digits= {\n const d = [];\n function oneRow(n) {\n const r = []\n for (let i = 0 ; i < n ; i++){\n r.push(parseInt(Math.random()*6+1));\n }\n return r;\n }\n for (let e = 0 ; e < 9 ; e++) {\n d.push(oneRow(9));\n }\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"DOM.download(() => serialize_json(digits), undefined, \"Save as JSON\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`### Перемешанные с ровным распределением`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"digits_shuffle= { \n\n function shuffle(array) {\n var currentIndex = array.length, temporaryValue, randomIndex;\n // While there remain elements to shuffle...\n while (0 !== currentIndex) {\n // Pick a remaining element...\n randomIndex = Math.floor(Math.random() * currentIndex);\n currentIndex -= 1;\n // And swap it with the current element.\n temporaryValue = array[currentIndex];\n array[currentIndex] = array[randomIndex];\n array[randomIndex] = temporaryValue;\n }\n return array;\n }\n\n\n let singleline = [0,1,2,3,4,5,6,7,8,9];\n let hundred = [];\n let splited = [];\n \n singleline.forEach(function(e){hundred = hundred.concat(singleline)});\n hundred = shuffle(hundred);\n \n singleline.forEach(function(e,i){\n splited.push(hundred.slice(i*10 , i*10+10))\n });\n \n\n\n return splited;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}