Gulrez

@Gulrez·6 public vizzes

Sequences sunburst

This sunburst chart visualizes the hierarchical distribution of user navigation sequences on a metagenomics site, showing the proportion of each path from the root. Hovering over a segment highlights its ancestor chain and displays a breadcrumb trail with the exact percentage of total visits. The code uses `d3.partition` and `d3.arc` to compute and draw the arcs, while `d3.hierarchy` and `d3.csvParseRows` process the input data. Mouseover events trigger opacity transitions and breadcrumb updates, with colors mapped to distinct step names.

Nov 2, 2018

Loading thumbnail…

Make a Bar Chart

This example shows a bar chart of population data for ten countries using D3 v5. The chart uses a linear scale for population and a band scale for country names, with the Y axis labeling each country. The SVG rendering is built using `select`, `csv`, `scaleLinear`, `scaleBand`, and `axisLeft` APIs, with bars styled using `fill` set to steelblue. Data is loaded from `data.csv` and population values are multiplied by 1000.

Oct 31, 2018

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, animated eyebrows, and a smiling arc mouth is drawn in SVG using D3 v5. The example demonstrates basic shapes and transitions, with the eyebrows moving up and down in a looping animation via chained `transition` calls. Code imports `select` and `arc` from D3, uses SVG attributes like `cx`, `r`, and `path` with an `arc` generator, and positions elements relative to the SVG center. Static eye circles and a mouth path complete the composition.

Oct 31, 2018

Loading thumbnail…

Shapes with SVG and CSS

This example uses SVG elements and CSS to draw basic shapes on a web page. It shows a circle, a rectangle, a line, and a path, all placed directly within an SVG element with a fixed width and height. The rendering approach uses raw SVG markup without any JavaScript libraries like D3, relying on presentational attributes such as `stroke`, `stroke-width`, and `fill` to style the shapes. The CSS file sets the body margin and hides overflow, while a `.highlighted` class defines a red color rule that is not applied in the current markup.

Oct 31, 2018

Loading thumbnail…

HTML Cars Report

This example shows a static list of three car entries, with the first item’s text highlighted in red via a CSS class. The data is hardcoded in the HTML, and the visualization relies solely on plain HTML markup with an external stylesheet for presentation. The rendering uses no JavaScript libraries or charting APIs; it is a simple DOM list styled with basic CSS properties (`font-size`, `font-family`, and `color`). The page’s monospaced, large-text layout emphasizes the raw data values rather than any graphical encoding.

Oct 31, 2018

Loading thumbnail…

Hello VizHub

This example demonstrates the foundational structure of a VizHub visualization, displaying a static "Hello VizHub!" message prominently centered on the page. It shows how a simple D3.js project is organized with separate HTML, JavaScript, and CSS files, using ES6 module imports to share code between files. The code uses the D3 `select` function from d3.v5 to target the `#message` div and set its text content to the exported string from `myMessage.js`. The styling relies on an external Google Fonts import and a dark background, with the message rendered in a large, light-colored Ubuntu typeface.

Oct 31, 2018