Skip to main content
Log in
S

shehryar-hashir

@shehryar-hashir·9 public vizzes

Loading thumbnail…

Making a Bar Chart

A bar chart displays the populations of the top 10 most populous countries, using 2018 United Nations estimates. The chart presents data from a CSV file, with population values scaled by a factor of 1,000. It uses D3 v5 with `scaleLinear` and `scaleBand` for scales, `axisBottom` and `axisLeft` for axes, and SVG rendering with custom tick formatting. A YouTube tutorial accompanies the example.

Mar 2, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The chart uses D3 v5 with an SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Customized `d3.axisLeft` and `d3.axisBottom` remove domain lines, add gridlines, and format tick labels using `d3.format`. Data is loaded from a local CSV file and scaled to show thousands.

Mar 2, 2020
Loading thumbnail…

Cricket Score Graph

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red, semi-transparent circles represent individual vehicles, with axes labeled accordingly. The visualization uses D3 v5, specifically `d3.csv` for data loading, `d3.scaleLinear` and `d3.extent` for scaling, and `d3.axisBottom` and `d3.axisLeft` with gridlines. SVG rendering and CSS styling control the appearance, while the title and axis labels are added as SVG text elements.

Feb 19, 2020
Loading thumbnail…

Cricket Score Graph

This visualization tracks the growth of VizHub users over time, from its launch in August 2018 through February 2020. A line chart with circular data points shows increasing user counts, with three annotated labels marking significant milestones like the VizHub 1.0 release and the Datavis 2020 launch. The code uses d3.line with a curveMonotoneY curve for the line, d3.scaleTime and d3.scaleLinear for axes, and the d3-svg-annotation library for labels. Data is loaded from a CSV file, and the SVG rendering includes tick marks and gridlines.

Feb 19, 2020
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays the count of a phenomenon across U.S. states, grouped by region (South, West, Midwest, Northeast) over five years (2011–2015), with each region represented by a distinct colored line. The visualization uses D3 v5’s `nest()` and `rollup()` to aggregate state-level data from a CSV file, then renders paths with `d3.line()`. It employs `scaleTime`, `scaleLinear`, and `scaleOrdinal` with `schemeCategory10` for axes and color encoding, plus a custom `colorLegend` component for region labels. SVG rendering includes axis labels and a title, with data sourced from the Data Canvas - Sense Your City project.

Feb 19, 2020
Loading thumbnail…

VizHub User Count Over Time

This line chart shows VizHub user growth from its August 2018 launch through February 2020. The SVG visualization uses d3.line with a monotone curve, with each data point marked by a circle whose tooltip reveals the exact user count. Annotations from d3-svg-annotation highlight three growth events: a Medium post, the VizHub 2.0 Kickstarter, and the Datavis 2020 course launch. The code reads a local CSV file with user counts per date, and implements custom axes with tick marks and labels from d3.axisBottom and d3.axisLeft.

Feb 19, 2020
Loading thumbnail…

Let's make a face with D3.js

This example builds a simple cartoon face using D3.js v5 and SVG, drawing features like eyes, a nose, and a mouth directly into an empty `<svg>` element. The code selects the SVG container and appends shapes, but it also logs the loaded `d3` object to the console to confirm the library is active. The page uses a minimal HTML structure with an external stylesheet and loads D3 from a CDN, demonstrating how to start scripting basic SVG visualizations with the library. The face itself is constructed entirely through D3’s selection and appending methods, with no external data source.

Dec 15, 2019
Loading thumbnail…

Let's make a face with D3.js

This example builds a simple cartoon face using D3.js v5 and SVG, drawing features like eyes, a nose, and a mouth directly into an empty `<svg>` element. The code selects the SVG container and appends shapes, but it also logs the loaded `d3` object to the console to confirm the library is active. The page uses a minimal HTML structure with an external stylesheet and loads D3 from a CDN, demonstrating how to start scripting basic SVG visualizations with the library. The face itself is constructed entirely through D3’s selection and appending methods, with no external data source.

Dec 15, 2019
Loading thumbnail…

Hello VizHub

This example displays the make of the first car in a small static dataset. It demonstrates basic VizHub project structure, including ES6 module imports and a separate stylesheet. The page renders the text “Honda” prominently in a large, styled font on a dark blue background. The code imports an array of car objects from `cars.js`, parses it with `JSON.parse`, and writes the result to the DOM using `document.getElementById` and `textContent`. The styling uses CSS with the Ubuntu font from Google Fonts.

Dec 14, 2019