jenniferslagt

@jenniferslagt·10 public vizzes

Untitled

This grouped bar chart compares survey responses about police politeness across six education levels, from “no education” to university. Each education level is broken into five agreement categories, ranging from “completely disagree” to “completely agree.” The chart uses d3.scaleBand for the grouped bars and d3.scaleOrdinal for color encoding, rendering in SVG within a React framework. Data comes from a CSV file, with percentages displayed on the y-axis.

Jan 24, 2020

Loading thumbnail…

Untitled

A grouped bar chart compares survey responses about police politeness across six education levels in the Netherlands. Each group represents a response option, from "Helemaal mee oneens" to "Helemaal mee-eens," with bars colored by education level. The chart uses D3.js v5 with React, rendering as animated SVG. It employs `d3.scaleBand` for group and bar positioning, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for categorical colors, with data loaded from a CSV file. Clicking legend items filters the displayed bars.

Jan 22, 2020

Loading thumbnail…

Untitled

This interactive grouped bar chart visualizes the correlation between respondents' education level and their experiences with police contact, using data from a survey with responses ranging from "Helemaal mee oneens" to "Helemaal mee-eens". The chart displays education levels on the x-axis and the percentage of respondents on the y-axis for each response category, with a legend that allows users to click on education levels to filter which bars are displayed. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the grouped and inner bar positioning, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` to assign colors to each education category, rendered as SVG with a black background.

Jan 22, 2020

Loading thumbnail…

Hello VizHub

This example demonstrates data cleaning of a CSV file containing survey responses about favorite days of the week. The code uses D3.js version 5’s `d3.csv` to fetch the external dataset from a VizHub URL, then applies a series of `Array.filter` calls to remove invalid entries such as empty strings, dates, and non-day answers. After cleaning, `Array.map` standardizes the responses by capitalizing the first letter of each day name. The processed data is logged to the browser console for inspection.

Nov 28, 2019

Loading thumbnail…

Pie Charts

This example demonstrates a pie chart and donut chart visualizing fruit quantities from a CSV dataset. Two animated SVG charts display proportional slices with labels, using a blue color scale to differentiate each fruit type. The visualization is built with D3 v4, utilizing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the charts, while `transition.attrTween` animates the slices expanding from zero on load.

Nov 15, 2019

Loading thumbnail…

Pie chart - aantal wapens per wapentype

A pie chart displays the top 10 weapon types from the Netherlands Museum of Ethnography collection, with counts per category such as arrows, spears, and swords. The visualization uses D3 v4 (d3.pie and d3.arc) to generate SVG paths from a SPARQL query against the Network of Digital Heritage API, fetching data as JSON. A d3.scaleOrdinal with the schemeSet2 color palette encodes each slice. The chart includes a title and manually positioned text labels for a rudimentary legend, while the annotation text is hardcoded and does not reflect actual data values.

Nov 15, 2019

Loading thumbnail…

Hello VizHub

This example displays a static pie chart visualizing the distribution of weapon types, with each slice labeled, rendered as an SVG. The chart is built using D3.js v4, employing `d3.pie()` and `d3.arc()` to compute slice geometry, and `d3.scaleOrdinal` with the `d3.schemeSet2` color palette. Data is loaded from a CSV file hosted on VizHub, though it uses dummy data for the displayed chart. The visualization is set against a dark background with large, centered typography.

Nov 14, 2019

Loading thumbnail…

Tutorial Sunburst Datavisualisation

This tutorial demonstrates a sunburst chart built with D3.js (v4), visualizing hierarchical data where each node is represented as a ring segment. The visualization uses the `d3.partition()` layout and `d3.arc()` to compute angular and radial positions for each slice, with colors assigned via `d3.scaleOrdinal` and a Category20b color scheme. Node data, including topics and sub-topics, is hardcoded in the script, and rendered as SVG paths within a group element. The example also includes a CSV file with weapon-type counts, though the chart currently displays the static nodeData structure rather than loading that external data.

Nov 14, 2019

Loading thumbnail…

Hello VizHub

This example displays the text “Hello VizHub!” centered on a dark blue background using the Ubuntu font. The page structure is defined in HTML with a single div element, while the styling is applied through CSS, setting the color, size, and font family. The message itself is exported as a string from an ES6 module named `myMessage.js`, and the code imports the D3 library version 5.9.1 via a script tag. The visualization demonstrates a simple, static text rendering without any dynamic data or interactions.

Nov 11, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal "Hello VizHub" message displayed in the center of the page. It loads a CSV dataset from the VizHub server using `d3.csv` and logs the parsed data to the console, though the visualization itself shows only static text. The page is styled with CSS, setting a dark background, light text, and large Ubuntu font. The code uses D3.js v5 and ES6 modules to set the message text in the `#message` div.

Nov 7, 2019