Skip to main content
SimilarExport ZIP
100%

Dashboard for ethnographic data

✓ Published0🌍 Public
LLaurens
Last edited Nov 12, 2019
Created on Oct 9, 2019
Forked from HTML Starter

This dashboard demonstrates how a Vue instance and its components dynamically generate a theme list and detail pages from ethnographic data stored in a SPARQL endpoint. It uses the Nationaal Museum van Wereldculturen (NMVW) dataset, fetched via `fetch` with encoded queries, and renders clickable themes and linked resources. Vue’s conditional rendering switches between overview and detail views without routing, while d3.js is not directly employed in the visible code; instead, Vue binds data to HTML elements through templates like `v-for`.

AI-generated description

dynamic-dashboard

An example showing use a framework to dynamically generate components from data.

If you want to see the steps taken to create this demo, go to the Github repo.

Concept

I want to show students how to use a front-end framework to dynamically generate components from a data source. One useful example would be to create visualizations from a data source.

Functionality

  • Data is loaded in a vue method from a SPARQL endpoint
  • The stored data is used to render a list of themes available in the data
  • Each theme links to a detailpage which loads example works of that theme
  • The whole thing functions without routing but instead uses conditional content loading.

Tech-stack

  • 'Vue' for components (without build tools)
  • 'd3.js' to bind data to html elements
MIT Licensed

Similar vizzes

Loading thumbnail…

dashboard

This dashboard presents a multi-panel data visualization built with Vue, using D3.js v5 to render SVG graphics with animation. It includes a bar plot displaying sales by category with hover tooltips, a scatterplot of randomly generated points, and additional plot areas within a grid layout. The bar chart reads from a CSV dataset of retail orders, applying D3 scales, axes, and transitions to update the visualization dynamically, while the scatterplot uses D3's scaleLinear and random data generation.

Llanphuonglenguyen
68% match
Loading thumbnail…

Dashboard_TEST_ok

This dashboard presents four synchronized views of sales data: a bar chart, a U.S. choropleth map, a scatter plot, and a pie chart. It uses several D3.js v6 APIs, including `scaleBand`, `scaleLinear`, `geoAlbersUsa`, `geoPath`, `pie`, and `arc`. The map colors states based on total sales from the provided dataset, while the pie chart breaks down sales by sub-category. All visualizations support interactive tooltips and updates with animation.

BBomkerss
66% match
Loading thumbnail…

Transforming data using d3

This example demonstrates how to clean, group, and enrich SPARQL query results about ethnographic artefacts. It loads data from a Dutch heritage endpoint using `d3.json`, maps each row to extract plain values with `cleanData`, then applies `d3.nest()` to group artefacts by their parent country. For each country group, it calculates the total count of artefacts as a new `amount` property. The code uses d3 v5 APIs such as `d3.nest()` and `d3.json`, and logs the raw, cleaned, and transformed data to the console for inspection.

LLaurens
65% match
Loading thumbnail…

Dashboard ES6

A dashboard with KPI cards and an animated multi-line chart, rendered in SVG with D3 v5. Users filter KPIs and select projects from dropdowns, triggering updates to the card displays and the line series (planned, earned, and actual values). The chart uses D3 scales, axes, and transitions, with a legend, and Bootstrap styles the interface, while Font Awesome provides icons.

Mmaxime-plantard
65% match
Loading thumbnail…

dboard

This dashboard displays a sales dataset across four synchronized visualizations: a scatter plot of sales over time, a bar chart of sales by sub-category, a geographic map of US sales, and a pie chart of sub-category proportions. Built with Vue, it uses D3 v6 APIs like `d3.scaleBand`, `d3.pie`, `d3.geoAlbersUsa`, and `d3.geoPath`, with data loaded via `d3.csv` from a local CSV file. Animations use `transition` calls, and all charts render as SVG.

JJuliette
65% match
Loading thumbnail…

Nu het inladen van de nieuwe data

This visualization displays a world map with small circles indicating the geographic locations of museum objects, with each point colored according to its associated object function or type. The data is retrieved via a SPARQL query from the Network Digital Heritage (Netwerk Digitaal Erfgoed) API. Using D3 v5, the code employs `d3.geoOrthographic` and `d3.geoPath` to render the globe, together with `d3.zoom` for interactive panning and zooming. A `d3.scaleOrdinal` color scheme maps object categories to a legend.

BBryan Ray
65% match
Loading thumbnail…

D3 + Vue.js

This interactive cluster dendrogram visualizes hierarchical data from a CSV file using D3 v4 (via `d3.stratify`) and Vue.js 2.2.4, rendering nodes and links as SVG elements. Vue’s template syntax replaces D3’s `enter`/`exit`/`update` pattern, with computed properties managing the tree layout and transitions. The interface includes controls for chart width, stroke color, and text search, plus a button to add nodes.

663anp3ca
64% match
Loading thumbnail…

Untitled

This example demonstrates a data visualization built with D3, showcasing modular ES6 imports and dynamic rendering directly in the browser. It loads D3 v3 from UNPKG and uses `d3.csv` to parse an external dataset, then renders the results using `d3.select` and `d3.scaleLinear` for mapping data values to visual properties. The visualization updates interactively, with transitions applied via `d3.transition` to smoothly animate changes in the data-driven elements, illustrating a complete workflow from data ingestion to interactive display.

MMonaYuan
63% match