NoobSaiyan

@NoobSaiyan·5 public vizzes

Line Chart

This line chart displays temperature measurements over time, using a smooth basis curve to connect data points. The visualization is built with D3 version 6 and rendered as an SVG, with the temperature data sourced from a CSV file of San Francisco weather records. The chart employs `scaleTime` and `scaleLinear` for the axes, along with `axisBottom`, `axisLeft`, and `line` to generate the plot.

Jan 11, 2021

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` smoother to draw the maroon temperature curve. Data is loaded via `csv` from a remote dataset, and the SVG rendering includes styled axes, tick marks, and a title. The code demonstrates a typical margin-based layout with axis labels and gridlines, sourced from Data Canvas - Sense Your City.

Jan 11, 2021

Loading thumbnail…

Bar Graph

This bar graph displays TV show ratings from a CSV file, sorting each show’s average rating as a horizontal bar. Built with D3 v6, it uses `scaleLinear` and `scaleBand` to map rating values and show names, with axes rendered via `axisLeft` and `axisBottom`. The SVG rendering loads data asynchronously with `csv()`, parses numeric values, and draws steelblue rectangles sized by each rating.

Jan 9, 2021

Loading thumbnail…

Fork of Customizing Axes

A horizontal bar chart displays the top 10 most populous countries from 2018 United Nations data, with a custom x-axis that formats population numbers in abbreviated units (e.g., "1.42B"). Using D3 v5 with SVG rendering, the example extends a basic bar chart by applying `scaleLinear`, `scaleBand`, and `axisBottom` with a custom tick format via `format('.3s')`, while removing axis domain lines and styling labels. The y-axis uses `axisLeft` with all ticks removed, and bars are sized using `xScale` and `yScale`.

Jan 9, 2021

Loading thumbnail…

Making Face

A simple face made of SVG shapes smiles as its eyebrows repeatedly rise and fall. Built with D3 v6, the visualization uses `d3.select`, `d3.arc`, and chained `transition` calls to animate the eyebrows over two-second intervals. The face is centered in an SVG canvas, with circles for eyes, a path for the mouth, and rectangles for eyebrows, all drawn in a bright yellow with black outlines.

Jan 8, 2021