prudhvirajmudunuri

@prudhvirajmudunuri·6 public vizzes

Let's make a face with D3.js

A stylized yellow face drawn with SVG shapes animates its eyebrows and mouth. D3.js v5 constructs the face from circles, rectangles, and an arc-based path, grouping elements with `svg.append` and positioning them via `attr` transforms. The eyebrows move up and down through chained `transition().duration()` calls, while the mouth morphs from a frown to a wide open smile by swapping the `d` attribute computed with `d3.arc()`. All geometry derives from hardcoded constants in the script.

Jul 2, 2019

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking API endpoints by hit count, with values from a CSV file rendered as steel-blue rectangles. The chart is built using D3 v5, with `d3.csv` loading the data and `d3.scaleLinear` and `d3.scaleBand` positioning the bars. Axis labels are generated via `d3.axisLeft` and `d3.axisBottom`, and the SVG output is styled with CSS. The bars extend horizontally from the left margin, and the chart uses a fixed 960×500 pixel canvas.

Jul 2, 2019

Loading thumbnail…

Mysterious VizHub Error Debug Helper

This example shows a simplistic bar chart where each bar is rendered as a colored rectangle filling the full width of the SVG canvas, with the vertical position determined by a band scale mapping array indices to y-coordinates. The code uses d3.csv to load the data file, d3.scaleBand for layout, and d3.scaleLinear to map index values (0, 1, 2) to red, green, and blue colors. However, the data processing contains a bug: it attempts to assign the undefined variable `hits` to each numeric field, and the rendering function is called twice—once with the loaded array and once with a hardcoded [0, 1, 2]—producing overlapping rectangles. The SVG output is fixed at 960 by 500 pixels, with no axes or labels defined.

Jul 2, 2019

Loading thumbnail…

Customizing

This example shows a horizontal bar chart of API hit counts, with bars sorted by API name and labeled on a logarithmic-style axis that formats large numbers with abbreviations. The visualization uses D3 v5 and SVG rendering, with d3.csv loading data from a local CSV file and d3.scaleBand and d3.scaleLinear mapping the categorical and numeric values. Customization is achieved through d3.axisBottom with a tick format function, while CSS styles define bar color, tick text size, and axis labels, including a title and custom axis label.

Jul 2, 2019

Loading thumbnail…

Let's make a face with D3.js!

A static SVG smiley face is drawn with D3.js using primitive shapes: circles for the face and eyes, rectangles for the eyebrows, and an arc for the mouth. The example demonstrates DOM manipulation and chained transitions, as the code applies a two-second `transition().duration(2000)` to animate the eyebrows moving up and then back down. All elements are positioned relative to the SVG center via a `g` transform, showing fundamental D3 selection and attribute methods.

Jul 2, 2019

Loading thumbnail…

Cars reprot

This example displays a minimal web page that greets the user with the message "Hello prudhvi" in large text on a dark blue background. The page uses a plain HTML structure with a `<pre>` element, JavaScript to set the text content, and CSS for styling with the Ubuntu font. The code relies on basic DOM manipulation via `document.getElementById` to update the message, and it imports a separate ES6 module that exports a message string, though only the main script’s message is displayed. The rendering is static, with no data source or dynamic visualization.

Jul 2, 2019