ram-iyer

@ram-iyer·8 public vizzes

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. It uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values, with d3.axisBottom and d3.axisLeft rendering labeled axes. The smooth line path is generated using d3.line with curveBasis. The SVG chart includes gridlines via tick marks, a title, and axis labels, with data loaded as CSV and parsed into Date and numeric values before rendering.

Feb 20, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the 10 most populous countries, based on 2018 United Nations estimates. It shows the data as circles positioned along a linear x-axis for population and a point scale y-axis for country names. Built with D3 v5, the visualization uses `csv` to load data, `scaleLinear` and `scalePoint` for scales, and `axisBottom` and `axisLeft` for axes. The code formats tick labels using `format` and renders the chart as SVG.

Feb 20, 2019

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the ten most populous countries from the 2018 United Nations World Population Prospects estimate. Each circle represents a country, positioned along a linear population scale on the x-axis and a point scale for country names on the y-axis. The visualization uses D3 v5’s `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render SVG circles and gridlines. Population values are formatted in billions using D3’s `format` function, and the chart includes a title and axis labels.

Feb 20, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the ten most populous countries, using a linear scale for population and a point scale for country names. Each circle’s radius is set to the bandwidth of the point scale, and the data is sourced from the 2018 United Nations World Population Prospects. The visualization uses D3 v5, with `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render the SVG, including custom tick formatting that converts large numbers to abbreviated labels.

Feb 20, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart customizes both axes: the y-axis labels are enlarged and the default domain line is removed, while the x-axis uses a custom tick format that abbreviates large numbers and replaces 'G' with 'B' for billions. The code leverages D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with data loaded via `d3.csv`.

Feb 20, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The code uses D3 v5 to load the CSV data, scale the values, and render the chart as SVG elements. It constructs linear and band scales with `scaleLinear` and `scaleBand`, and draws axes via `axisLeft` and `axisBottom`. Population figures are multiplied by 1,000 after parsing.

Feb 20, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The data is loaded from a CSV file and rendered as horizontal bars on an SVG canvas. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom from D3 v5, with bars filled in steelblue and sized proportionally to population values. The chart includes axes generated via the axis functions, and population figures are multiplied by 1,000 to reflect full counts.

Feb 19, 2019

Loading thumbnail…

Hello VizHub

This example renders a plain-text message in a styled webpage. It imports a hardcoded JSON dataset of five cars, filters and formats it, and displays the first car’s details using D3’s `select` and text-setting API. The page uses a dark Ubuntu-themed CSS layout and loads D3 v5 from a CDN.

Feb 18, 2019