McZieuwa

@McZieuwa·3 public vizzes

fresh block

A simple bar chart displays six hardcoded values as blue vertical bars on a 900 by 900 SVG canvas. Each bar’s height corresponds to its data value, while the `x` position is determined by an index multiplied by a fixed width. The visualization uses D3 v4’s selection and attribute methods to append rectangles and set their positions, dimensions, fill, and stroke. The data set is a static array, not loaded from an external source.

Dec 18, 2017

Loading thumbnail…

fresh block

This example displays a blank SVG canvas with a single line of instructional text, “Edit the code below to change me!”, positioned at coordinates (120, 200) in a monospace font. The code creates an SVG element using d3.select and appends a text element, setting its attributes for size, position, and font family. It relies on D3.js v4, loaded via a CDN, and renders entirely through SVG within a fixed full-viewport body. The visualization serves as a minimal starting template for user modification.

Dec 18, 2017

Loading thumbnail…

React-router v4 multi layout

This example shows how to build a multi-layout React-router v4 application, assigning different page layouts based on the current route. It defines route wrapper components, `DashboardRoute` and `LoginLayoutRoute`, that wrap their page components inside layout containers using the `render` prop of `Route`. The `BrowserRouter` and `Switch` components manage navigation, while a `Redirect` at the root path sends users to the login page. It uses the `react-router-dom` library to conditionally render a sidebar-based dashboard layout or a minimal login layout.

May 28, 2017