Skip to content

Instantly share code, notes, and snippets.

@colinmegill
Created January 12, 2022 06:32
Show Gist options
  • Save colinmegill/c8e3c9865ee2a0a7f427f651d5ad4736 to your computer and use it in GitHub Desktop.
Save colinmegill/c8e3c9865ee2a0a7f427f651d5ad4736 to your computer and use it in GitHub Desktop.
UW INFO474 January 11, 2022
import { scaleLinear, scaleBand, extent, line } from "d3";
import { useState } from "react";
import logo from "./logo.svg";
function App() {
const [count, setCount] = useState(0);
const user = { name: "Colin", city: "Seattle" };
const circleScale = scaleLinear().domain([10, 350]).range([275, 300]);
return (
<div className="App">
<h1>hello world!</h1>
<p>{false ? "foo" : "bar"}</p>
<svg width="500" height="500" style={{ border: "1px solid pink" }}>
<line
x1={50}
y1={50}
x2={200}
y2={200}
stroke="black"
strokeWidth={2}
/>
{[10, 100, 250, 350].map((d) => {
return (
<circle cx={circleScale(d)} cy={circleScale(d)} r="2" fill="red" />
);
})}
<text x="120" y="100" style={{ fontSize: 10, fontFamily: "Georgia" }}>
It's a line! :)
</text>
</svg>
</div>
);
}
export default App;
/*
json: javascript object notation
.js "normal" javascript file
.jsx react based format for defining components, a function that returns markup
these will only appear if you've run the react-ts vite generator
.ts "normal" javascript file, except typescript
.tsx is a .jsx file, but in typescript
*/
@colinmegill
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment