28:null 29:["$","title",null,{"children":"1.first blood | 2007040109 | Observable"}] 2e:T562,Plot.plot({ x:{inset:40}, color: { legend: true, }, y:{grid:types=='dot'?false:true, inset:6}, marks: [ Plot.voronoi(types=="dot"?data:[], { x: x, y:y, fill: "Species", title: "Species", fillOpacity: fillOpacity, stroke: "white" }), Plot.hull(types=="dot"?data:[], { x: x, y:y, fill: "Species", title: "Species", fillOpacity: fillOpacity, stroke: "white" }), Plot.dot(types=="density"?data:[] ,{ x: x, y: y, r:skew, strokeWidth:skew, stroke: "Species", pointerEvents: "none" }), types=="bar"?[Plot.rectY(data, Plot.binX({y: "count"}, {x: x, fill: "Species",fillOpacity:fillOpacity+0.4,insetLeft: skew, insetRight: skew }))]:s(data.filter(d=>d.Species), { sort:types=="line"?x:null, x:types=="boxY"? "Species":x, y:y, thresholds:thresholds, r:skew, strokeWidth:skew, stroke: "Species", strokeOpacity: types=="line"? d =>d.Species == species ? 1 : 0 :1, fill:types=="dot"||types=="boxY"? "Species":null, fillOpacity: types=="dot"?1: fillOpacity, title: d => `Petal_Width:${d.Petal_Width}\nPetal_Length:${d.Petal_Length}\nSepal_Length${d.Sepal_Length}\nSepal_Width${d.Sepal_Length}` }), ] })2f:T615,viewof selection = { const svg = d3.create("svg") .attr("viewBox", [-padding, 0, width, width]); svg.append("style") .text(`circle.hidden { fill: #000; fill-opacity: 1; r: 1px; }`); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const cell = svg.append("g") .selectAll("g") .data(d3.cross(d3.range(columns.length), d3.range(columns.length))) .join("g") .attr("transform", ([i, j]) => `translate(${i * size},${j * size})`); cell.append("rect") .attr("fill", "none") .attr("stroke", "#aaa") .attr("x", padding / 2 + 0.5) .attr("y", padding / 2 + 0.5) .attr("width", size - padding) .attr("height", size - padding); cell.each(function([i, j]) { d3.select(this).selectAll("circle") .data(data.filter(d => !isNaN(d[columns[i]]) && !isNaN(d[columns[j]]))) .join("circle") .attr("cx", d => xes[i](d[columns[i]])) .attr("cy", d => yes[j](d[columns[j]])); }); const circle = cell.selectAll("circle") .attr("r", 3.5) .attr("fill-opacity", 0.7) .attr("fill", d =>zes(d.Species)); cell.call(brush, circle, svg); svg.append("g") .style("font", "bold 10px sans-serif") .style("pointer-events", "none") .selectAll("text") .data(columns) .join("text") .attr("transform", (d, i) => `translate(${i * size},${i * size})`) .attr("x", padding) .attr("y", padding) .attr("dy", ".71em") .text(d => d); svg.property("value", []) return svg.node(); }30:T11a7, function GroupedBarChart(data, { x = (d, i) => i, //值 y = d => d, // 数量 z = () => 1, // 标签 title, defined, curve = d3.curveLinear, marginTop = 30, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.1, // amount of x-range to reserve to separate groups yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [ymin, ymax] zDomain, // array of z-values zPadding = 0.05, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10, // array of colors } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default domains, and unique the x- and z-domains. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Omit any data not present in both the x- and z-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i]) && zDomain.has(Z[i])); //const Xs = i => xScale(X[i]) + xzScale(Z[i]); // for bisection later // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const xzScale = d3.scaleBand(zDomain, [0, xScale.bandwidth()]).padding(zPadding); const yScale = yType(yDomain, yRange); const color = d3.scaleOrdinal(zDomain, colors); const zScale = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `Species:${X[i]}\nrange:${formatValue(Z[i])}\ncount:${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i]) + xzScale(Z[i])) .attr("y", i => yScale(Y[i])) .style("opacity",0.7) .attr("width", xzScale.bandwidth()) .attr("height", i => yScale(0) - yScale(Y[i])) .attr("fill", i => zScale(Z[i])) bar.on("mouseover", function() { d3.select(this) .attr("x", i => (xScale(X[i]) + xzScale(Z[i]))-2) .attr("width", xzScale.bandwidth()*0.98) .attr("y", i => yScale(Y[i])*0.98) .attr("height", i => (yScale(0) - yScale(Y[i]))*0.98) .style("opacity",1.0) // Get current event info console.log(d3.event) // Get x & y co-ordinates console.log(d3.mouse(this)) }) .on("mouseout", function() { d3.select(this) .attr("x", i => (xScale(X[i]) + xzScale(Z[i]))) .attr("width", xzScale.bandwidth()) .attr("y", i => yScale(Y[i])) .attr("height", i => yScale(0) - yScale(Y[i])) .style("opacity",0.7) }); if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); return Object.assign(svg.node(), {scales: {color: zScale}}); }31:T512,function brush(cell, circle, svg) { const brush = d3.brush() .extent([[padding / 2, padding / 2], [size - padding / 2, size - padding / 2]]) .on("start", brushstarted) .on("brush", brushed) .on("end", brushended); cell.call(brush); let brushCell; // Clear the previously-active brush, if any. function brushstarted() { if (brushCell !== this) { d3.select(brushCell).call(brush.move, null); brushCell = this; } } // Highlight the selected circles. function brushed({selection}, [i, j]) { let selected = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; circle.classed("hidden", d => x0 > xes[i](d[columns[i]]) || x1 < xes[i](d[columns[i]]) || y0 > yes[j](d[columns[j]]) || y1 < yes[j](d[columns[j]])); selected = data.filter( d => x0 < xes[i](d[columns[i]]) && x1 > xes[i](d[columns[i]]) && y0 < yes[j](d[columns[j]]) && y1 > yes[j](d[columns[j]])); } svg.property("value", selected).dispatch("input"); } // If the brush is empty, select all circles. function brushended({selection}) { if (selection) return; svg.property("value", []).dispatch("input"); circle.classed("hidden", false); } }32:[{"id":"28c8b7ab7f2d246258115c1007c930550458d8c7218cc552883a9d298d2edbb968e6cf0341ecaf8aa2d076d96c92529feaefc317fa2df22100daac554f8a7c12","href":"https://static.observableusercontent.com/files/28c8b7ab7f2d246258115c1007c930550458d8c7218cc552883a9d298d2edbb968e6cf0341ecaf8aa2d076d96c92529feaefc317fa2df22100daac554f8a7c12","name":"iris@1.csv","type":"text/csv","lastModified":1662908377655.009,"size":3867}] 2c:{"id":"6847cb80321eca67","slug":"1-first-blood","title":"1.first blood","thumbnail":"0b7ea36e49509f7613f7f6da185dae2160944941d7ae27ac47233b17c087cced","access_level":"public","create_time":"$D2022-09-09T08:42:09.475Z","update_time":"$D2022-09-14T08:51:26.781Z","view_time":null,"first_public_time":"$D2022-09-13T15:50:18.545Z","has_unpublished_edits":null,"fork":{"id":"e48bf34c52588bc9","slug":"plot-scatterplot","title":"Plot Scatterplot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab1d68b6b99d1243","login":"2007040109","name":"2007040109","avatar_url":"https://avatars-next.observableusercontent.com/002f6a2c9f2876ebd5055bd623e1ff0ac083feed5a2884c67f8c70ab069b798a","tier":"starter_2024"},"version":1369,"publish_version":1369,"role":null,"authored":false,"authors":[{"type":"individual","id":"192080e33fc22031","login":"2007040109","name":"2007040109","avatar_url":"https://avatars-next.observableusercontent.com/002f6a2c9f2876ebd5055bd623e1ff0ac083feed5a2884c67f8c70ab069b798a","tier":null}],"members":[{"type":"individual","id":"192080e33fc22031","login":"2007040109","name":"2007040109","avatar_url":"https://avatars-next.observableusercontent.com/002f6a2c9f2876ebd5055bd623e1ff0ac083feed5a2884c67f8c70ab069b798a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"1.first blood","cells":[{"id":0,"value":"# 1.first blood\n对鸢尾花数据集的数据进行可视化，第一张图片以类型选择为选项绘制了五幅图:散点图(voronoi、hull)、柱状图、折线图、盒图、等高线图，并对每一个图进行了分析。分别进行了对同类型鸢尾花的纵向对比和不同类型鸢尾花的横向对比，得出了相应的结论。第二张散点图、第三张条形图通过对同类型图的不同表现方式进行对比，由于不同图的侧重点不同，得出了根据需求选择的结论。第四张散点图以多图联动的形式展示了各个属性间的关系，更加直观、简洁。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"导入鸢尾花数据集，有五个属性，分别为\"Sepal_Length\"、 \"Sepal_Width\"、\"Petal_Length\"、\"Petal_Width\"、\"Species\"。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":745,"value":"data = FileAttachment(\"iris@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"在散点图、折线图、等高图中，可以自定义x、y轴数据，而在柱状图中默认y为Frequency，可以对x自行选择；盒图中默认x为Species，可以对y自行选择。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"viewof y = Inputs.select([\"Sepal_Length\", \"Sepal_Width\",\"Petal_Length\",\"Petal_Width\"],{label: \"y：y轴数据\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof x = Inputs.select([\"Sepal_Length\", \"Sepal_Width\",\"Petal_Length\",\"Petal_Width\",\"Species\"],{label:\"x：x轴数据\",value:\"Sepal_Width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"我们可以自定义调整图形的透明度、点的大小、线宽、等高线域值等。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":281,"value":"viewof skew = Inputs.range([0,5], {step: 0.1, label: \"Size:线宽、点大小\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"viewof fillOpacity = Inputs.range([0,0.8], {step: 0.1, label: \"背景颜色透明度\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"viewof thresholds = Inputs.range([0,20], {step: 0.1, label: \"等高线域值\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"这里希望可以观察每个类型鸢尾花的不同属性之间的关系，因此在line类型图片中可以通过选择类别来展示数据。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":391,"value":"viewof species = Inputs.select([\"setosa\", \"versicolor\",\"virginica\"],{label:\"Species:需要展示的种类\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"type可以选择第一个图片的类型（2、3、4为固定类型的图片) \n注意：每幅图片上方为各自说明，随着类型的改变而改变。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1364,"value":"viewof types = Inputs.select(['dot', \"line\",\"density\",\"boxY\",\"bar\"],{label:md`type:图片类型`,value:\"dot\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"${result[0][types]}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"这里进行了散点图的绘制，与上述散点图的区别是这里的图可以用鼠标拖拽，可以根据我们的需求近距离观察数据。但是，没有了hull图与voronoi图的加持，即使根据类别进行数据颜色划分但是数据还是显得杂乱无章。因此，在今后的学习中，我们可以将多种图叠加使用以取得更好的效果。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":790,"value":"vl.markCircle()\n .data(data)\n .params(\n vl.selectInterval().bind('scales') \n )\n .encode(\n vl.x().fieldQ(x),\n vl.y().fieldQ(y),\n vl.color().field('Species'),\n vl.tooltip(['Sepal_Length','Sepal_Width','Petal_Length','Petal_Width', 'Species'])\n )\n .width(600)\n .height(450)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"本图与上述柱状图的数据展示相同，但是方式却不同。上图采用了覆盖的方法，本图采用的分立的放法。与上图（侧重于对比）相比，本图可以直观的看出每类数据集种具体的数据分布（侧重于展示），但是即使相同区间颜色相，在进行对比时却显得不直观了。因此，我们可以在进行数据分析时，可以根据自己的需求，选择相同图形的不同表现类型。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1063,"value":"间隔代表了在进行柱状图绘制时每组数据最大值与最小值之差，可以根据需求自定义选择。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":864,"value":"viewof rate = Inputs.range([0.2,1.2], {step: 0.1, label: \"间隔\",value:0.4})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"在本图中，鼠标经过可以选中柱，停留1s便会展示该柱的相关数据信息。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":881,"value":"key = Legend(chart.scales.color, {title: \"range\"}) // try also Swatches","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"chart = GroupedBarChart(data2, {\n x: d => d.Species,\n y: d => d.count,\n z: d => d.r,\n xDomain: d3.groupSort(data2, D => d3.sum(D, d => d.count), d => d.Species), \n yLabel: \"↑ count\",\n zDomain: range[0][di],\n colors: d3.schemeSpectral[range[0][di].length],\n width,\n height: 500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1335,"value":"在下面的散点图中，我们可以通过在图片中框选想要的点，在其他的关系图中会找到对应的点(源点),来探究一组数据的属性的相关数据。图片上显示了四个属性，对应着本行本列的属性名。以多图联动的形式进行数据展示，方便了用户直观比较。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1311,"value":"swatches({color:zes})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"names=[\"setosa\",\"versicolor\",\"virginica\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"data2=names.flatMap(s =>range[0][di].flatMap(r=> ({r,count: d3.sum(data,n => n.Species==s &&eval(\"n.\"+di) d.Sepal_Length)+rate, d3.max(data, d => d.Sepal_Length)+rate,rate).flatMap(num=>num.toFixed(2)),\n \"Sepal_Width\":d3.range(d3.min(data, d => d.Sepal_Width)+rate, d3.max(data, d => d.Sepal_Width)+rate,rate).flatMap(num=>num.toFixed(2)),\n \"Petal_Length\":d3.range(d3.min(data, d => d.Petal_Length)+rate, d3.max(data, d => d.Petal_Length)+rate, rate).flatMap(num=>num.toFixed(2)),\n \"Petal_Width\":d3.range(d3.min(data, d => d.Petal_Width)+rate, d3.max(data, d => d.Petal_Width)+rate, rate).flatMap(num=>num.toFixed(2))}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"class Dictionary {\n constructor(){\n this.items = {};\n }\n\n has(key) {\n return this.items.hasOwnProperty(key);\n }\n\n set(key, value) {\n this.items[key] = value;\n }\n\n remove(key) {\n if(this.has(key)){\n delete this.items[key];\n return true;\n }\n return false;\n }\n\n get(key) {\n return this.has(key)? this.items[key] : undefined;\n }\n\n keys() {\n return Object.keys(this.items);\n }\n\n values() {\n return Object.values(this.items);\n }\n\n clear() {\n this.items = {};\n }\n\n size() {\n return Object.keys(this.items).length;\n }\n\n getItems() {\n return this.items;\n }\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"dictionary = new Dictionary()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"dictionary.set('dot',Plot.dot)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"dictionary.set('line', Plot.line)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"dictionary.set('density', Plot.density)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"dictionary.set('boxY', Plot.boxY)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"s=dictionary.get(types)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"result=[{\"dot\":md`不同类型间鸢尾花数据对比：在散点图中借助hull图进行区域概括，使得数据更加便于观察。观察散点图我们可以发现，无论是哪两种属性，setosa类型的鸢尾花与其他类型鸢尾花距离较远，而无论是哪两种属性versicolor与virgincia类型的鸢尾花总会有部分数据重叠。另外，借助voronoi图发现，部分人眼可以认为的重叠区域由于数量的绝对优势并没有真正重叠，而部分确实有重叠。因此我们可以判断，在进行分类时，setosa类型的鸢尾花更加好判别，正确率可能较高，而其他类型的鸢尾花由于互相有影响不好判断。`,\"line\":md`同类型鸢尾花数据关系：观察折线图我们可以发现，每个类型的鸢尾花之间的属性并没有绝对的联系，并不会因为某一属性的增大而导致另一属性的增大，也不会因为某一属性的减小而导致另一属性的增大。因此，当进行分类由于不同类型间鸢尾花属性相似性导致的误差时，不能通过本类别的属性进行区分。`,\"density\":md`鸢尾花数据分散度分析：通过等高线我们可以看到，在相同域值形况下setosa类型的鸢尾花的等值线更加密集数据更加紧凑，相反virginca的等值线最为稀疏，数据分散性强，versicolor的分散性居于两者中间。因此根据散点图的推论和上述分析，我们可以判断virginca类型的鸢尾花，更容易被误判为versicolor类型的鸢尾花。`,\"boxY\":md`在盒图中，以不同的属性进行不同鸢尾花之间的数据对比。我们可以观察到三种类型鸢尾花Sepal属性间大小没有绝对的排序，在Petal属性间，无论是最大值、最小值、均值、Q1还是Q3排序均为virginia>versicolor>setosa。`,\"bar\":md`在柱状图中展示了每个类型各个属性各数据段的数量对比。我们可以观察到，无论是那种属性，virginica类型的鸢尾花跨度总是最大的，这也印证了在density中的结论，virginica类型鸢尾花数据分散度大。同时，我们可以观察到，黄色柱与红色柱在全部属性大范围重合，印证了散点图中的结论，virginica与versicolor数据重合度高。`}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"import {howto, altplot} from \"@d3/example-components\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"xes = columns.map(c => d3.scaleLinear()\n .domain(d3.extent(data, d => d[c]))\n .rangeRound([padding / 2, size - padding / 2]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"yes = xes.map(xs => xs.copy().range([size - padding / 2, padding / 2]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"zes = d3.scaleOrdinal()\n .domain(data.map(d => d.Species))\n .range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"z=[{\"Sepal_Length\":\"#ff7f0e\",\"Sepal_Width\":\"#ff7f0e\"}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"xAxis = {\n const axis = d3.axisBottom()\n .ticks(6)\n .tickSize(size * columns.length);\n return g => g.selectAll(\"g\").data(xes).join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * size},0)`)\n .each(function(d) { return d3.select(this).call(axis.scale(d)); })\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").attr(\"stroke\", \"#ddd\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"yAxis = {\n const axis = d3.axisLeft()\n .ticks(6)\n .tickSize(-size * columns.length);\n return g => g.selectAll(\"g\").data(yes).join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * size})`)\n .each(function(d) { return d3.select(this).call(axis.scale(d)); })\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").attr(\"stroke\", \"#ddd\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"columns = data.columns.filter(d => typeof data[0][d] === \"number\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"size = (width - (columns.length + 1) * padding) / columns.length + padding","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"padding=28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2d:"$2c:body"