Skip to main content
SimilarExport ZIP
100%

make bar char

✓ Published1🌍 Public
Sstefichim
Last edited May 18, 2020
Created on May 18, 2020
Forked from lets make a face

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

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
82% 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
75% 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…

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
70% match
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays unemployment rates by educational level, specifically the number of individuals with gimnazial education, across several months in Cluj, Romania, using data from educatie.json. The chart employs D3 v5’s scaleBand, scaleLinear, axisBottom, axisLeft, and line with curveBasis to render an SVG representation. A maroon line path connects the data points, with labels for the time axis and a temperature-like y-axis title, though it visualizes education stats. The code loads data via d3.json and appends axes with tick lines and a title.

Sstefichim
70% match
Loading thumbnail…

Exercise Module 3

A horizontal bar chart displays the 2014 unemployment rate for each Spanish region, sorted from highest to lowest with grey bars sized proportionally to the rate. The visualization highlights that southern regions have higher unemployment while northern ones are lower, with hover tooltips revealing exact percentages. The code uses d3.csv to load region data and d3.selectAll with data joins to append SVG rect elements, scaling bar widths by multiplying the rate by eight.

GGloriaYL
70% 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