Published
Edited
May 16, 2018
d3 = require("d3")
parseTime = d3.timeParse("%d-%b-%y")
data = d3.csv("https://rawgit.com/mbostock/6197fbf629d69d754904273978917e48/raw/aapl.csv", d => {return {date: parseTime(d.date), close: +d.close};
})
d3.extent(data, d => d.date)
width = 960
height = 500
margin = ({top: 20, right: 30, bottom: 30, left: 40})
x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
//Add scales
y = d3.scaleLinear()
.domain(d3.extent(data, d => d.close))
.range([height - margin.bottom, margin.top])
//Add SVG elemnt
{
var svg = DOM.svg(width, height);
return svg;
}
require("d3-geo", "d3-fetch")
topojson = require("topojson-client")
topology = d3.json("https://unpkg.com/world-atlas/world/110m.json")
mesh = topojson.mesh(topology)
projection = d3.geoOrthographic().rotate([angle, -20])
{
var canvas = this || DOM.canvas(width, height),
context = canvas.getContext("2d"),
path = d3.geoPath(projection, context);
context.clearRect(0, 0, width, height);
context.beginPath(), path(mesh), context.lineWidth = 1, context.stroke();
context.beginPath(), path({type: "Sphere"}), context.lineWidth = 2, context.stroke();
return canvas;
}
viewof angle = DOM.range(-180, 180, 1)
viewof color = {
var form = DOM.html`<form><table>
<tr><td>hue</td><td>
<input name=inputH type=range min=0 max=359 value=180 step=1>
<output name=outputH></output>˚
</td></tr>
<tr><td>saturation</td><td>
<input name=inputS type=range min=0 max=2 value=1 step=0.01>
<output name=outputS></output>
</td></tr>
<tr><td>lightness</td><td>
<input name=inputL type=range min=0 max=1 value=0.5 step=0.01>
<output name=outputL></output>
</td></tr>
</form>`;
form.oninput = () => form.value = d3.cubehelix(
form.outputH.value = form.inputH.value,
form.outputS.value = form.inputS.value,
form.outputL.value = form.inputL.value
);
form.oninput(); // Set the initial value.
return form;
}
Cubehelix {h: 180, s: 1, l: 0.5, opacity: 1}
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.
