Ofer Calvo

@OferCalvo·8 public vizzes

A bar chart for SAFe product increments

This chart visualizes bug counts across SAFe program increment (PI) sprints, using a line graph over a grouped bar chart where each PI’s four sprints are highlighted by translucent background bars. The scatter plot dots and white connector lines emphasize individual sprint values. It is built with D3 v5, using `scaleBand` for sprint and PI positioning, `scaleLinear` for the y-axis, `axisBottom` and `axisLeft` for ticks, and a Catmull-Rom curve via `d3.curveCatmullRom` for the line. Data comes from a CSV file with dates, PI, sprint names, and bug counts.

Feb 22, 2020

Loading thumbnail…

Makeing a bar chart with D3.js!

This bar chart displays the population of religious groups in Israel, based on a 2016 estimate from the data.gov.il dataset. Using D3.js v5, the chart renders as an SVG with horizontal bars, showing values for Christian, Druze, Jewish, Muslim, and Other populations. The code employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical y-axis positioning, and `d3.axisBottom` with a `.2s` format for tick labels. Grid lines and a title label complete the visualization, with data loaded asynchronously via `d3.csv`.

Feb 22, 2020

Loading thumbnail…

Min\Max Temperature in AFULA-NIR-HAEMEQ line plot

This line plot shows daily maximum and minimum temperatures in AFULA-NIR-HAEMEQ from July through November 2019, with a red curve for highs and a steelblue curve for lows. Orange circles mark each daily observation. The visualization uses D3 v5 with `scaleTime` and `scaleLinear` for axes, `line` with `curveCatmullRom` for smooth paths, and SVG rendering. Data comes from the Israel Meteorological Service, loaded via `csv` from a local file.

Feb 1, 2020

Loading thumbnail…

Temperature in AFULA-NIR-HAEMEQ line plot

Daily maximum temperatures at AFULA-NIR-HAEMEQ are plotted across seven months using a smooth line chart. The visualization encodes dates on the x-axis and temperature values on the y-axis, with semi-transparent circles highlighting individual data points. Built with d3.v5, the code uses `scaleTime`, `scaleLinear`, `line` with `curveCatmullRom`, and `axisBottom`/`axisLeft` to render an SVG. Data comes from the Israel Meteorological Service and is loaded from a CSV file.

Feb 1, 2020

Loading thumbnail…

Temperature in AFULA-NIR-HAEMEQ area plot

This area plot displays daily maximum temperatures in AFULA-NIR-HAEMEQ from July to November 2019, sourced from Israel Meteorological Service weather data. The chart encodes temperature on the y-axis and date on the x-axis, with a filled gray area beneath a steel-blue line. The visualization uses d3’s `area` generator with a Catmull-Rom curve for smoothing, while SVG circles mark individual data points with low opacity. The code leverages d3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct the axes and plot.

Feb 1, 2020

Loading thumbnail…

Temperature in AFULA-NIR-HAEMEQ scatter plot

A scatter plot displays daily maximum temperatures in AFULA-NIR-HAEMEQ over time, with each orange circle representing a day’s high temperature. The visualization uses D3 v5 to parse the CSV data, with `scaleTime` for the date axis and `scaleLinear` for temperature, rendered as SVG circles. Axes are labeled using `axisBottom` and `axisLeft`, with gridlines extending across the chart. Data comes from the Israel Meteorological Service (IMS) weather dataset.

Feb 1, 2020

Loading thumbnail…

Cars numeric scatter plot with D3.js !

A scatter plot of automobile data compares horsepower (x-axis) against weight (y-axis). It renders circles for each car model using D3.js v5. The visualization sources data from a CSV file containing the UCI Machine Learning Repository Auto MPG dataset. The code utilizes `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `format` functions to construct the SVG chart, with red, semi-transparent circles and labeled axes.

Jan 25, 2020

Loading thumbnail…

Makeing a scatter plot with D3.js!

This example uses D3.js v5 to render a scatter plot of Israel’s population by religious group from 2016 estimates in the data.gov.il dataset. The visualization maps each religion on a point scale for the y-axis and population counts on a linear scale for the x-axis, with circles styled via SVG. The code calls `d3.csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to build the chart, while including grid lines and axis labels. Data is loaded from an external CSV file, and the plot is rendered using SVG elements.

Jan 25, 2020