Kumhee

@kchoy3·8 public vizzes

Cheap tricks interactions _ example!

This example displays an interactive world map using a natural Earth projection, with countries rendered as SVG paths and colored light green. The visualization supports zooming and panning via d3.zoom, and hovering over a country highlights it in red. It loads geographic data from the world-atlas TopoJSON and TSV files, merging country names via a reduce operation. The code uses d3.geoPath, d3.geoNaturalEarth1, and topojson.feature to project and draw the map.

Sep 26, 2020

Loading thumbnail…

Cheap tricks interactions _ example

This example displays a world map using D3 version 5.6 with countries filled in light green. When the mouse hovers over a country, the map updates that country's fill color to red, while a blue sphere in the background represents the globe. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` projection, with country data loaded from the World Atlas TopoJSON source. Styling relies on CSS `:hover` states applied to SVG paths.

Sep 26, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This example displays a world map using a natural Earth projection with countries filled in light green and oceans in blue. It uses the D3 library’s geoPath and geoNaturalEarth1 projection to render the map, and TopoJSON’s feature function to convert geographic data from world-atlas TSV and JSON files. The interaction is a simple hover effect that turns countries red when the mouse passes over them, demonstrating a "cheap trick" for user feedback.

Sep 25, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map rendered with D3 v5, using Natural Earth projection and TopoJSON data. Users can pan and zoom the map via d3.zoom. Hovering over a country turns it red, with country names available as tooltips via SVG `<title>` elements. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.event for interactions.

Sep 25, 2020

Loading thumbnail…

HTML Starter

This example shows the minimal setup for an HTML page using React, displaying the text “Hello HTML” at a very large font size in the browser. The page includes a script that initializes an array of numbers and uses d3.selectAll to select all circle elements, then calls data(myData) on that selection and logs the result to the console. The rendering is plain HTML and CSS, with no data visualization visible, and relies on the index.js file for any client-side logic.

Sep 13, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic SVG shapes—circles, rectangles, lines, and paths—using React and CSS styling. It shows both default black shapes and colored variants, with a specific group (`g`) applying a cyan fill and black stroke, while a `.lines` class adds thick green strokes with rounded line joins. The SVG canvas uses a scale transformation and translation to position elements. Styling is handled entirely through the linked `styles.css` file, with no JavaScript data manipulation, as the example relies solely on static markup.

Sep 12, 2020

Loading thumbnail…

Car report

This example displays the make of the first car from a static JSON dataset, rendered as large text on a web page. It uses React and plain JavaScript to parse the data with `JSON.parse` and update the DOM via `document.getElementById` and the `textContent` property. The visualization is minimal, showing only a single string value centered on the page, with no charts or interactive elements. The data source is an embedded array in `cars.js`, and the styling is handled through a simple CSS rule in `index.html`.

Sep 11, 2020

Loading thumbnail…

HTML Starter

This example displays a large, centered HTML greeting message using plain HTML and CSS, with the text "Hello :) HTML" styled at an oversized font size. The page includes a script that logs "Hello JavaScript!" to the browser’s developer console upon loading. It uses no external libraries or data sources, relying solely on the native DOM and inline `<style>` and `<script>` elements. The rendering approach is basic static HTML, demonstrating a minimal setup for a web page.

Sep 9, 2020