Akshay

@badcoderxd·5 public vizzes

new

This visualization displays a line chart of energy sector intensity forecasts over time, using a dataset from an external JSON API. The x-axis represents forecast years, while the y-axis maps intensity values, with a colored legend distinguishing intensity levels from "Very Low" to "V.High." Built with D3 v6 in a React framework, the code employs `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the axes, and `line` with `curveCatmullRom` to draw the smoothed path. Data points are rendered as circles, colored conditionally based on intensity thresholds, with grid lines and labels styled via CSS.

Feb 1, 2021

Loading thumbnail…

radar

A radar chart displays a single phone's ratings across eight attributes such as Battery Life, Brand, and Price, measured on a scale from zero to one. The chart uses a five-level circular grid with axes for each attribute and highlights the data point's area in steelblue. Built with D3.js v5, the visualization generates an SVG using a custom `RadarChart` function with ordinal color scaling and percentage formatting.

Jan 30, 2021

Loading thumbnail…

barchart

This example shows a horizontal bar chart comparing population counts across six countries, with country names on the y-axis and population values on the x-axis. It loads data from a CSV file using `d3.csv` and renders SVG rectangles scaled by `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. The chart includes axes generated with `axisLeft` and `axisBottom`, and the code also fetches a JSON dataset via `d3.json` for logging.

Jan 29, 2021

Loading thumbnail…

data visulization

This example shows a horizontal bar chart of country populations, with bars scaled by population values and country names on the y-axis. The visualization uses D3 v6’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data, map population counts to bar widths, and render axes. Bars are drawn as SVG `rect` elements within a grouped `<g>` element, with margins applied via a `translate` transform. The data, sourced from `data.csv`, has population values multiplied by 1000 before rendering.

Jan 29, 2021

Loading thumbnail…

Fork of data visulization

A yellow circle face with black eyes and an arc-shaped mouth is drawn in SVG. The code creates the face using d3 selections and attributes, setting the head as a large yellow circle, the two eyes as smaller black circles, and the mouth as a path generated with d3.arc using specified inner and outer radii and start and end angles. The visualization uses fixed pixel dimensions and demonstrates basic SVG shape construction with D3 v6.

Jan 29, 2021