Created
May 19, 2022 11:14
-
-
Save mxdvl/e0dacdc963ebb451a5a6bb30b6532def to your computer and use it in GitHub Desktop.
D3 & Deno
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // @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"); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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