Skip to main content
Log in
M

Manousan

@Manousan·6 public vizzes

Loading thumbnail…

Lets draw a bar chart

This example demonstrates an interactive chart that can switch between bar, plot, line, area, map, and pie visualizations using a dropdown menu. The pie chart mode includes drill-down functionality, where hovering over a slice expands it and displays related gender breakdown data alongside a table. Using D3.js (v5) and d3-geo-projection, it processes CSV data such as salary information and dessert preferences, rendering with SVG and animated transitions. The tooltips, gradients, and drop-shadow filters enhance the visual feedback for user interactions.

Jul 21, 2020
Loading thumbnail…

Lets draw a bar chart

This example visualizes employee salaries as horizontal bars, using a simple CSV dataset with names and monthly pay. The chart maps salary values to bar widths with a linear scale and names to vertical bands using d3.scaleBand, with d3.selectAll and .enter().append() creating SVG rectangles. d3.csv loads the data asynchronously, and numeric conversion happens before rendering. The SVG canvas is fixed at 800 by 600 pixels, with no axes or labels shown.

Jun 2, 2020
Loading thumbnail…

Lets draw a fuzz face

This example renders a fuzz face as an SVG graphic, featuring a red circle with a black mouth, a nose, and two circular buttons labeled “Cranck the volume” and “Fuzz Fuzz Fuzz” along curved paths. It uses D3 v5’s `select` and `arc` to construct the mouth and text paths, with all elements grouped and transformed into the center of an 800×600 SVG. The code explicitly sets fill and stroke attributes, including a white Dallas Arbiter-style control, and relies on a React starter for bundling.

Jun 1, 2020
Loading thumbnail…

Lets draw a fuzz face

This example renders a fuzz face as an SVG graphic, featuring a red circle with a black mouth, a nose, and two circular buttons labeled “Cranck the volume” and “Fuzz Fuzz Fuzz” along curved paths. It uses D3 v5’s `select` and `arc` to construct the mouth and text paths, with all elements grouped and transformed into the center of an 800×600 SVG. The code explicitly sets fill and stroke attributes, including a white Dallas Arbiter-style control, and relies on a React starter for bundling.

Jun 1, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal D3.js visualization embedded in an HTML page, rendering a single red circle with a dark red stroke as a simple "smiley face." The code uses `d3.append` to create SVG elements within an `<svg>` tag, with styling controlled via CSS attributes like `fill` and `stroke-width`. The circle is added to a group (`gSmile`) using D3’s selection API, though the `transform` method call is incomplete. The page imports D3 v5 from a CDN and uses a React-compatible setup.

Jun 1, 2020
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page with a single blue circle rendered inside an SVG element. The circle is centered at coordinates (200, 200) with a radius of 50, and it has a red stroke with a 5-pixel width. The SVG uses a transform to translate the circle’s position down by 50 units. The body text is styled with a font size of 13em, demonstrating basic SVG and CSS styling within a plain HTML file. No external libraries are used; the visualization relies solely on native SVG elements.

Jun 1, 2020