anishde1

@anishde1·4 public vizzes

Create a face with D3

This example generates a cartoon face using D3.js, with randomized position and size for the head, eyes, eyebrows, and a smiling mouth. The face is rendered as SVG elements, including circles for the eyes and head, rectangles for eyebrows, and an arc-generated path for the mouth. The code uses D3 v5 selections and the `arc` function to construct the smile, showcasing how basic geometric shapes can be combined dynamically.

Dec 11, 2019

Loading thumbnail…

Shapes withe SVG and HTML

This example demonstrates how CSS and HTML can be used to create large, colorful shapes on a dark blue background. The page displays a single, oversized number "0" rendered in bold Ubuntu type, centered horizontally with a warm off-white color. The code uses plain HTML body content styled entirely through an external stylesheet, which imports the Ubuntu font from Google Fonts and sets the background, text alignment, font size, and family. No JavaScript or data visualization libraries are involved.

Dec 11, 2019

Loading thumbnail…

D3 introduction - createing faces

This example demonstrates the visual and typographic output of a D3.js project by rendering the phrase “VizHub” in massive, bold text on a dark blue background. The page relies entirely on the loaded stylesheets to style the text, with no JavaScript or data manipulation present in the code. It uses the Google Fonts API to import the Ubuntu typeface, and a CSS rule sets the font size, color, and centered alignment. The visualization showcases a minimal, static composition, highlighting the rendering of text through standard HTML and CSS without additional interactive or data-driven elements.

Dec 11, 2019

Loading thumbnail…

Making a bar chart

This example demonstrates how to create a bar chart showing population data for countries worldwide. The visualization uses D3.js v5 with SVG rendering, employing d3.scaleLinear for the x-axis population scale and d3.scaleBand for the y-axis country categories. The code loads data from a CSV file, multiplies population values by 1000, and renders colored bars using the d3.axisLeft component to display country labels.

Oct 31, 2019