🏃 ⚾ 🍕 𝄞 📈 🌠 π
stats = [
{ label: "A", value: 100 },
{ label: "B", value: 100 },
{ label: "C", value: 100 },
{ label: "D", value: 100 },
{ label: "E", value: 100 },
{ label: "F", value: 100 }
]
graph = {
// A resusable polygon graph component
return Vue.component("polygraph", {
props: ["stats"],
template: "#polygraph-template",
computed: {
// a computed property for the polygon's points
points: function() {
var total = this.stats.length;
return this.stats
.map(function(stat, i) {
var point = valueToPoint(stat.value, i, total);
return point.x + "," + point.y;
})
.join(" ");
}
},
components: subcomponents
});
}
polygraphTemplate = html`<!-- template for the polygraph component. -->
<script type="text/x-template" id="polygraph-template">
<g>
<polygon :points="points"></polygon>
<circle cx="100" cy="100" r="80"></circle>
<axis-label
v-for="(stat, index) in stats"
:stat="stat"
:index="index"
:total="stats.length">
</axis-label>
</g>
</script>`
axisLabelTemplate = html`<!-- template for the axis label component. -->
<script type="text/x-template" id="axis-label-template">
<text :x="point.x" :y="point.y">{{stat.label}}</text>
</script>`
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.
