yktan89

@yktan89·8 public vizzes

Making a Bar Chart

This example shows a bar chart ranking the populations of 18 countries, with the data sourced from a DataHub CSV file. The chart uses D3 v5's `scaleBand` for the categorical country axis and `scaleLinear` for the continuous population axis, rendering purple rectangles in an SVG. The code includes data parsing with `csv` and population values converted to thousands for display. A simple "Hello World" text label is appended to the chart, while axes and labels are generated using the `axisBottom` and `axisLeft` functions.

Jan 15, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays population figures for 18 countries, with each bar’s length representing population in thousands and countries ordered along the vertical axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data to pixel coordinates, while `axisLeft` and `axisBottom` generate the labeled axes. Population data is loaded from a CSV file via `d3.csv`, and rectangles are appended to an SVG canvas, styled with a purple fill. The chart’s margins and inner dimensions are computed dynamically from the SVG’s width and height attributes.

Jan 14, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot from the UCI Auto MPG dataset displays the relationship between vehicle weight and acceleration. Using the auto-mpg.csv data loaded via d3.csv, the visualization employs d3.scaleLinear for both axes and renders circles as SVG elements with a fixed radius. Gridlines are generated through axisBottom and axisLeft with tickSize settings, while custom axis labels and a title are added as SVG text elements. The chart applies a steel-blue fill with 0.5 opacity to indicate overlapping points.

Jan 7, 2020

Loading thumbnail…

Customising Axes

This example shows a horizontal bar chart ranking the world’s most populous countries, with custom styling for both axes. The chart uses D3’s `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates, while `axisBottom` and `axisLeft` produce the ticks and grid lines. The y-axis’s default domain and tick lines are removed, and the x-axis labels are formatted using `format('.3s')` to abbreviate large numbers (e.g., converting G to B). The bars themselves are purple SVG rectangles, and the data comes from a CSV file listing population figures.

Jan 5, 2020

Loading thumbnail…

Auto MPG Summary

This example displays a plain-text summary of the Auto MPG dataset from the UCI Machine Learning Repository, showing the row count, column count, and file size in kilobytes, followed by the first 10 rows as formatted JSON. The code uses d3.csv to load the data, csvFormat to compute its size, and d3.select to append the summary and data preview to the DOM. A retro terminal aesthetic is created with black background, green text, and large monospaced pre elements.

Jan 2, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation in D3.js v5. The code uses d3.select and d3.append to build SVG circles, rectangles, and an arc-generated mouth, then applies d3.transition to move the eyebrows up and down over two one-second cycles. The example imports the select and arc helpers from the d3 module and positions elements by translating a central group, showcasing method chaining and coordinate transforms.

Dec 30, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example shows how to draw basic shapes—circles, rectangles, lines, and paths—using raw SVG elements positioned within a single grouped coordinate space. It demonstrates that SVG styling can come from presentation attributes, inline CSS properties, or a stylesheet, with the CSS file also controlling overall page layout and stroke characteristics like line joins. The code uses no JavaScript libraries; it relies solely on the SVG API and a linked CSS file to define shape appearance, including a scaled group and translated sub-groups for spatial arrangement.

Dec 28, 2019

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous report generator that filters a hardcoded collection of car records by price and displays the matching entries in a web page. The application imports car data from a JSON string embedded in the `getCars.js` module, which uses a JavaScript `Promise` with a `setTimeout` to simulate a delayed API call. The `generateReport.js` module filters cars by a maximum price threshold, formats each entry using the `formatCar` function, and joins them with newlines. The result is rendered into a `<pre>` element in the `index.html` page, with initial loading text shown before the async data arrives.

Dec 26, 2019