Two patterns working
Mike Lynch
parent
ba5c461baf
commit
3b8afdc41a
|
|
@ -1,10 +1,10 @@
|
|||
// calculate tiles
|
||||
|
||||
export function dots(m, n, max) {
|
||||
const ps = [];
|
||||
export function make_dots(m, n, cell, max) {
|
||||
if( m - n === 0 ) {
|
||||
return ps;
|
||||
return [];
|
||||
}
|
||||
const ps = [];
|
||||
const imin = -max;
|
||||
const imax = max / m;
|
||||
for( let i = imin; i <= imax; i++ ) {
|
||||
|
|
|
|||
130
src/index.md
130
src/index.md
|
|
@ -2,70 +2,82 @@
|
|||
toc: false
|
||||
---
|
||||
|
||||
<div class="hero">
|
||||
<h1>poptimal</h1>
|
||||
<h2>Welcome to your new app! Edit <code style="font-size: 90%;">src/index.md</code> to change this page.</h2>
|
||||
<a href="https://observablehq.com/framework/getting-started">Get started<span style="display: inline-block; margin-left: 0.25rem;">↗︎</span></a>
|
||||
</div>
|
||||
<h1>poptimal</h1>
|
||||
|
||||
<div class="grid grid-cols-2" style="grid-auto-rows: 504px;">
|
||||
<div class="card">${
|
||||
resize((width) => Plot.plot({
|
||||
title: "Your awesomeness over time 🚀",
|
||||
subtitle: "Up and to the right!",
|
||||
width,
|
||||
y: {grid: true, label: "Awesomeness"},
|
||||
marks: [
|
||||
Plot.ruleY([0]),
|
||||
Plot.lineY(aapl, {x: "Date", y: "Close", tip: true})
|
||||
]
|
||||
}))
|
||||
}</div>
|
||||
<div class="card">${
|
||||
resize((width) => Plot.plot({
|
||||
title: "How big are penguins, anyway? 🐧",
|
||||
width,
|
||||
grid: true,
|
||||
x: {label: "Body mass (g)"},
|
||||
y: {label: "Flipper length (mm)"},
|
||||
color: {legend: true},
|
||||
marks: [
|
||||
Plot.linearRegressionY(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species"}),
|
||||
Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species", tip: true})
|
||||
]
|
||||
}))
|
||||
}</div>
|
||||
</div>
|
||||
```js
|
||||
|
||||
---
|
||||
import {make_dots} from './components/dots.js'
|
||||
|
||||
## Next steps
|
||||
const CELL = 10;
|
||||
const WIDTH = 20;
|
||||
const HEIGHT = 20;
|
||||
|
||||
Here are some ideas of things you could try…
|
||||
const bg = view(Inputs.color({label: "background", value: d3.color("yellow").formatHex()}))
|
||||
const fg1 = view(Inputs.color({label: "fg1", value: d3.color("red").formatHex()}))
|
||||
const m1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"m1"}));
|
||||
const n1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"n1"}));
|
||||
|
||||
|
||||
const fg2 = view(Inputs.color({label: "fg2", value: d3.color("blue").formatHex()}))
|
||||
|
||||
const m2 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"m2"}));
|
||||
const n2 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"n2"}));
|
||||
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
|
||||
const dots1 = make_dots(1 / m1, n1, CELL, WIDTH)
|
||||
const dots2 = make_dots(1 / m2, n2, CELL, WIDTH)
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
|
||||
|
||||
const svg = d3.create("svg")
|
||||
.attr("width", WIDTH * CELL * 2)
|
||||
.attr("height", HEIGHT * CELL * 2)
|
||||
.attr("viewBox", [ 0, 0, WIDTH, HEIGHT ])
|
||||
.attr("style", "max-width: 100%; height: auto;");
|
||||
|
||||
const background = svg.append("rect")
|
||||
.attr("x", 0)
|
||||
.attr("y", 0)
|
||||
.attr("width", WIDTH * 20)
|
||||
.attr("height", WIDTH * 20)
|
||||
.attr("fill", bg);
|
||||
|
||||
const dots_g1 = svg.append("g")
|
||||
.attr("id", "dots1");
|
||||
|
||||
dots_g1.selectAll("circle")
|
||||
.data(dots1)
|
||||
.join("circle")
|
||||
.attr("r", 0.2)
|
||||
.attr("fill", fg1)
|
||||
.attr("cx", (d) => d.x)
|
||||
.attr("cy", (d) => d.y);
|
||||
|
||||
const dots_g2 = svg.append("g")
|
||||
.attr("id", "dots2");
|
||||
|
||||
dots_g2.selectAll("circle")
|
||||
.data(dots2)
|
||||
.join("circle")
|
||||
.attr("r", 0.2)
|
||||
.attr("fill", fg2)
|
||||
.attr("cx", (d) => d.x)
|
||||
.attr("cy", (d) => d.y);
|
||||
|
||||
|
||||
|
||||
display(svg.node());
|
||||
|
||||
|
||||
```
|
||||
|
||||
<div class="grid grid-cols-4">
|
||||
<div class="card">
|
||||
Chart your own data using <a href="https://observablehq.com/framework/lib/plot"><code>Plot</code></a> and <a href="https://observablehq.com/framework/files"><code>FileAttachment</code></a>. Make it responsive using <a href="https://observablehq.com/framework/javascript#resize(render)"><code>resize</code></a>.
|
||||
</div>
|
||||
<div class="card">
|
||||
Create a <a href="https://observablehq.com/framework/project-structure">new page</a> by adding a Markdown file (<code>whatever.md</code>) to the <code>src</code> folder.
|
||||
</div>
|
||||
<div class="card">
|
||||
Add a drop-down menu using <a href="https://observablehq.com/framework/inputs/select"><code>Inputs.select</code></a> and use it to filter the data shown in a chart.
|
||||
</div>
|
||||
<div class="card">
|
||||
Write a <a href="https://observablehq.com/framework/loaders">data loader</a> that queries a local database or API, generating a data snapshot on build.
|
||||
</div>
|
||||
<div class="card">
|
||||
Import a <a href="https://observablehq.com/framework/imports">recommended library</a> from npm, such as <a href="https://observablehq.com/framework/lib/leaflet">Leaflet</a>, <a href="https://observablehq.com/framework/lib/dot">GraphViz</a>, <a href="https://observablehq.com/framework/lib/tex">TeX</a>, or <a href="https://observablehq.com/framework/lib/duckdb">DuckDB</a>.
|
||||
</div>
|
||||
<div class="card">
|
||||
Ask for help, or share your work or ideas, on our <a href="https://github.com/observablehq/framework/discussions">GitHub discussions</a>.
|
||||
</div>
|
||||
<div class="card">
|
||||
Visit <a href="https://github.com/observablehq/framework">Framework on GitHub</a> and give us a star. Or file an issue if you’ve found a bug!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue