mellerjakub88

@mellerjakub88·12 public vizzes

World Population Area Chart

This area chart visualizes world population trends over time, using a layered time-series approach with two distinct shift periods. The visualization employs the Dimple charting library built on D3 v5, rendering SVG elements through `dimple.chart`, `addTimeAxis`, and `addSeries` APIs. The chart displays data along a date-based x-axis and time-of-day y-axis, with bubble sizes representing values via `addMeasureAxis`. The underlying dataset appears to be a custom collection of shift-related measurements rather than actual population statistics, despite the title suggesting demographic data.

May 14, 2019

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the Auto MPG dataset. The code uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, and draws semi-transparent red circles via SVG. A title and axis labels are added manually, while the data is loaded from a CSV file using D3's `csv` function. The chart is rendered on a blank SVG canvas with margins and tick marks.

May 13, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for gridlines. The data is loaded from a CSV via `d3.csv`, with populations multiplied by 1000 from thousands to actual values.

May 13, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries using a linear scale for population and a point scale for country names. The code leverages d3.csv, scaleLinear, scalePoint, axisBottom, and axisLeft to render the chart as SVG, with circles for each country and formatted tick labels. Data originates from the 2018 United Nations World Population Prospects estimate.

May 13, 2019

Loading thumbnail…

Customizing axes

This bar chart displays the populations of the ten most populous countries, using data from the 2018 United Nations World Population Prospects. It shows raw population values on a linear scale, with country names on a categorical band scale. The example customizes axes by removing domain lines, styling tick lines, and reformatting tick labels with `d3.format` to replace “G” with “B” for billions. It uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, rendering as SVG.

May 13, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart ranks the top 10 most populous countries by their 2018 population estimates from the United Nations World Population Prospects 2017. It uses D3 v5 with an SVG canvas, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. The code loads data via `csv`, maps population values, and renders steel-blue rectangles with `axisLeft` and `axisBottom` for axis ticks.

May 13, 2019

Loading thumbnail…

Making a Bar Chart

A bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. The visualization reads data from a CSV file and renders each country as a rect element in an SVG canvas. The code uses d3.select, d3.csv, and d3’s data join to append rectangles, with population values converted to thousands and a fixed bar size. The chart is drawn in steelblue.

May 13, 2019

Loading thumbnail…

Making a Bar Chart

May 13, 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 2017. The visualization uses D3 v5 with an SVG rendering approach, where the `csv` method loads data from a local file and the `select` method binds it to the chart. Each rectangle represents a country’s population, styled with a steelblue fill, while text elements label the values. The code initially processes the data by multiplying population figures by 1000 to reflect actual counts.

May 13, 2019

Loading thumbnail…

Making a Bar Chart

This example displays the population of the top 10 most populous countries in 2018, using data from the United Nations’ World Population Prospects 2017. The visualization loads a CSV file with `d3.csv`, converts the population values to numbers, and renders them as steel-blue SVG rectangles. The code uses D3 v5’s `select` and `csv` methods, with the chart dimensions taken from the SVG element’s width and height attributes. No axes or labels are added in the current implementation, and the data is only logged to the console.

May 13, 2019

Loading thumbnail…

Making a Bar Chart

This example visualizes the 2018 population estimates for the top ten most populous countries as a static bar chart, using data from the United Nations World Population Prospects 2017. The chart displays each country’s population in thousands via rectangular bars rendered in SVG, with the initial code loading and parsing the CSV data using `d3.csv` and converting population strings to numbers. The bar chart itself is not yet drawn—the current implementation only fetches and logs the data, while the SVG container is prepared with D3’s `select` and attribute helpers. The styling is defined in external CSS, with bars and text formatted in `styles.css`.

May 13, 2019

Loading thumbnail…

Making a Bar Chart

This example displays the population of the ten most populous countries using a simple bar chart, based on 2018 estimates from the United Nations World Population Prospects. The visualization is rendered as SVG elements with steel-blue rectangles. The code loads the dataset with `d3.csv` and uses `d3.select` to set the chart’s dimensions from the SVG attributes, demonstrating a basic data-binding workflow in D3 v5.

May 13, 2019