bharatbobby

@bharatbobby·6 public vizzes

Untitled

A donut chart displays a value range between two labeled extremes, with a yellow arc on the right and an orange arc on the left, separated by horizontal lines. The chart animates by repeatedly expanding the yellow arc’s end angle using `d3.interval` and `transition.attrTween` with an arc interpolator. The visualization is built with D3 v4, rendering SVG paths generated by `d3.arc`. Static text labels and connector lines annotate the chart, while the animation runs continuously in a loop.

Mar 10, 2022

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot displays temperature readings by time for San Francisco, sourced from a dataset hosted on VizHub. The visualization uses D3 v5 with SVG rendering to draw red, semi-transparent circles. It employs `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `axisBottom` and `axisLeft` for labeled axes with gridlines. Data is loaded via `csv` and parsed into JavaScript `Date` and numeric values before being mapped to screen coordinates.

Mar 1, 2022

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between vehicle attributes from the auto-mpg dataset, with points plotted using D3 v5’s `scaleLinear` for the x-axis and `scalePoint` for the y-axis. The SVG rendering includes custom axes with tick formatting and a title. Data is loaded via `csv` and parsed before rendering circles colored steelblue, demonstrating D3’s modular imports and axis customization.

Mar 1, 2022

Loading thumbnail…

Customizing Axis

This example highlights how axis customization can clarify large-number data, using a horizontal bar chart of top countries by population. The chart displays population values in billions, with custom tick formatting that converts D3’s scientific notation (e.g., “1.41G”) into a clearer “B” suffix. The bar chart is rendered in SVG using D3 v7’s scaleLinear, scaleBand, axisBottom, and axisLeft. Data is loaded from a CSV file via d3.csv, with population figures multiplied by 1000. Styling uses CSS for the steelblue rectangles and sans-serif text.

Feb 28, 2022

Loading thumbnail…

Lets make a bar chart

This bar chart displays the population of ten countries, using horizontal bars to compare values across nations. The chart loads data from a CSV file and renders it as SVG elements. It uses D3 v7 methods including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position the bars and axes. Population values are parsed from strings to numbers and scaled by 1000 before being mapped to bar widths.

Feb 28, 2022

Loading thumbnail…

Lets Make a face with d3

This example builds a cartoon face from basic SVG shapes using D3 v7. It shows a yellow circle head with eyes, eyebrows, and a mouth, all positioned relative to the center of a 960×500 SVG canvas. The code uses D3 selections and method chaining to append and configure elements, including the `d3.arc` path generator for the smile. All styling and layout are handled through SVG attributes, with the face centered via a translation transform.

Feb 28, 2022