ilsan142

@ilsan142·8 public vizzes

Custumizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the World Population Prospects 2017 data. The chart renders with D3 v7 in SVG, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. It customizes tick formatting with a custom function that abbreviates numbers using `format('.3s')` and replaces 'G' with 'B', while removing axis lines and gridlines via `.tickSize` and `.select('.domain').remove()`. Population values are multiplied by 1,000 from the CSV data.

Nov 24, 2022

Loading thumbnail…

Cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each circle representing a data point from the auto-mpg dataset. The visualization uses D3 v7’s scaleLinear, axisBottom, axisLeft, and extent functions to map the data onto the SVG canvas. Points are plotted with a fixed radius of 10 pixels, styled with steelblue fill and 0.5 opacity. The chart includes gridlines via tickSize settings and custom formatting for axis tick labels.

Nov 7, 2022

Loading thumbnail…

Scattar Plot

This scatter plot displays the population of the top 10 most populous countries, with each country represented by a large circle. The plot uses D3.js v7, with a linear scale for population and a point scale for country names. Population values are loaded from a CSV file, converted to thousands, and rendered as SVG circles using the `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` APIs. Data originates from the 2017 World Population Prospects.

Nov 7, 2022

Loading thumbnail…

Fork of Custumizing Axes

This horizontal bar chart shows the population of the top 10 most populous countries, based on 2018 estimates from World Population Prospects 2017, with China and India leading. Using D3 v7, the visualization applies `scaleLinear` and `scaleBand` to map population values and country names, rendering bars as SVG rectangles. The chart calls `axisLeft` and `axisBottom` to display the categorical and quantitative scales, with data loaded from a CSV file via `d3.csv`.

Nov 7, 2022

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from World Population Prospects 2017. The chart renders horizontal bars with d3.scaleLinear and d3.scaleBand, and axes via d3.axisLeft and d3.axisBottom in an SVG. Data is loaded from a CSV with d3.csv.

Nov 7, 2022

Loading thumbnail…

Let's make a face with D3.js!

A yellow face with black-outlined eyes and a curved mouth is drawn using D3.js v7, with SVG circles, rectangles, and a path forming the features. The code uses D3's `select` and `append` to build the scene, and `transition().duration()` to animate the eyebrows shifting down and up over two seconds. Elements are positioned relative to the SVG's center using a transformed group, and the mouth is rendered with D3's `arc` function.

Nov 7, 2022

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the use of raw SVG shapes within an HTML page, displaying circles and rectangles at specific coordinates. The code uses native SVG elements like `<circle>` and `<rect>` positioned on a 960×960 canvas, with some shapes colored via `fill` attributes while others remain default black. It applies basic CSS styling through an external stylesheet, including a `.highlighted` class and page-level body margins. No JavaScript libraries are used; the visualization relies solely on static SVG markup and Cascading Style Sheets for rendering.

Oct 28, 2022

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data-loading pattern: it fetches an in-memory array of car objects through `getCars()`, which returns a Promise after a simulated 2-second delay. While waiting, the page displays “Loading...”, then renders a filtered text report listing only cars priced under $2,000, formatted as “year make model: price” via `generateReport()` and `formatCar()`. The code uses D3 v7’s `select` import and vanilla DOM methods to update a `<pre>` element, showcasing how to combine Promises with D3 for dynamic content updates.

Oct 28, 2022