Skip to content

Instantly share code, notes, and snippets.

@mxdvl

mxdvl/client.js

Created May 19, 2022 11:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mxdvl/e0dacdc963ebb451a5a6bb30b6532def to your computer and use it in GitHub Desktop.
Save mxdvl/e0dacdc963ebb451a5a6bb30b6532def to your computer and use it in GitHub Desktop.
Download ZIP
D3 & Deno
Raw
client.js
// @ts-check
import { scaleLinear } from "https://cdn.skypack.dev/d3-scale@4?dts";
import { select } from "https://cdn.skypack.dev/d3-selection@3?dts";
const button = document.querySelector("button");
const list = document.querySelector("ul");
const graph = select(document.querySelector("#graph"));
const [, , width, height] = graph.attr("viewBox").split(" ");
const handle_click = () => {
const item = document.createElement("li");
item.innerText = `Item ${list?.children.length}`;
console.log("clicked");
list?.appendChild(item);
};
button?.addEventListener("click", handle_click);
const data = [10, 25, 30, 35, 99, 100];
const xScale = scaleLinear([0, data.length], [0, width]);
const yScale = scaleLinear([0, ...data], [0, height]);
graph
.append("g")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (_, i) => xScale(i))
.attr("height", (_, i) => yScale(i))
.attr("width", "20");
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive page with Deno</title>
</head>
<body>
<h1>My super page</h1>
<button>click me</button>
<ul>
<li>Item 1</li>
</ul>
<svg id="graph" viewBox="0 0 600 200" width="600"></svg>
<script type="module" src="./client.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment