UW INFO474 January 11, 2022

jan-eleven.jsx

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

*/