Skip to main content
100%

Resolving multiple objects to one detail view

✓ Published0🌍 Public
Aamccartney
Last edited Mar 22, 2016
Created on Mar 22, 2016

The example resolves multiple related JSON objects into a single school detail view, aggregating expense records by school ID. It uses D3.js to group and sum expense amounts, then displays the school name, ID, total expenses, and ranked expense categories in a styled HTML dashboard. The data comes from a static sample array of Django objects, and the front-end renders the summary via D3 selections and text nodes. No interactive simulation or canvas rendering is used; the visualization relies solely on D3’s data-binding and DOM manipulation.

AI-generated description

Similar vizzes

Loading thumbnail…

pivot D3.js

This example demonstrates a pivot table visualization built with D3.js v6, displaying aggregated expense data grouped by head group and expense type. The table organizes rows hierarchically, with parent rows for each head group and nested sub-rows for expense types, alongside a calculated total column derived from summing the 'Amount' field. The code employs D3's `d3.group()` and `d3.sum()` APIs for data grouping and aggregation, then constructs an HTML table structure dynamically using `select`, `append`, and `enter()` to render rows and cells. The source data is a static array of expense records, and the rendering approach uses standard D3 DOM manipulation to create the tabular layout.

Vvelitetik@gmail.com
62% match
Loading thumbnail…

assignment 6

This dashboard presents four coordinated D3.js charts—a bar chart, scatter plot, multi-series line chart, and combined bar-line chart—to explore a synthetic 200-row retail dataset containing revenue, cost, profit, and units sold by category and month. The SVG-based visualizations, styled with CSS and built using D3 v7 APIs like `d3.rollup` and `d3.scaleBand`, show aggregate revenue by category, record-level units versus profit, monthly trends for three quantitative variables, and a dual-axis comparison of revenue (bars) with profit (line), complete with interactive tooltips.

Sshyamraghav12@gmail.com
62% match
Loading thumbnail…

Untitled

This example presents a dual-view visualization combining an interactive tree diagram and a bar chart. The tree diagram shows a hierarchical dataset with branches for school type, gender, and higher education status, rendered using D3.js SVG primitives. The bar chart displays categorical values from a separate dataset, with animated transitions that redraw the bars and Y-axis when the data updates. Both views rely on D3 v6 APIs such as `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, and the `.join` method for efficient element updates.

ZZach
61% match
Loading thumbnail…

Multiple bar chart Data Viz Final

This visualization displays a matrix of six bar charts comparing average salary metrics across different school types, using data loaded from a CSV file of college earnings. Each chart represents a different salary variable, such as Starting Median Salary or Mid-Career 90th Percentile Salary, with bars colored steelblue that turn orange on hover. The code uses d3.csv for data loading, d3.rollup for aggregating averages by school type, and d3.scaleBand and d3.scaleLinear for axes, rendering SVG charts with interactive tooltips.

SShazil Taqi
61% match
Loading thumbnail…

Pivot Table with D3.js

This example builds a pivot table with D3.js v6, grouping expense records by head group and expense type and summing their amounts. It uses `d3.group()` with `.key()` and `.rollup()` to aggregate the nested data, then renders the result as an HTML table with `thead`, `tbody`, `tr`, and `td` elements. The table shows three columns—Head Group, Expense Type, and Total—with sub-rows for each expense type beneath its group, and a cell for the aggregated sum. The data is hardcoded as an array of objects with fields for group, type, date, and amount.

Hhelbizfy
61% match
Loading thumbnail…

Read in JSON department files

A zoomable sunburst visualization displays student enrollment counts by gender across university departments and courses. Three radio buttons filter the view to specific departments. The visualization loads data from three JSON files using `Promise.all` and `d3.json`, building a hierarchical structure with `d3.hierarchy` and `d3.partition`. The code uses `d3.arc` to render the sunburst segments and includes interactive zooming via click handlers.

Llittlenanopichu
60% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This dashboard for a school's 2025 forecasted performance combines multiple interactive D3.js visualizations into one screen. It shows key statistics, a pie chart of subject performance, a bar chart of average grades by class, and an interactive piano that maps subjects to musical keys with color intensity reflecting grades. A schematic school floor plan positions classes using circle sizes for student population. The code uses D3's `rollup`, `scaleBand`, `scaleLinear`, `scaleOrdinal`, `pie`, `arc`, and TopoJSON for rendering.

NNita
60% match
Loading thumbnail…

Read in JSON department files

This example shows a zoomable, animated sunburst diagram that visualizes male and female student counts across courses and modules within three academic departments. Users can filter the view to a specific department via radio buttons, which transitions the hierarchy in response. Built with D3 v5, the visualization loads three JSON files and uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the radial layout, with color encoding by department and hover tooltips revealing structural details.

SSurajRepo
60% match