Skip to main content
100%

dc.js unemployment example

✓ Published0🌍 Public
Aalex-rind
Last edited Dec 12, 2018
Created on Dec 12, 2018

This interactive dashboard uses dc.js to explore European unemployment rates from 2011 to 2016, based on a CSV dataset. It combines four linked charts: a pie chart showing unemployment distribution by gender, and three bar charts visualizing unemployment sums by year, age group, and country. All charts are crossfiltered, so clicking or brushing on one chart filters the others. The visualization uses D3.js v5 with dc.js and crossfilter to enable dynamic exploration of the data, which contains unemployment values for multiple countries, both sexes, and age groups over time.

AI-generated description

We load a CSV with unemployment data. Uses D3.js v4.

This is a blank dc.js bl.ock template - please fork this bl.ock when asking for help on Stack Overflow or the dc.js user group, or to demonstrate bugs when filing an issue on GitHub.

This was created with blockbuilder.org - you can use blockbuilder to fork and edit this bl.ock interactively. Or you can edit your fork using gist.github.com, or even clone the gist as a git repository.

See this block for a complete example, with data: <a href='http://bl.ocks.org/gordonwoodhull/ecce8e32d64c662cffd5'>dc.js example</a>

forked from <a href='http://bl.ocks.org/gordonwoodhull/'>gordonwoodhull</a>'s block: <a href='http://bl.ocks.org/gordonwoodhull/9ab997c9a8d7d3380364'>dc.js example</a>

mit Licensed

Similar vizzes

Loading thumbnail…

dc.js unemploymed example

This dc.js example visualizes European unemployment rates from 2011 to 2016, broken down by country, gender, and age group. It uses four coordinated charts: a pie chart showing the gender distribution, and three bar charts displaying unemployment by year, age, and country. The data is loaded from a CSV file using d3.csv, processed with crossfilter, and aggregated with reductio to sum unemployment values. All charts are linked, so clicking on a slice or bar in any chart filters the data across all visualizations, allowing interactive exploration of the unemployment dataset.

Aalex-rind
95% match
Loading thumbnail…

dc.js - Spain 2016

This visualization uses dc.js to explore monthly employment contract data across Spanish provinces and municipalities in 2016. The dashboard displays aggregated counts of contracts split by gender, contract type (indefinite, temporary, conversion), and economic sector (agriculture, industry, construction, services). A row chart breaks down contracts by autonomous community, while a line chart shows the monthly trend, and an interactive table lists municipalities. Linked crossfilter filtering lets users click any chart to filter the others, revealing how contract distributions vary across regions and over time.

Aackuser
75% match
Loading thumbnail…

Fork of Project Dashboard - Mental Illnesses, Unemployment and Suicides over the years

This dashboard combines four linked views to explore relationships between mental illness, unemployment, and suicide rates across countries over time. It shows how the percentage of the population affected by mental illness has changed, alongside unemployment and suicide death rates, with a bar chart highlighting the top five countries most affected by unemployment for a selected year. The visualization uses D3 v5 and React, rendering SVG charts with scales including `scaleBand`, `scaleLinear`, and `scaleTime`, and incorporates dropdown menus for user interaction. It leverages d3-shape’s `line` and `curveNatural` for smooth line paths, with data sourced from a CSV file.

Jjimmy.fisher@member.mensa.org
74% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3.js scatter plot visualizes youth unemployment data, animating between two axes every two seconds to compare the unemployment rate against the median age of unemployed youth. The chart is implemented as a configurable `scatterPlot` module using d3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` APIs, rendering SVG circles with a steelblue fill. Data is loaded asynchronously from a CSV via `d3.csv` and parsed with a custom row function. The animation cycles the x-axis value between two dataset columns, updating the plot through a `setInterval` timer.

Ssaisathyapriya097@gmail.com
74% match
Loading thumbnail…

Project Dashboard - Mental Illnesses, Unemployment and Suicides over the years

This dashboard combines multiple linked views to explore mental illness, unemployment, and suicide rates. It shows how the top five countries affected by unemployment compare in mental illness prevalence for a selected year, alongside line charts tracking these metrics over time for chosen countries and conditions. The visualization uses React with D3 v5, employing `scaleBand` and `scaleLinear` for the bar chart, `scaleTime` for temporal axes, and custom drop-down menus for filtering. Data comes from an external CSV file, rendered as SVG with interactive color legends and hover effects.

FFelipe Mejías
74% match
Loading thumbnail…

Regional breakdowns by month (CartoDB + D3)

This visualization displays monthly unemployment data for multiple regions as a grid of small pie charts, with each slice colored by its unemployment value and the region name centered beneath. It uses CartoDB’s SQL API to fetch monthly values from a table named `unemploy_annual`, then renders each region as an SVG donut via D3’s `d3.svg.arc` and `d3.layout.pie`. A linear color scale maps unemployment rates from 0 to 0.25 to a purple-to-red gradient, and a legend shows the scale. Hovering a slice changes its stroke to its fill color, with a tooltip revealing the month and value.

Aandrewxhill
73% match
Loading thumbnail…

Unemployment rate by Country Scatter Plot (UN Stats), using D3.js

This scatter plot displays the unemployment rate for countries in 2019, with each point positioned by unemployment percentage on the x-axis and country name on the y-axis. The visualization uses D3.js to load the CSV data, filter for the relevant year and series, and render the chart as an SVG. It applies `scaleLinear` and `scalePoint` for axes, and `axisBottom` and `axisLeft` to generate tick marks, with filtered data sorted by value before plotting.

AAdamFrankWhite
73% match
Loading thumbnail…

abc

This visualization shows the UK unemployment rate from 1971 to 2025 as a line chart, with a hover tooltip displaying the year and exact rate for each data point. The chart uses D3.js v7's `scaleLinear`, `line`, and `axisBottom`/`axisLeft` to render the line and axes within a React component. The data comes from a CSV file containing annual, quarterly, and monthly unemployment figures, and the visualization filters the data to include only annual entries. The code implements interactive hover detection using transparent circles, making the tooltip and highlight circle appear when the cursor is near a data point.

Wwuc280@haw-hamburg.de
73% match