Anish Shetty

@anish610·4 public vizzes

Making a Bar chart

This example builds a bar chart from a CSV file of country populations using D3 v5. It loads the data with `d3.csv`, converts population values to numbers, and creates rectangles via `svg.selectAll('rect').data().enter().append('rect')`. The scale is defined with `scaleLinear`, mapping the maximum population to the SVG width. Though the chart is incomplete—bars have fixed dimensions and no axes—it demonstrates the basic data-binding and scaling pattern for bar charts with SVG rendering.

Nov 5, 2019

Loading thumbnail…

HTML Cars Reprot

This example uses D3 v5 to draw a simple, static emoji-like face on a yellow circular background. The visualization renders an SVG scene directly in the browser, constructing the face from two black circles for the eyes and a semicircular mouth path. The code imports the `select` and `arc` APIs from D3 to position shapes relative to the SVG’s dimensions and to generate the mouth’s path data. No external data source is involved; the layout is computed procedurally, with explicit control over shape attributes like radius, fill, and stroke.

Nov 4, 2019

Loading thumbnail…

HTML Cars Reprot

This example shows a minimal SVG scene with two colored circles—one red, one green—placed against a plain background, along with a short black line segment. It demonstrates basic static SVG rendering in an HTML page, using native `<svg>`, `<circle>`, and `<line>` elements without additional libraries. The source code includes a separate stylesheet that removes the body margin and hides overflow, while the drawing itself is fixed at 960 by 500 pixels. No interactive behavior or data binding is present; the visualization simply presents geometric shapes with hardcoded positions and fills.

Nov 4, 2019

Loading thumbnail…

Cars

This example displays a single car make, "sonoo," in large, glowing text against a dark starry background. The page fetches JSON data from a `cars` dataset, parses it with `JSON.parse`, and extracts the first record’s `make` property to update the DOM. Styled with an Ubuntu font and a deep blue theme, the visualization uses plain JavaScript and ES6 modules, with the message injected into a `<pre>` element via `textContent`.

Nov 4, 2019