components/Wordcloud.tsx

@@ -29,12 +29,6 @@ function getWords(): WordData[] {
   }));
 }
 
-function getRotationDegree() {
-  const rand = Math.random();
-  const degree = rand > 0.5 ? 60 : -60;
-  return rand * degree;
-}
-
 const words = [...getWords(), ...getWords()];
 
 const fontScale = scaleLog({
@@ -42,22 +36,17 @@ const fontScale = scaleLog({
     Math.min(...words.map((w) => w.value)),
     Math.max(...words.map((w) => w.value)),
   ],
-  range: [10, 100],
+  range: [30, 100],
 });
 const fontSizeSetter = (datum: WordData) => fontScale(datum.value);
 
 const fixedValueGenerator = () => 0.5;
 
-type SpiralType = "archimedean" | "rectangular";
-
 export default function Wordcloud({
   width,
   height,
   showControls,
 }: ExampleProps) {
-  const [spiralType, setSpiralType] = useState<SpiralType>("rectangular");
-  const [withRotation, setWithRotation] = useState(false);
-
   return (
     <div className="wordcloud">
       <VisxWordcloud
@@ -65,9 +54,9 @@ export default function Wordcloud({
         width={width}
         height={height}
         fontSize={fontSizeSetter}
-        font="Inconsolata"
+        font="Inconsolata, monospace"
         padding={30}
-        spiral={spiralType}
+        spiral={"rectangular"}
         rotate={0}
         random={fixedValueGenerator}
       >
@@ -89,34 +78,7 @@ export default function Wordcloud({
           })
         }
       </VisxWordcloud>
-      {showControls && (
-        <div>
-          <label>
-            Spiral type &nbsp;
-            <select
-              onChange={(e) => setSpiralType(e.target.value as SpiralType)}
-              value={spiralType}
-            >
-              <option key={"archimedean"} value={"archimedean"}>
-                archimedean
-              </option>
-              <option key={"rectangular"} value={"rectangular"}>
-                rectangular
-              </option>
-            </select>
-          </label>
-          <label>
-            With rotation &nbsp;
-            <input
-              type="checkbox"
-              checked={withRotation}
-              onChange={() => setWithRotation(!withRotation)}
-            />
-          </label>
-          <br />
-        </div>
-      )}
-      <style jsx>{`
+      {/* <style jsx>{`
         .wordcloud {
           display: flex;
           flex-direction: column;
@@ -136,7 +98,7 @@ export default function Wordcloud({
         .wordcloud textarea {
           min-height: 100px;
         }
-      `}</style>
+      `}</style> */}
     </div>
   );
 }

pages/playground.tsx

@@ -6,7 +6,7 @@ import { ColorPalette } from "../components/ColorPalette";
 
 export default function Home() {
   return (
-    <div style={{ padding: "20px" }}>
+    <div style={{ padding: "0px" }}>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
       <ColorPalette />