Skip to main content
SimilarExport ZIP
100%

make bar char

✓ Published0🌍 Public
Sstefichim
Last edited May 19, 2020
Created on May 19, 2020
Forked from make bar char

A bar chart displays the number of unemployed individuals with "liceal" (high school) education in Cluj, Romania, across various months from 2019 to 2020. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles. Data is loaded from a local JSON file, and axis labels are formatted using the `format` function.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

make bar char

This example shows the number of unemployed individuals with high school education (liceal) in Cluj, Romania across various months from 2019 to 2020, using a horizontal bar chart. The visualization loads data from a local JSON file and renders SVG rectangles scaled with d3.scaleLinear and d3.scaleBand, with axes generated via d3.axisLeft and d3.axisBottom. Each bar represents a single month, with its length proportional to the liceal unemployment count. The chart includes axis labels, a title, and gridlines created by tick marks extending across the plot area.

Sstefichim
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays unemployment trends across education levels in Cluj, Romania, from April 2019 to March 2020, showing monthly counts for categories such as gimnazial, liceal, and universitar. The visualization uses d3.scaleBand for the time axis, d3.scaleLinear for the count axis, and d3.line with curveBasis to generate smooth paths. Multiple lines are colored using d3.scaleOrdinal with schemeCategory10, and a custom colorLegend component renders the legend. Data is loaded as JSON via d3.json from a local API endpoint, and the SVG rendering includes gridlines, axis labels, and a title.

Sstefichim
80% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between the percentage of high school graduates and total unemployment across Romanian counties, using data from an API filtered by education. The visualization encodes each county as a red semi-transparent circle, with position determined by linear scales for both axes, and includes labeled axes and a title. Built with D3 v5, the code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to map data values to SVG coordinates, while loading JSON data via `json()`. The plot is rendered as an SVG with custom tick and label styling.

Sstefichim
74% match
Loading thumbnail…

textured pie chart

This example shows a textured pie chart that displays unemployment statistics for Cluj, Romania, across three months of 2020. The code uses D3.js version 4 to compute the pie layout, mapping the “gimnazial” (middle school) education category to the arc sizes. Each slice is filled with a distinct color and outlined in black, while the chart is enriched with five different texture patterns—hexagons, crosses, caps, woven, and waves—generated using the textures.js library (v1.2.0). The textures are applied to the SVG via `textures.paths()` before the pie arcs are drawn with `d3.arc()`.

Aandreiprepelita
71% match
Loading thumbnail…

Bar Chart, Framed

This bar chart visualizes unemployment rates across Spanish regions in 2015, with bars colored in a dark red that deepens on hover to reveal the precise value. Built with D3 v3, the visualization is framed by a clean white background and uses an interactive hover effect—when the pointer passes over a bar, it fills with a rich crimson and the corresponding value label fades in, making it easy to compare regional unemployment data. The chart is part of a larger data exploration tool that includes additional views for scatterplots and line charts, all driven by user-controlled variable selection.

CContrastat
69% match
Loading thumbnail…

making a bar chart

This visualization displays a bar chart of digital skill levels across European Union country groupings for 2015, with each bar representing a different country category and its length corresponding to the percentage of individuals with specific skills. The chart uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG rectangles. Data is loaded from a CSV file with `d3.csv`, and values are parsed as numbers before being mapped to bar widths. The code relies on `d3.select`, `max`, and `scaleBand` to structure the visualization.

Ddistortedlights
69% match
Loading thumbnail…

Exercise Module 3

This example shows the unemployment rate in 2014 for Spanish regions, ordered from highest to lowest, with bar lengths proportional to the rate and tooltips revealing the exact value per region. The chart uses d3.csv to load the data, d3.descending for sorting, and d3.select to append SVG rectangles with title elements for interactivity. The data is sourced from a CSV file containing regional unemployment statistics, and the visualization is rendered as a simple SVG bar chart.

GGloriaYL
69% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the number of employed people across various occupations from 2010 to 2019, using data from the United Nations World Population Prospects. It demonstrates how to customize D3 axes for a horizontal bar layout. The visualization uses d3.csv to load yearly datasets, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom for the axes, rendered as SVG elements. The code also includes a video tutorial in the README.

Ttracy3057
69% match