30:T5cc,chart = { const margin = ({top: 20, right: 30, bottom: 30, left: 40}) const height = 200 const svg = d3.create("svg") .attr("width", width) .attr("height", height) const x = d3.scaleBand() .domain(d3.range(dataset.length)) .range([margin.left, width - margin.right]) const y = d3.scaleLinear() .domain([d3.max(dataset, d => d.age), 0]) .range([margin.top, height - margin.bottom]) let line = d3.line() .x((d, i) => i * x.bandwidth() + x.bandwidth() / 2) .y(d => y(d.age) - margin.top) svg.append("g").attr("transform", `translate(${margin.left}, 0)`).selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", (d, i) => i * x.bandwidth() ) .attr("y", (d, i) => y(d.age)) .attr("width", x.bandwidth()) .attr("height", (d, i) => height - y(d.age) - margin.bottom) .attr("fill", "none") .attr("stroke", "black") svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`).selectAll("path") .data([dataset]) .enter() .append("path") .attr("d", d => line(d)) .attr("fill", "none") .attr("stroke", "black") let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) // xAxis(svg.append("g")) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node() }31:T417,scatterplot = (dataset, var_x = "age", var_y = "poids") => { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, 2*width/6]); const x = d3.scaleLinear() .domain([0, d3.max(dataset, d => d[var_x])]) .range([0, 100]) const y = d3.scaleLinear() .domain([0, d3.max(dataset, d => d[var_y])]) .range([0, 100]) const color = d3.scaleOrdinal(d3.schemePaired) svg.selectAll("circle").data(dataset) .enter() .append("circle") .attr("cx", d => x(d[var_x])) .attr("cy", d => y(d[var_y])) .attr("r", 5) .attr("fill", d => color(d.species)) // .attr("stroke", "black") svg.selectAll("rect").data(cat) .enter() .append("rect") .attr("x", 150) .attr("y", (d, i) => i * 20 + 50) .attr("width", 10) .attr("height", 10) .attr("fill", d => color(d[0])) .attr("stroke", "black") svg.selectAll("text").data(cat) .enter() .append("text") .attr("x", 150 + 12) .attr("y", (d, i) => i * 20 + 50 + 7) .text(d => d[0]) return svg.node(); }32:[] 2e:{"title":"Essai de création de visualisation","cells":[{"id":0,"value":"# Essai de création de visualisation\n\nCe notebook reprend le code présente pendant le cours 2\n\n* Données aléatoires https://observablehq.com/@romsson/dummy-data-for-visualization-projects\n\n* un line chart complet https://observablehq.com/d/54249e82d1fb9df3\n\n* Exemple de traitement de données avec Iris (chargement, typage) https://observablehq.com/d/1b12ae6f10d76f12\n\n* Scatterplot https://observablehq.com/d/4b6b426ae7d964e8\n\n* Chart template https://observablehq.com/@d3/chart-template\n","pinned":true,"hidden":false,"mode":"md"},{"id":5,"value":"a = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"b = a + 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"f = (a, b) => { return a + b }","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof v = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"dataset = [{\"age\": 100, \"poids\": 10}, {\"age\": 10, \"poids\": 20}, {\"age\": 100, \"poids\": 30}, {\"age\": 100, \"poids\": 30}, {\"age\": 10, \"poids\": 10}, {\"age\": 50, \"poids\": 20}, {\"age\": 50, \"poids\": 20}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"raw = d3.csv(\"https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/iris.csv\", d => {\n let res = {}\n res.sepal_length = +d.sepal_length\n res.sepal_width = +d.sepal_width \n res.petal_width = +d.petal_width \n res.species = d.species\n return res\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"scatterplot(raw, c, \"sepal_length\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"attributes = Object.keys(raw[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"c","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"viewof c = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"cat = Array.from(d3.group(raw, d => d.species))","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"stocks = d3.csv(\"https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/stocks.csv\", d => {\n let res = {}\n res.symbol = d.symbol\n res.price = +d.price\n res.date = timeParse(d.date)\n return res\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"stocks","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"d3.group(stocks, d => d.symbol)","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"d3.rollup(stocks, v => d3.mean(v, d => d.price), d => d.symbol)","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"timeParse = d3.timeParse(\"%b %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}