data = [{start: 49, end: 54, current: 58, id: 1}, {start: 50, end: 83, current: 89, id: 2}, {start: 30, end: 90, current: 58, id: 3}]
plan = 80
planCurrent = 60
Plot.plot({
marginTop: 40,
height: 200,
// width: 380,
// marginRight: 16,
// marginLeft: 16,
x: {
domain: [0,100],
grid: true,
tickFormat: (d) => d+ "%"
},
y: {
axis: null,
},
color: {
range: ["rgba(0,0,0,.25)", "#EE4444"],
legend: true,
label: "asad"
},
symbol: {
legend: true,
},
marks: [
patterns,
// Plot.barX(data, {x1: 0, x2: 100, y: "id", fill: "rgba(0,0,0,.05)", insetTop: 4, insetBottom: 4}),
// Plot.barX(data, {x1: 0, x2: "start", y: "id", fill: "rgba(0,0,0,.05)", insetTop: 4, insetBottom: 4}),
Plot.barX(data, {x1: "start", x2: "end", y: "id", fill: d => "Прогноз выполнения плана", insetTop: 4, insetBottom: 4}),
Plot.barX(data, {x1: "end", x2: plan, y: "id", fill: d => "Прогноз невыполнения", label: "dwd", opacity: 0, insetTop: 4, insetBottom: 4}),
Plot.barX(data, {x1: "end", x2: plan, y: "id", fill: "url(#sequential-12519027-2)", label: "dwd", opacity: d => d.end > plan ? 0 : 1, insetTop: 4, insetBottom: 4}),
Plot.dotX(data, {x: "current", y: "id", symbol: d => "Текущее значение (на 18.02.2022)"}),
Plot.tickX([plan]),
Plot.tickX([planCurrent]),
Plot.text([{x: planCurrent, y: 1, text: "План на"}], {x: "x", y: "y", text: "text", dy: -52}),
Plot.text([{x: planCurrent, y: 1, text: "18.02.2022"}], {x: "x", y: "y", text: "text", dy: -40}),
Plot.text([{x: plan, y: 1, text: "План на"}], {x: "x", y: "y", text: "text", dy: -52}),
Plot.text([{x: plan, y: 1, text: "02.03.2022"}], {x: "x", y: "y", text: "text", dy: -40})
]
})
import {sequential12519027} from "@tomshanley/cheysson-color-palettes"
patterns = () => svg`<defs>
<pattern id="sequential-12519027-2" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse" patternTransform="translate(-81.41 -58.86)">
<rect fill="none" width="100" height="100"></rect>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="46.97" y1="-53.03" x2="153.03" y2="53.03"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="40.72" y1="-46.78" x2="146.78" y2="59.28"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="34.47" y1="-40.53" x2="140.53" y2="65.53"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="28.22" y1="-34.28" x2="134.28" y2="71.78"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="21.97" y1="-28.03" x2="128.03" y2="78.03"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="15.72" y1="-21.78" x2="121.78" y2="84.28"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="9.47" y1="-15.53" x2="115.53" y2="90.53"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="3.22" y1="-9.28" x2="109.28" y2="96.78"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="-3.03" y1="-3.03" x2="103.03" y2="103.03"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="-9.28" y1="3.22" x2="96.78" y2="109.28"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="-15.53" y1="9.47" x2="90.53" y2="115.53"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="-21.78" y1="15.72" x2="84.28" y2="121.78"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="-28.03" y1="21.97" x2="78.03" y2="128.03"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="-34.28" y1="28.22" x2="71.78" y2="134.28"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="-40.53" y1="34.47" x2="65.53" y2="140.53"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="-46.78" y1="40.72" x2="59.28" y2="146.78"></line>
<line style="stroke:#EE4444;stroke-miterlimit:10;stroke-width:1.5px;" x1="-53.03" y1="46.97" x2="53.03" y2="153.03"></line>
</pattern>
</defs>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
