30:T447,geo_map = (w=400, h=400, g) => { const svg = g || d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", w) .attr("height", h); let margin = { top: 10, right: 10, bottom: 10, left: 10 }; let width = w - margin.left - margin.right, height = h - margin.top - margin.bottom; let projection = d3geo.geoKavrayskiy7() .fitSize([width*1.2, width*2/3*1.2], countries) .translate([width*0.46, width*2/3*0.6]) let path = d3.geoPath(projection) // world map svg.append("g").selectAll("path") .data(topojson.feature(world, world.objects.countries).features) .enter() .append("path") .attr("d", path) .style('fill-opacity', 0.1) .attr("name-country", d => { return countries_hash.get(d.id) }) .on("mouseenter", (e, d) => { svg.append("text") .attr("id", "legend") .attr("x", e.offsetX) .attr("y", e.offsetY) .text(countries_hash.get(d.id)) }).on("mouseleave", (e, d) => { svg.selectAll("#legend").remove() }) return svg.node() }31:[] 2e:{"title":"Histogramme","cells":[{"id":0,"value":"# Histogramme\n\n- charger des données\n- créer des bin\n- compter / bins\n- dessiner bar chart","pinned":true,"hidden":false,"mode":"md"},{"id":5,"value":"data_normal = Array.from({length: 200}, d3.randomNormal(1, 1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"bin = d3.bin()","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"data = bin(data_normal)","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"histogram(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"histogram = (data, w=200, h=100) => {\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, w, h])\n .attr(\"width\", w)\n .attr(\"height\", h);\n\n // créer les axes / scales\n\n const xScale = d3.scaleLinear()\n .domain([data[0].x0, data[data.length - 1].x1])\n .range([0, w])\n\n const yScale = d3.scaleLinear()\n .domain([0, d3.max(data.map(d => d.length))])\n .range([0, h])\n\n svg.selectAll(\".hist\").data(data).enter().append(\"rect\")\n\n svg.selectAll(\"rect\")\n .attr(\"id\", (d, i) => \"hist_\" + i)\n .attr(\"class\", \"hist\")\n .attr(\"x\", d => xScale(d.x0))\n .attr(\"y\", d => h - yScale(d.length))\n .attr(\"height\", d => yScale(d.length))\n .attr(\"width\", d => xScale(d.x1) - xScale(d.x0)) \n // créer les marques\n\n\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"# Geo map","pinned":true,"hidden":false,"mode":"md"},{"id":51,"value":"topojson = require (\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/50m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"countries","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"d3geo = require('d3-geo-projection')","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"geo_map()","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"countries_codes = d3.csv(\"https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/all/all.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"countries_hash = new Map(countries_codes.map(d => [d['country-code'], d.name]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"html`\n\n \n \n \n \n \n

${geo_map()} Carte géographique

${histogram(data)} Histogramme

CCC

\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}