Published
Edited
Oct 4, 2019
1 star
test = "asd"
test
`what is ${test}`
viewof r = html`<input type=range min=1 max=10 step=any>`
viewof color_category = html`<select>
<option>schemeCategory10
<option>schemeTableau10
<option>schemeAccent
<option>schemeDark2
<option>schemePaired
<option>schemePastel1
<option>schemeSet1
<option>schemeSet2
</select>`
chart = {
const height = 600;
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.join("line")
.attr("stroke-width", d => Math.sqrt(d.value));
const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", r)
.attr("fill", color)
.call(drag(simulation));
node.append("title")
.text(d => d.id);
simulation.on("tick", () => {
link.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
invalidation.then(() => simulation.stop());
return svg.node();
}
d3 = require("d3@5");
color = {
const scale = d3.scaleOrdinal(d3[color_category]);
return d => scale(d.group);
}
drag = simulation => {
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
data = d3.json("https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json")
html`<div id="container"></div>`
Highcharts = require('https://bundle.run/highcharts@7.0.2')
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
})
html`
<div style="overflow: hidden;background-color:rgb(240, 225, 210)" name="myDiv" id="myDiv">
</div>
`
plt = require("https://cdn.plot.ly/plotly-latest.min.js")
fetch("https://gist.githubusercontent.com/semljola/bc77ac93e2b5269ffc4579150f3db1fd/raw/fa1d8d226e4e6a92ca5c71bbebe39a4f1e64beba/skillz.json")
.then(function(response) {
return response.json();
})
.then(function(json) {
var skillCount = json.skills.map(d=>d.count);
var skillName = json.skills.map(d=>d.name);
var skillCategory = json.skills.map(d=>d.category);
var data = [
{
"type": "sunburst",
"labels": skillName,
"parents": skillCategory,
"values": skillCount,
"leaf": {"opacity": 0.4},
"marker": {"line": {"width": 2}},
"branchvalues": 'relative'
}];
var layout = {
margin: {"l": 0, "r": 0, "b": 0, "t": 0},
paper_bgcolor: "rgb(240, 225, 210)",
plot_bgcolor: "rgb(240, 225, 210)",
width:750,
height:750,
};
plt.newPlot('myDiv', data, layout, {showSendToCloud: true});
});
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.
