25:["$","title",null,{"children":"Test D3 | emile | Observable"}] 4c:[] 48:{"id":"6c1a4f4320d7b225","slug":"test-d3","title":"Test D3","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2018-03-20T13:30:11.137Z","update_time":"$D2018-07-09T08:19:42.601Z","view_time":null,"first_public_time":"$D2018-08-02T10:10:23.967Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2099314ea84c66f8","login":"erochongit","name":"emile","avatar_url":"https://avatars-next.observableusercontent.com/779c99289d6f11b6b39d46e31931113a4605c57181e3819b26fa6599ff91d91d","tier":"starter_2024","bio":"I'm an IT student trying to highlight his graphics skills \r\nhttps://beta.observablehq.com/@erochongit/\r\nhttps://www.behance.net/theSheep","followed_by_you":false,"follows_you":false},"version":432,"publish_version":432,"role":null,"authored":false,"authors":[{"type":"individual","id":"e6240e80edc08632","login":"erochongit","name":"emile","avatar_url":"https://avatars-next.observableusercontent.com/779c99289d6f11b6b39d46e31931113a4605c57181e3819b26fa6599ff91d91d","tier":null,"bio":"I'm an IT student trying to highlight his graphics skills \r\nhttps://beta.observablehq.com/@erochongit/\r\nhttps://www.behance.net/theSheep","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"e6240e80edc08632","login":"erochongit","name":"emile","avatar_url":"https://avatars-next.observableusercontent.com/779c99289d6f11b6b39d46e31931113a4605c57181e3819b26fa6599ff91d91d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Test D3","cells":[{"id":0,"value":"md`# Test D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`Tableau de chiffre random`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"data = {\n while (true) {\n let ar = [];\n for (let i = 0; i < Math.random() * 8 | 0; i++) {\n ar.push(Math.random() * 100 | 0)\n }\n yield new Promise(res => {\n setInterval(() => res(ar), 1000);\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`# Histogram from https://beta.observablehq.com/@rotorb/d3-js-studying-0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"histInit = {\n let sc = d3.scaleLinear()\n .domain(d3.extent(hist.map(e => e.length)))\n .range([15, 100]);\n \n d3.select(\"#histogram\")\n .selectAll(\"span\")\n .data(hist)\n .enter()\n .append(\"span\");\n \n d3.select(\"#histogram\")\n .selectAll(\"span\")\n .data(hist)\n .exit()\n .remove();\n \n d3.select(\"#histogram\")\n .selectAll(\"span\")\n .data(hist)\n .transition()\n .duration(300)\n .delay((d, i) => i * 30)\n .text(d => d.length)\n .style(\"height\", d => sc(d.length) + \"px\")\n .style(\"background\", d => d3.interpolateViridis(sc(d.length)/100));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"hist = {\n while(true) {\n let d = d3.range(20).map(e => Math.random() * 100 | 0);\n let max = d3.max(d);\n let hist = d3.histogram()\n .thresholds(\n 20\n )(d);\n \n yield new Promise(resolve => {\n setInterval(() => resolve(hist), 1000);\n })\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`# d3 Tutorials`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"{\n// d3.selectAll(\"p\").style(\"color\", \"white\");\n // d3.select(\"#phyllotax\").style(\"background-color\", \"black\");\n d3.select(\"#phyllotax\").transition()\n .style(\"background-color\", \"black\");\n \n d3.selectAll(\"p\").style(\"background-color\", function() {\n return \"hsl(\" + Math.random() * 360 + \",100%,50%)\";\n});\n d3.selectAll(\"p\").style(\"color\", function(d, i) {\n return i % 2 ? \"#fff\" : \"#eee\";\n});\n// Update…\nvar p = d3.select(\"body\")\n .selectAll(\"p\")\n .data([4, 8, 15, 16, 23, 42])\n .text(function(d) { return d; });\n\n// Enter…\np.enter().append(\"p\")\n .text(function(d) { return d; });\n\n// Exit…\np.exit().remove();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`# Circles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"circles = d3.selectAll(\"circle\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`# Circles 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"{\nvar svg = d3.select(\"#circles2\");\n\nvar circle = svg.selectAll(\".mon\")\n .data([32, 57, 112, 293]);\n \nvar circleEnter = circle.enter().append(\"circle\");\n \n circleEnter.attr(\"cy\", 60);\ncircleEnter.attr(\"cx\", function(d, i) { return i * 100 + 30; });\ncircleEnter.attr(\"r\", function(d) { return Math.sqrt(d); });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`# Circle3` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"{\n let svg = d3.select(\"#circles3\");\n \n let sc = d3.scaleLinear()\n .domain(d3.extent(hist.map(e => e.length)))\n .range([15, 100]);\n\n d3.select(\"#circles3\")\n .selectAll(\"circle\")\n .data(data)\n .enter()\n .append(\"circle\");\n \n d3.select(\"#circles3\")\n .selectAll(\"circle\")\n .data(data)\n .exit()\n .remove();\n \n d3.select(\"#circles3\")\n .selectAll(\"circle\")\n .data(data)\n .transition()\n .duration(300)\n .attr(\"cy\", 600)\n .attr(\"cx\", function(d, i) { return i * 100 + 300; })\n .attr(\"r\", 5);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`# Circle 4`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"data2 = {\n var n = 0;\n var c = 10;//\n let ar = [];\n while (true) {\n \n let a = n * 137.5;\n let r = c * Math.sqrt(n);\n \n let x = r * Math.cos(a) + 250;\n let y = r * Math.sin(a) + 400;\n \n console.log(Math.cos(a),Math.sin(a),c * Math.sqrt(n))\n \n for (let i = 0; i < Math.random() * 8 | 0; i++) {\n ar.push({x:x,y:y})\n }\n \n n++\n yield new Promise(res => {\n setInterval(() => res(ar), 1);\n })\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"{\n let svg = d3.select(\"#circles4\");\n \n\n//var color = d3.scaleRainbow().domain([0, 2 * Math.PI]);\n\n let sc = d3.scaleLinear()\n .domain(d3.extent(hist.map(e => e.length)))\n .range([15, 100]);\n\n d3.select(\"#circles4\")\n .selectAll(\"circle\")\n .data(data2)\n .enter()\n .append(\"circle\");\n \n d3.select(\"#circles4\")\n .selectAll(\"circle\")\n .data(data2)\n .exit()\n .remove();\n \n d3.select(\"#circles4\")\n .selectAll(\"circle\")\n .data(data2)\n .attr(\"cy\", (d)=>{ return d.x })\n .attr(\"cx\", (d)=>{ return d.y })\n .attr(\"r\", 6)\n .style(\"fill\", (d, i) => d3.schemePastel2[i % 8])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null