Veena Muralidharan (@veena1486), VizHub

Scatterplot

This scatterplot displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. Each circle’s horizontal position encodes population and vertical position encodes country. The implementation uses `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes, which are customized with tick sizing and formatting. Circles are rendered via `append('circle')`, and the chart includes a title and axis label with custom CSS styling.

Aug 23, 2019

Loading thumbnail…

Scatterplot

This scatterplot displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. Each circle’s horizontal position encodes population and vertical position encodes country. The implementation uses `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes, which are customized with tick sizing and formatting. Circles are rendered via `append('circle')`, and the chart includes a title and axis label with custom CSS styling.

Aug 23, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, with a horizontal layout and customized axes. The y-axis removes its domain and tick lines, while the x-axis uses a custom tick format that abbreviates large numbers and replaces 'G' with 'B' for billions. The chart is rendered with SVG using D3 v5, loading population data from a CSV file. The code uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to create and customize the visualization.

Aug 21, 2019

Loading thumbnail…

Making a bar chart

This horizontal bar chart displays population figures for the ten most populous countries, with bars extending from left to right on a linear scale. The visualization is built with D3.js (v5), using `d3.csv` to load the dataset, `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for the axes. Population values are multiplied by 1,000 during data preprocessing, and bars are rendered as SVG rectangles in steelblue.

Aug 21, 2019

Loading thumbnail…

Let's make a smiley face with D3.js

A yellow smiley face is drawn in SVG using D3.js v5, with a circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth generated with the `arc` helper. The eyebrows animate vertically via chained `transition().attr()` calls, moving down then returning over four seconds. The SVG dimensions are read directly from the markup, and the face is centered using a translated `<g>` group. The example demonstrates basic SVG shape creation and D3 transitions.

Aug 14, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example displays basic SVG shapes—a circle, rectangle, line, and path—arranged in two groups on a 960×500 canvas. The shapes are rendered with inline SVG markup, while CSS styles the line group with a black stroke and the path with a red, round-joined stroke. A `<g>` element with a `fill="blue"` attribute applies color to the circle and rectangle, and the overall graphic is transformed using SVG `translate` and `scale` operations. No JavaScript libraries are used; the visualization relies entirely on static HTML, SVG, and CSS.

Aug 13, 2019

Loading thumbnail…

HTML Cars Report

This example displays a static, text-based inventory of three Nissan cars with model years and prices. A simple HTML list presents each car entry, with the first item styled in red via the `.highlighted` CSS class. The page uses no JavaScript libraries or interactive APIs, relying solely on plain HTML markup and a separate CSS stylesheet (`styles.css`) to control presentation, including monospace font and enlarged text size. The data is hardcoded directly in the `index.html` file.

Aug 13, 2019