deep221b

@deep221b·6 public vizzes

Fork of Pie Chart

This fork of a pie chart visualizes 2022 US auto sales by brand, using a dataset loaded from a GitHub gist via the `d3.csv` method. The chart renders as an SVG with colored segments generated by `d3.pie` and `d3.arc`, while a legend lists each brand with its percentage and total sales in thousands. Colors are assigned using `d3.scaleOrdinal`, and numeric formatting relies on `d3.format`. The code explicitly imports functions from D3 v5 and builds the visualization through a custom `getData` async helper.

Dec 8, 2022

Loading thumbnail…

Fork of World Population Area Chart

This example visualizes world population growth over time as a filled area chart, using a smooth curve to show the trend from historical data to 2015. The chart displays population on the y-axis and time on the x-axis, with a title and labeled axes. It is built with d3.v5, using `scaleLinear`, `scaleTime`, `axisBottom`, `axisLeft`, and the `area` generator with `curveBasis` to create the smoothed path. Data is loaded via `csv` from a VizHub-hosted dataset, and the SVG is rendered with custom styling for ticks, labels, and the maroon-filled area.

Dec 8, 2022

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles represent each car, with the horizontal axis showing horsepower and the vertical axis showing weight. The visualization uses D3 version 5, specifically the `scaleLinear`, `axisLeft`, and `axisBottom` APIs, to construct the axes and scales. Data is loaded as CSV from a remote URL, and the SVG rendering includes axis labels, a title, and grid lines styled via CSS.

Dec 8, 2022

Loading thumbnail…

Fork of Making a Bar Chart

This chart visualizes the top 10 most populous countries, with horizontal bars ranked by population using 2018 data from the United Nations World Population Prospects. Built with D3 v5, it renders as an SVG and customizes the axes, removing domain lines and formatting tick labels to abbreviate large numbers (e.g., ‘B’ for billions). The code relies on D3’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, while styling bars with steelblue fill via CSS.

Dec 8, 2022

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City, with time on the x-axis and temperature in degrees Celsius on the y-axis. The D3.js v5 code uses `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smoothed path, and `axisBottom` and `axisLeft` for gridlines and ticks. Data is parsed from a CSV file, rendered as an SVG, and styled with maroon strokes and custom fonts. The chart includes a title and axis labels, presenting a clean, minimal aesthetic.

Dec 8, 2022

Loading thumbnail…

Cars_report

This example demonstrates a minimal D3 visualization that simply renders the text “Hello D3 version 7” centered on a blank page. The page loads the D3 v7 library from a CDN and uses the `select` function to target the body element, then applies the `text` method to set its content. It serves as a basic template for getting started with D3’s selection and DOM manipulation APIs, highlighting the library’s core functionality in a stripped-down context. No data or complex rendering is involved.

Dec 6, 2022