Abhishek Chandarana

@iamabbie·9 public vizzes

World Population Area Chart

This area chart visualizes world population growth over time, using a filled path to emphasize the rising trend. The code loads CSV data and parses years as dates, then renders an SVG with D3 v5’s `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and axis generators. Population values are formatted in billions via `format('.1s')`, while grid lines and rotated labels clarify the axes. The chart is titled “World Population” and colors the area maroon against a clean background.

Aug 20, 2020

Loading thumbnail…

Temperature in Sanfrancisco Area Chart

This area chart visualizes a week of temperature data in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses a smooth curved area fill in maroon, with axis labels titled "Time" and "Temperature." Built with D3 v5, the code employs `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.area` with `curveBasis` to generate the SVG path. Data is parsed from a CSV hosted on VizHub, with axes and gridlines rendered via `d3.axisBottom` and `d3.axisLeft`.

Aug 20, 2020

Loading thumbnail…

Temperature in Sanfrancisco Line Chart

This line chart visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart renders as an SVG, using d3’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smoothed path, and `axisBottom` and `axisLeft` with grid ticks. The data comes from a CSV file hosted at a URL, parsed with d3’s `csv` function, and styled via custom CSS classes for the title, axis labels, and maroon line.

Aug 20, 2020

Loading thumbnail…

Temperature in Sanfrancisco Scatter Polt

This scatter plot shows the temperature in San Francisco over a week, with time on the x-axis and temperature on the y-axis. Each data point is represented as a steelblue circle, and the chart includes labeled axes and a title. The visualization uses d3.scaleTime and d3.scaleLinear for the axes, with d3.axisLeft and d3.axisBottom to render the ticks and grid lines. The data is loaded from a CSV file at a VizHub URL.

Aug 20, 2020

Loading thumbnail…

Cars Scatter Polt

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Red, semi-transparent circles represent individual vehicles, with axes labeled accordingly. The visualization uses d3.csv to load data, d3.scaleLinear for both scales, and d3.axisBottom and d3.axisLeft with gridlines to render the chart. SVG circles are positioned using the scaled values, with text elements styled via CSS for the title and axis labels.

Aug 20, 2020

Loading thumbnail…

Scatter Polt

A scatter plot displays the population of the top 10 most populous countries, with countries on the vertical axis and population on the horizontal axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for grid lines. Data comes from a CSV file, and the population values are multiplied by 1000 before plotting.

Aug 20, 2020

Loading thumbnail…

Customizing Axes and Numbers

This example displays a horizontal bar chart of the world’s top 10 most populous countries, with populations from a CSV file scaled by 1,000. It uses d3.csv, d3.scaleLinear, and d3.scaleBand to map data to bar lengths and country names on the y-axis. The chart customizes the x-axis with d3.format('.3s') to abbreviate numbers and replaces “G” with “B” for billions, while removing y-axis domain lines and adding axis labels via d3.axisBottom and d3.axisLeft. All rendering is done in SVG with styled rectangles and text.

Aug 20, 2020

Loading thumbnail…

Bar chart using D3.js

This bar chart displays population estimates for the ten most populous countries, using horizontal bars sorted alphabetically by country with steel-blue rectangles. The visualization loads data from a CSV file and renders it as SVG elements, with the D3 v5 library handling the core logic. It employs `scaleLinear` for the x-axis population values and `scaleBand` for the y-axis country categories. The chart adds axes through `axisLeft` and `axisBottom`, appends a group element with margins, and positions rectangles using the scales.

Aug 19, 2020

Loading thumbnail…

Smile face using D3.js

This example builds a smiling face with SVG shapes using D3.js v5. It draws a yellow circle for the head, two black circles for the eyes, and an arc-generated mouth using the `arc()` function. Animated eyebrow rectangles transition vertically via `transition.attr`, moving them up and down repeatedly. The face is centered with a group transformation, and all shapes are styled with fill and stroke attributes.

Aug 19, 2020