25:["$","title",null,{"children":"TP 3 – Visualisations Standards en D3.JS | Jérémy Bon | Observable"}] 49:Tab8,function Scatter(data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value title, // given d in data, returns the title text marginTop , // the top margin, in pixels marginRight ,// the right margin, in pixels marginBottom , // the bottom margin, in pixels marginLeft , // the left margin, in pixels width , // the outer width of the chart, in pixels height, // the outer height of the chart, in pixels xlabel, ylabel, } = {}){ console.log(y) const X = d3.map(data, x); const Y = d3.map(data, y); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const margin = ({top: marginTop, right: marginRight , bottom: marginBottom, left: marginLeft}) const I = d3.range(X.length) const xScale = d3.scaleLinear() .domain([0, d3.max(X)]) .range([margin.left, width - margin.right]); const yScale = d3.scaleLinear() .domain([0, d3.max(Y)]) .range([margin.top,height - margin.bottom]) .nice() .clamp(true); const species = data.map(d => d.species) const colorScale = d3.scaleOrdinal() .domain(species) .range(d3.schemeCategory10); svg.selectAll("circle") .data(I) .enter() .append("circle") .attr("cx", i=> xScale(X[i])) .attr("cy", i=>yScale(Y[i])) .attr("r", 2) .style("fill", i => colorScale(species[i])); const legend = svg.append("g") .attr("transform", `translate(${width - margin.right - 100}, ${margin.top})`) .attr("class", "legend"); legend.selectAll("rect") .data(colorScale.domain()) .enter() .append("rect") .attr("x", 0) .attr("y", (d, i) => i * 20) .attr("width", 18) .attr("height", 18) .style("fill", colorScale); legend.selectAll("text") .data(colorScale.domain()) .enter() .append("text") .attr("x", 25) .attr("y", (d, i) => i * 20 + 9) .attr("dy", ".35em") .text(d => d); svg.append("text") .attr("x", 50) .attr("y", 20) .text(title) // Ajouter les axes const xAxis = d3.axisBottom(xScale) svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis) .append("text") .attr("fill", "black") .attr("x", width - margin.right - margin.left) .attr("y", 25) .style("text-anchor", "end") .text(xlabel); const yAxis = d3.axisLeft(yScale) svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", -35) .attr("dy", ".71em") .style("text-anchor", "end") .attr("fill", "black") .text(ylabel); return svg.node(); }4a:T909,chart = (dataset) => { if (c=="false") { const height=500 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const margin = ({top: 20, right: 30, bottom: 30, left: 40}) const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.price)) .range([height - margin.bottom, margin.top]) let line = d3.line() .x(d => x(d.date)) .y(d => y(d.price)) let c = d3.scaleOrdinal(d3.schemeCategory10).domain(grouped.map(d => d[0])) svg.selectAll(".line").data(grouped).enter() .append("path") .attr("class", "line") .attr("fill", "none") .attr("stroke", d => c(d[0])) .attr("d", d => line(d[1])) svg.selectAll(".legend").data(grouped.map(d => d[0])).enter() .append("rect") .attr("x", 50) .attr("class", "legend") .attr("y", (d, i) => { return i * 20 + 100}) .attr("width", 10) .attr("height", 10) .attr("fill", d => c(d)) svg.selectAll(".text").data(grouped.map(d => d[0])).enter() .append("text") .attr("x", 60) .attr("class", "text") .attr("y", (d, i) => { return i * 20 + 110}) .attr("width", 10) .attr("height", 10) .text(d => d) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); } else { const data_cumsum = data_group.map(d => d3.cumsum(d[1].map(d => d.price))) return Plot.plot({ color: { domain: [data_group[0][0],data_group[1][0],data_group[2][0],data_group[3][0]], range: ["blue", "orange","green","red"], legend: true }, marks: [ Plot.line(data_cumsum[0], {x: (d, i) => i, y: d => d,stroke: "blue"}), Plot.line(data_cumsum[1], {x: (d, i) => i, y: d => d,stroke: "orange"}), Plot.line(data_cumsum[2], {x: (d, i) => i, y: d => d,stroke:"green"}), Plot.line(data_cumsum[3], {x: (d, i) => i, y: d => d,stroke:"red"}), ] }) } }4b:[{"id":"4785ade0b90550aaba3f2ebab7be103cd237c01e8c5e65ca475d4364e8a0ec46c116407afb6b736928a5348a2a6a5d7cf021428c26622b663150eae86d0a3659","href":"https://static.observableusercontent.com/files/4785ade0b90550aaba3f2ebab7be103cd237c01e8c5e65ca475d4364e8a0ec46c116407afb6b736928a5348a2a6a5d7cf021428c26622b663150eae86d0a3659","name":"iris.csv","type":"text/csv","lastModified":1674468174303.687,"size":3716}] 29:{"id":"6b1fcd8e51712f8c","slug":null,"title":"TP 3 – Visualisations Standards en D3.JS","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-01-23T09:56:47.937Z","update_time":"$D2023-02-08T11:13:17.122Z","view_time":null,"first_public_time":"$D2023-01-23T09:56:47.937Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"36e90d6d40b7988c","login":"jeremybon","name":"Jérémy Bon","avatar_url":"https://avatars-next.observableusercontent.com/c1e0b5c45bc1ac7d74d0b0cd12293708badceb93fe9b302f208e8f8fd87b11c5","tier":"starter_2024","bio":"","following":false},"version":547,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9526f71aea185f65","login":"jeremybon","name":"Jérémy Bon","avatar_url":"https://avatars-next.observableusercontent.com/c1e0b5c45bc1ac7d74d0b0cd12293708badceb93fe9b302f208e8f8fd87b11c5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"9526f71aea185f65","login":"jeremybon","name":"Jérémy Bon","avatar_url":"https://avatars-next.observableusercontent.com/c1e0b5c45bc1ac7d74d0b0cd12293708badceb93fe9b302f208e8f8fd87b11c5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"TP 3 – Visualisations Standards en D3.JS","cells":[{"id":0,"value":"# TP 3 – Visualisations Standards en D3.JS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## 1-Scatterplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"iris=FileAttachment(\"iris.csv\").csv({typed: true}).then((d) => {\n d.forEach(e => {\n e.sepal_length = +e.sepal_length\n e.sepal_width = +e.sepal_width\n })\n return d\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"Inputs.table(iris)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"On a 5 colonnes et 150 lignes. :\n* sepal_length (float) [4.3,7.9]\n* sepal width (float) [2,4.4]\n* petal length (float) [1,6.9]\n* petal width (float) [0.1,2.5]\n* species (catégorie -> 3)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.barY(iris, {x: \"species\", y: \"petal_width\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"chart1 = Scatter(iris, {\n x: d=>d[a],\n y: d=>d[b],\n title : \"Figure 1 – Scatterplot réalisée à partir des données Iris.\",\n marginTop : 20, // the top margin, in pixels\n marginRight : 30, // the right margin, in pixels\n marginBottom : 30, // the bottom margin, in pixels\n marginLeft : 40, // the left margin, in pixels\n width : 600, // the outer width of the chart, in pixels\n height : 300, // the outer height of the chart, in pixels\n xlabel: a,\n ylabel: b,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"X:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":221,"value":"\nviewof a = html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"Y:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"viewof b = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"# 2 Line chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"data = d3.csv(\"https://raw.githubusercontent.com/LyonDataViz/MOS5.5-Dataviz/master/data/stocks.csv\", d => {\n let parseDate = d3.timeParse(\"%b %Y\")\n d.price = +d.price\n d.date = parseDate(d.date)\n return d \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"* Nombre d’entreprises: 4\n* Nombre de jours: [Janvier 1999-Janvier 2011] soit 123 Jours\n* Price [5.97 ; 223.02] 492 rows\n * AMZN: [7.07 ; 135.91] 123 rows\n * AAPL: [5.97 ; 223.02] 123 rows\n * IBM: [53.01 ; 130.32] 123 rows\n * MSFT: [15.81 ; 43.22] 123 rows","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":309,"value":"data.map(d=>d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"data_group = [...d3.group(data, d => d.symbol)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"grouped = Array.from(d3.group(data, d => d.symbol))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"chart()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"\nviewof c = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"# 3 Histogramme","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":449,"value":"data3 = Array.from({length: 20000}, d3.randomNormal(1, 1));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"bins = d3.bin()\n .domain([d3.min(data3), d3.max(data3)])\n .thresholds(d3.thresholdScott)(data3);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"\n \n \n \n \n \n

\n \n \n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"{\n\n\n\nconst width = 500,\n height = 300,\n margin = {top: 20, right: 20, bottom: 30, left: 40};\n\nconst x = d3.scaleLinear()\n .range([margin.left, width - margin.right])\n .domain([d3.min(data3), d3.max(data3)]);\n\nconst y = d3.scaleLinear()\n .range([height - margin.bottom, margin.top])\n .domain([0, d3.max(bins, d => d.length)]);\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\nsvg.selectAll(\".bar\")\n .data(bins)\n .enter().append(\"rect\")\n .attr(\"class\", \"bar\")\n .attr(\"x\", d => x(d.x0))\n .attr(\"y\", d => y(d.length))\n .attr(\"width\", d => x(d.x1) - x(d.x0) - 1)\n .attr(\"height\", d => height - margin.bottom - y(d.length));\n\nconst xAxis = d3.axisBottom(x);\n\nsvg.append(\"g\")\n .attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .call(xAxis);\n\nconst yAxis = d3.axisLeft(y);\n\nsvg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(yAxis);\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"scatterplotMatrix(iris, {columns:iris.columns.filter(d => d !== \"species\"), colorColumn: 'species', width:964, height:600, padding:20}, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null