Iyke2909

@Iyke2909·21 public vizzes

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, plotting Celsius readings against timestamps on a smooth curved path. The visualization uses d3.scaleTime and d3.scaleLinear to map the data, with d3.axisBottom and d3.axisLeft for labeled axes and d3.line with curveBasis for the smoothed line. Data is loaded via d3.csv from a Data Canvas - Sense Your City dataset, rendered as an SVG with styled axes, tick marks, and a title.

Oct 29, 2020

Loading thumbnail…

Tax Payers: Age vs Income

The chart plots tax payer income against age as a scatterplot, with each circle representing a data point. It shows an overall trend where annual income tends to increase with a taxpayer's age, though with many outliers. The visualization is built using the D3 v5 library, leveraging `scaleLinear` for axes, `axisBottom` and `axisLeft` for the coordinate grid, and SVG `circle` elements for the data points. Data is loaded from the `income_age.csv` file, and the design includes formatted ticks, labeled axes, and a clear title.

Oct 29, 2020

Loading thumbnail…

Tax Payers: Occupation Vs Income

This horizontal bar chart compares occupations with annual income, displaying each occupation as a bar scaled to its reported yearly earnings. The visualization reveals salary ranges across professions like farmers, business consultants, and publicans from the CSV data. Built with D3 v5, it uses `scaleLinear` for the income axis, `scaleBand` for categorical occupations, and `axisBottom` with tick formatting to display abbreviated income values. The SVG rendering includes grid lines, axis labels, and a title, with steel-blue bars representing each occupation's income.

Oct 29, 2020

Loading thumbnail…

Untitled

This donut chart displays the distribution of gender counts from a CSV file, with Male (113) and Female (84) shown as two slices. Built with d3.v4 and SVG, it loads data via `d3.csv`, converts the total column to numbers, and uses `d3.pie()` to compute arc angles. The `d3.arc()` generator creates the paths, while `d3.scaleOrdinal` with `d3.schemeSet2` assigns slice colors, and each slice is labeled with its group name using the arc’s centroid.

Oct 29, 2020

Loading thumbnail…

Tax Payers: Gender and Marital Status Ratio Pie Chart

This visualization displays the ratio of tax payers categorized by gender and marital status, presented as a pie chart. The two charts show gender (male and female) and marital status (single, widowed, married) totals, sourced from CSV files. The code uses d3 pie and arc functions to generate the SVG paths, with d3.scaleOrdinal and d3.schemeSet2 providing categorical colors. Labels are placed at each slice’s centroid using the arc generator’s centroid method.

Oct 28, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth over time, with the x-axis representing years and the y-axis showing population in billions. The visualization uses a smooth, curved area path filled in maroon, with grid lines and labeled axes for clarity. It employs D3 v5’s `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG chart. Data is loaded from a CSV of world population by year, with values parsed and formatted using `format`.

Oct 28, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates D3’s general update pattern for binding data to SVG circles. Five apples appear in a row, then one is removed, and another apple is replaced by a lemon after timed intervals. The code uses `selection.selectAll`, `enter().append`, and `exit().remove` to handle entering and exiting elements, with `d3.range` generating the initial fruit array.

Oct 28, 2020

Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

A filterable bar chart shows the number of students enrolled in the top 50 courses at a university, ranked by enrollment. A dropdown menu lets the user filter the data by department (CSIS, CAM, or GAV), which updates the chart to only display courses from that department. The visualization is built with React and D3 v5, using D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and SVG `rect` elements to render the bars. Data is loaded asynchronously from a CSV file using D3's `csv` function, and the selection handler updates the state to re-filter and re-sort the displayed bars.

Oct 28, 2020

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 2017. It shows horizontal bars ordered by population, with country names on the y-axis and population values on the x-axis formatted in billions. The visualization customizes axes by removing domain lines, adding gridlines through tick sizing, and including a manually positioned population label. Built with D3 v5, it uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with data loaded via d3.csv and rendered as SVG rectangles.

Oct 28, 2020

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart plots timestamps on the x-axis and temperature in degrees Celsius on the y-axis, with a smooth curve generated using the `area` and `curveBasis` functions from d3. The visualization uses d3.v5 to render an SVG, with axes created via `axisBottom` and `axisLeft`, and scales set up using `scaleTime` and `scaleLinear`. The data is loaded from a CSV file using the `csv` function.

Oct 27, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

Oct 27, 2020

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Each circle represents a single data point. The visualization uses D3.js v5, employing `scaleTime` and `scaleLinear` for the axes, `csv` to load data from a remote file, and `axisBottom` and `axisLeft` to generate gridlines and tick labels. Rendered as SVG, circles are colored steel blue and all text is styled via CSS.

Oct 27, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars in the UCI Auto MPG dataset. Each semi-transparent red circle represents a car, with axes labeled accordingly. The visualization uses d3.csv for data loading, d3.scaleLinear for both scales, and d3.axisBottom and d3.axisLeft for tick marks and grid lines. Axis labels rotate via SVG transforms, and the chart is rendered entirely in an SVG container.

Oct 27, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data-loading and text-report workflow. It fetches a hardcoded JSON array of car objects through a custom `getCars()` promise, filters them by price, and formats the results into a plain-text list. The code uses ES6 modules (`import`/`export`) and relies on D3 only for loading via UNPKG, though no D3 visualization is rendered. The final output is displayed inside a `<pre>` element in the HTML, showing a report of cars under a specified price threshold.

Oct 22, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. Each circle’s horizontal position encodes population size, while the vertical axis lists country names. The visualization uses D3 v5 with `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the chart, rendering as SVG. Data is loaded from a CSV file, with population values multiplied by 1000 for display.

Oct 22, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries in 2018, using population estimates from the United Nations World Population Prospects 2017. It renders horizontal bars with D3 v5’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis, using `axisLeft` and `axisBottom` for ticks. The data is loaded from a CSV via `d3.csv`, with population values multiplied by 1000. The SVG output uses `g.selectAll('rect')` to draw each bar, styled with a steelblue fill.

Oct 21, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with two eyes and animated eyebrows is rendered in SVG using D3.js. The face is drawn with simple shapes including circles for the eyes and a path for the mouth, created using `d3.arc` with specified inner and outer radii. Eyebrows are rectangles that move up and down via chained `transition().duration()` calls, demonstrating D3's animation capabilities. The SVG canvas is 960 by 500 pixels, with all elements centered through a `g` transform.

Oct 20, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and path elements—using SVG within a React application, styled with CSS. The SVG canvas contains groups with transformations like scaling and translation, applying fills, strokes, and stroke widths. The `styles.css` file defines classes like `.lines` for shared stroke properties and `.lines path` for path-specific styling. Using raw SVG markup in `index.html`, it showcases foundational vector graphics rendering without external libraries.

Oct 20, 2020

Loading thumbnail…

HTML Cars Report

This example shows a minimal HTML cars report, rendering a list of three used vehicles with their model years and prices. The page uses plain HTML unordered list elements in `index.html`, paired with a `styles.css` stylesheet that applies monospace type and a red highlight class to the first car entry. It demonstrates how static data is presented without JavaScript libraries or frameworks, relying solely on basic HTML structure and CSS styling for visual formatting.

Oct 20, 2020

Loading thumbnail…

Hello D3 Version 6

This example demonstrates a minimal D3.js version 6 setup by rendering the text “Hello D3 Version 6!” in the center of a web page. The code uses the `select` function from D3’s `d3` module to target the `body` element and set its text content directly. The page loads D3 v6 from a CDN and applies large, centered typography via inline CSS. No external data is involved; the visualization is purely a formatting exercise showing the basic syntax and interaction between an HTML file and a bundled JavaScript module.

Oct 19, 2020

Loading thumbnail…

HTML Starter

This example displays a plain web page with the text "Hello HTML" centered on a white background. It serves as a minimal starting point for HTML-based projects, using a simple CSS style block to set the font size and alignment. The page also includes an inline JavaScript script that logs "Hello JavaScript!" to the browser’s developer console, demonstrating basic interaction between HTML and JavaScript. The example does not use any external libraries or data, focusing solely on core web standards.

Oct 19, 2020