Skip to main content
Log in
M

mab3105

@mab3105·22 public vizzes

Loading thumbnail…

Untitled

A nested bar chart displays the distribution of three values across two groups and three categories. The visualization uses D3 v3’s ordinal scales (`d3.scale.ordinal`) and linear scale (`d3.scale.linear`) to position bars, with SVG rendering. Data is loaded from CSV (`data.csv`) and structured via `d3.nest` into hierarchical group and category levels. Axes are drawn with `d3.svg.axis`, and nested `<g>` elements group bars by group and category.

Mar 14, 2020
Loading thumbnail…

Untitled

A grouped bar chart shows the correlation between education level and the perceived politeness of police contact, based on survey data from respondents. The chart displays the share of respondents (as a percentage) per education level for each of five Likert-scale responses, from “Helemaal mee oneens” to “Helemaal mee eens.” The code uses D3 v5 with SVG rendering, reading a CSV file, and applies scales such as `d3.scaleBand` and `d3.scaleLinear` for layout. A legend allows clicking on a category to filter the bars via a custom update function.

Mar 9, 2020
Loading thumbnail…

Dashboard of World Population

The dashboard presents the total population of the top ten most populous countries, sourced from World Bank data, using three synchronized views: a bar chart, a scatter plot, and an interactive line chart. The line chart, built with D3's `scaleTime`, `scaleLinear`, and `scaleOrdinal`, allows users to select a specific country to view its population trend over time. The bar and scatter visualizations use `scaleBand`, `scalePoint`, and `scaleLinear` to encode country rankings and population values. All charts are rendered as SVG elements with a consistent color scale from `d3-scale-chromatic`, and the line chart includes animated transitions.

Mar 6, 2020
Loading thumbnail…

Multi Charts - backup>

This visualization presents monthly energy consumption data as multiple small SVG charts, one per site, with each chart combining bar and line representations. The code uses D3 v5 with `d3.nest()` to group the data from MonthData.csv by site, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks. Each chart displays site-specific bars and a colored line path, with hover effects on rectangles and a formatted time axis.

Feb 27, 2020
Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data across four linked panels: a line chart of weekly trends by year, a U.S. choropleth map, a bar chart of top states, and a multi-line chart of those states’ yearly patterns. Built with React and D3 v5, it uses `scaleOrdinal`, `scaleSequential`, `geoAlbersUsa`, and `geoPath` for mapping and rendering. Users can select years, states, and metrics such as ILI percentage, with hover interactions highlighting selections across panels. The data comes from CDC FluView Interactive via a CSV file filtered in JavaScript.

Feb 24, 2020
Loading thumbnail…

my - Testing DONT CHANGE!!!! BAR chart

This bar chart displays monthly energy consumption in kilowatt-hours across multiple sites, with each site distinguished by color. The visualization uses D3 v5 to load and parse the MonthData.csv file, then renders an SVG bar chart using `scaleBand` for the x-axis and `scaleLinear` for the y-axis. Through `d3.nest` and `d3.line`, the chart also overlays line paths showing data trends per site, with color assignments made via `scaleOrdinal` and axis labels rotated using `axisBottom`.

Feb 23, 2020
Loading thumbnail…

my - Testing !!!! BAR chart

This bar chart compares monthly energy consumption in kilowatt-hours across multiple sites, with each site distinguished by color. It uses a CSV data source and renders an SVG with D3 v5 APIs, including `scaleBand`, `scaleLinear`, `axisLeft`, `axisBottom`, and `d3.nest` to organize the data. The chart displays axes with rotated date labels and overlays a line path per site.

Feb 23, 2020
Loading thumbnail…

my DC-Multi BAR chart

This visualization displays monthly energy consumption in kilowatt-hours across multiple building sites, with each site represented by a distinct color. It combines bar charts and line graphs within small multiples, plotting time on the x-axis and energy values on the y-axis. The code uses D3 v5’s `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `nest` functions to process the MonthData.csv file and render SVG elements. Colored bars show individual monthly readings, while overlaid lines and labels track each site’s trend over time.

Feb 22, 2020
Loading thumbnail…

Multi Charts - backup>

This example shows monthly electricity consumption in kilowatt-hours across multiple sites, with each site’s data displayed in its own small bar chart arranged vertically. Hovering over a bar highlights it in orange, and tooltips provide additional detail. The visualization uses D3 v5 to load the CSV, parse dates with `d3.timeParse`, and nest data by site with `d3.nest`. Each sub-chart renders an SVG with a band scale for the x-axis, a linear scale for the y-axis, and rectangles for bars.

Feb 21, 2020
Loading thumbnail…

Untitled

A small-multiple area chart displays monthly energy consumption across different sites, with each panel representing a distinct location. The visualization uses D3.js v4 to load data from a CSV file, parse the time series, and render a separate small SVG chart for each site. The code employs d3.nest() to group data by site, d3.line() for path generation, and d3.scaleOrdinal() for color encoding, with axes rendered per chart.

Feb 20, 2020
Loading thumbnail…

my Filter Chart - Do Not edit

This interactive line chart displays monthly energy consumption (SumOfKwh) for different building sites, loaded from the CSV file `MonthData.csv`. A dropdown menu, populated from the first column, allows the user to select a site, which triggers a smooth 1-second animated transition of the line to show that site's time series. The visualization uses the D3.js v4 library, specifically `d3.csv` for data loading, `d3.scaleBand` and `d3.scaleLinear` for the axes, and `d3.line` to generate the path, with the color assigned via a categorical `d3.schemeSet2` scale.

Feb 19, 2020
Loading thumbnail…

multi Charts - test>

This example displays monthly energy consumption in kilowatt-hours across multiple sites, with each site color-coded and rendered as a separate small bar chart arranged in a grid. The visualization uses D3 v5 to load data from a CSV file, parse dates with `d3.timeParse`, and create individual SVG charts for each site. Hovering over a bar highlights it in orange, and a tooltip provides detailed values. The charts share common axes and scales, computed using `d3.scaleBand` and `d3.scaleLinear`, to facilitate comparison across sites and time periods.

Feb 19, 2020
Loading thumbnail…

Monthly Passenger Count for Year 2019

This grouped bar chart shows monthly air passenger counts for 2019, split by domestic and international flights. The visualization uses d3.nest to aggregate the CSV data by date and geography, then renders two bars per month with d3.scaleBand and d3.scaleLinear. Axes are formatted with d3.axisBottom and d3.axisLeft, while a d3.scaleOrdinal color scale distinguishes the two categories. Data comes from DataSF’s Air Traffic Passenger Statistics dataset.

Feb 19, 2020
Loading thumbnail…

my - Testing BAR chart

This bar chart displays monthly energy consumption in kilowatt-hours across multiple building sites, with each bar representing a site’s total usage for a given month. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to position bars and map values, while `d3.nest()` groups the data by site and date. Data is loaded from a CSV file using `d3.csv`, and the SVG rendering applies a categorical color scale to distinguish sites.

Feb 19, 2020
Loading thumbnail…

my - Testing kWh Month chart

This example visualizes monthly electricity consumption (kWh) across multiple building sites, displayed as a grouped bar chart. Each month shows separate bars for different sites, with the count of kilowatt-hours encoded by bar height. The chart uses d3.csv to load the data, d3.nest for grouping records by date and site, and d3.scaleBand for positioning both the month groups and the site sub-groups. Axes are rendered with d3.axisBottom and d3.axisLeft, and the SVG output is styled with CSS. Data comes from a local CSV file with Site, DateDay, and SumOfKwh columns.

Feb 19, 2020
Loading thumbnail…

Untitled

A dropdown menu controls a single line chart that plots baby name popularity over time, showing the annual count for a selected name. The code reads from a CSV file and uses D3 v4 to render an SVG with axes and a smooth animated transition. The user selects a name from the menu to trigger a `transition` that updates the line path, colored via a sequential scale. The display uses `d3.csv` for data loading and `d3.line` for the path generation, with a simple but effective interactive filter.

Feb 18, 2020
Loading thumbnail…

DONT CHANGE!!!! BAR chart

The visualization displays a series of small multiple bar charts, one for each baby name, showing the count of occurrences per year as revealed in the data.csv file. Each chart plots the data with a linear scale for the year and count axes. The code uses d3.nest to group data by name, d3.scaleLinear and d3.axisBottom/axisLeft for axes, and d3.line to draw a line for each name’s trend, rendered in SVG.

Feb 16, 2020
Loading thumbnail…

Untitled

This interactive dashboard visualizes the distribution of Titanic passengers across age, fare, sex, and survival status using D3.js. Histograms show age and fare distributions, while pie charts display categorical breakdowns. Users can filter the entire dashboard by clicking pie chart segments or selecting passenger classes. The visualization uses D3's data join pattern with `transition.attrTween` for smooth updating animations and SVG rendering.

Feb 15, 2020
Loading thumbnail…

DONT CHANGE!!!! BAR chart

This visualization displays the popularity of eight baby names from 1880 to 1896, with each small multiple chart showing the count for a single name over time. The code uses d3.nest() to group data by name, then creates a separate SVG per group, each with its own linear x- and y-scales. A multi-line graph is rendered using d3.line(), with each name’s line colored via a d3.scaleOrdinal palette. The data comes from a CSV file, and the SVG charts are generated in React using d3.v4.

Feb 14, 2020
Loading thumbnail…

my - Making a bar chart

This bar chart displays population estimates for ten countries, using data loaded from a CSV file. Each bar’s height maps to the population value, with a linear scale for the y-axis and a band scale for the x-axis. The chart is rendered as SVG using D3 v5, with axes generated by `axisLeft` and `axisBottom`. The code scales the raw population numbers by a factor of 1000 during data loading, and bars are styled with a steelblue fill.

Feb 14, 2020
Loading thumbnail…

V5- OK at the mo - bar

A grouped bar chart displays total monthly energy consumption in kilowatt-hours for several building sites, with each bar representing a site's aggregate usage and color highlighting individual sites. The visualization uses D3 v5 with an SVG rendering, a band scale for site positioning, and a linear scale for the y-axis. Data is loaded from a CSV file, parsed with d3.timeParse, and aggregated using d3.nest() to compute site totals. Interactive tooltips appear on mouseover to show the precise consumption value, while bar hover effects change their fill color to orange.

Feb 13, 2020
Loading thumbnail…

Polished Scatter Plot with Menus

A polished scatter plot of the Iris dataset lets users choose which measurement to display on each axis via dropdown menus. The chart uses React for UI state and rendering, with D3 scales (`scaleLinear`) and axis components for SVG visualization. The dropdown menus are implemented with `react-dropdown`, while axis ticks are generated using D3's array methods. Points are rendered as SVG circles with tooltips, and the data is loaded asynchronously via `d3.csv`.

Feb 11, 2020