Skip to main content
Log in
S

ShashankC22

@ShashankC22·8 public vizzes

Loading thumbnail…

Making a Bar Chart

This example demonstrates a basic bar chart of country populations, loading data from a CSV file and rendering rectangles into an SVG container. The code uses d3.csv to parse the data, d3.scaleLinear for the x-axis scale, and d3.max to compute the domain. Although the bars are initially appended with fixed widths and heights, the x-scale is correctly configured to map population values to the full SVG width. The chart uses d3 v5 and follows a simple data-join pattern with selection.enter().

Jul 14, 2020
Loading thumbnail…

Lets make a face with D3.js!

A face built from SVG primitives appears on a yellow circle, with eyes, animated eyebrows, and an arc-based mouth. The example demonstrates reusable D3.js shape generators and selections, using `select`, `arc`, and chained `transition.attr` calls to move the eyebrows over two seconds. Static elements like circles and rectangles are positioned with absolute coordinates, while the mouth uses an arc with specified inner and outer radii and angle range. The visualization shows how D3 v5 manipulates SVG attributes directly through method chaining.

Jul 14, 2020
Loading thumbnail…

Lets make a face with D3.js!

A face built from SVG primitives appears on a yellow circle, with eyes, animated eyebrows, and an arc-based mouth. The example demonstrates reusable D3.js shape generators and selections, using `select`, `arc`, and chained `transition.attr` calls to move the eyebrows over two seconds. Static elements like circles and rectangles are positioned with absolute coordinates, while the mouth uses an arc with specified inner and outer radii and angle range. The visualization shows how D3 v5 manipulates SVG attributes directly through method chaining.

Jul 14, 2020
Loading thumbnail…

Lets make a face with D3.js!

A face built from SVG primitives appears on a yellow circle, with eyes, animated eyebrows, and an arc-based mouth. The example demonstrates reusable D3.js shape generators and selections, using `select`, `arc`, and chained `transition.attr` calls to move the eyebrows over two seconds. Static elements like circles and rectangles are positioned with absolute coordinates, while the mouth uses an arc with specified inner and outer radii and angle range. The visualization shows how D3 v5 manipulates SVG attributes directly through method chaining.

Jul 14, 2020
Loading thumbnail…

Cars Report

This example demonstrates a text-based report of car listings, filtering results to show only vehicles priced under $2,000 and formatting each entry as a year, make, model, and price line. The page initially displays a “Loading...” message, then uses a Promise from `getCars` to simulate a two-second delay before rendering the filtered data. The report is generated with `generateReport` and `formatCar` modules, which use JavaScript array methods (`filter`, `map`, `join`) on data parsed from an embedded JSON string.

Jul 13, 2020
Loading thumbnail…

Cars Report

This example demonstrates a simple car report by displaying the make of the first car in a dataset. It shows how to store car information, including year, make, model, and price, as a JSON string parsed into a JavaScript array using `JSON.parse`. The page renders the selected data point as text content in an HTML `<pre>` element, updated via the Document Object Model’s `textContent` property. The code imports the parsed `cars` array from a module and accesses its first entry to output “Honda” on screen.

Jul 13, 2020
Loading thumbnail…

Cars Report

This example displays the first two car makes from a static JSON dataset in a large HTML text element. It loads car data from a local `cars.js` file, parses the JSON, and uses plain JavaScript DOM manipulation to render the values. The page is a minimal React starter setup, with the server and all necessary files preconfigured. The visualization demonstrates how to access and display structured data, relying on core JavaScript methods rather than specialized charting libraries.

Jul 13, 2020
Loading thumbnail…

Cars Report

This example displays a minimal webpage titled "Cars Report" that shows the make of the first car from an embedded JSON dataset. The page renders a single text element that is updated using plain DOM manipulation via `document.getElementById`. The code imports the car data from a separate JavaScript file, parses the JSON, and attempts to assign the make of two different cars to the message element, though a typo in the second assignment (`meggage2`) prevents it from executing correctly. The interface uses basic HTML and CSS, with no charting or visualization libraries.

Jul 13, 2020