Public
Edited
Aug 17, 2023
Mock ROI Vendor Eval Vendors - VendorInfo.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
mockRoiVendorEvalVendorsVendorinfo
X
Market Penetration Score
Y
Strength of Offering Score
Color
#4775de
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
mockRoiVendorEvalVendorsVendorinfo[0]["Market Penetration Score"]
x = d3.scaleLinear()
.domain([0, d3.max(mockRoiVendorEvalVendorsVendorinfo, d => d["Market Penetration Score"])])
.range([margin.left, ax_width - margin.right])
.interpolate(d3.interpolateRound)
y = d3.scaleLinear()
.domain([0, d3.max(mockRoiVendorEvalVendorsVendorinfo, d => d["Strength of Offering Score"])])
.range([margin.top, ax_height - margin.bottom])
.interpolate(d3.interpolateRound)
ax_width = 640
ax_height = 202
htl.html`<svg viewBox="0 0 ${ax_width} 33" style="max-width: ${ax_width}px; font: 10px sans-serif; display: block;">
<rect fill="steelblue" x="${x(0)}" width="${x("Market Penetration Score") - x(0)}" height="2"></rect>
<rect fill="white" text-anchor="end" x="${x("Market Penetration Score")}" dx="-6" dy="21">${"Market Penetration Score"}</text>
</svg>`
margin = ({top: 20, right: 0, bottom: 0, left: 30})
import {Legend} from "@d3/color-legend"
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.
