kau91

@kau91·6 public vizzes

Untitled

This example loads a small CSV dataset of national populations and converts the population column from strings to numbers, multiplying each value by 1000. It then logs the number of data rows to the browser console via a render function. The visualization uses D3 v5’s `csv` method for asynchronous data loading and does not render any graphical output beyond this console message, serving as a minimal demo of data parsing and callback handling in the VizHub environment.

Jun 19, 2019

Loading thumbnail…

Bar Graph with D3.js!

This bar graph displays population counts for nine countries, using horizontal bars scaled linearly from zero to the maximum value. The visualization loads data from a CSV file and renders with D3 v5, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Each country’s population is multiplied by 1,000, and the SVG rectangles are appended directly without axes or labels.

Jun 19, 2019

Loading thumbnail…

Movements/Actions

This example demonstrates interactive SVG animations for exploring user-driven movements and actions. Users can click and hover over rectangular elements to trigger color changes and animated transitions, such as moving a rectangle across the canvas or modifying bar heights and positions. The visualization uses D3 v5 with transitions, event handling, and a JSON data file containing country rankings over time. The code employs `d3.transition`, `d3.easeLinear`, and D3's data-binding methods to update elements dynamically.

Jun 19, 2019

Loading thumbnail…

Shapes with Svg, Css

This example demonstrates how SVG shapes can be styled and transformed using both SVG attributes and CSS. It shows circles, rectangles, lines, and paths arranged in a 960x500 viewport, with nested `<g>` elements applying scaling, translation, fill colors, and stroke properties. The code uses raw SVG markup in HTML without D3.js API calls, though an unused import statement references d3's `select` function. The rendering relies solely on the browser's native SVG support, with the `styles.css` file defining additional class-based styling and page layout.

Jun 16, 2019

Loading thumbnail…

Hello VizHub

This example displays two text messages on a dark, centered page using D3.js and a custom ES6 module. The first message, “Hello VizHub!”, is rendered via D3’s `select` and `.text` methods into a `div`, while a second message, “Hello Bitch”, is set directly through the DOM API `getElementByID` into a `pre` element. The page uses the `d3.v5` library and imports the message constant from `myMessage.js`. Styling employs the Ubuntu font and a large font size, with no interactive or data-driven behavior.

Jun 16, 2019

Loading thumbnail…

Hello VizHub

This example displays the text “Hello VizHub!” on a dark blue background, using a large, light-colored Ubuntu font. It demonstrates the basic structure of a VizHub project, including an HTML page, a CSS stylesheet, and JavaScript modules. The visualization employs D3.js v5, specifically using the `select` function to target the HTML element and set its text content, while also showcasing the use of ES6 modules for organizing code.

Jun 16, 2019