Skip to main content
Log in
L

LauraCortes

@LauraCortes·20 public vizzes

Loading thumbnail…

Bubble Chart

This bubble chart visualizes the Flare class hierarchy, encoding each class’s value in the area of a circle. The visualization uses a treemap layout to pack over a hundred bubbles into a compact space, with bubble color mapped to impact. Built with D3 v4, the code leverages `d3.hierarchy`, `d3.pack`, and `d3.scaleOrdinal` to compute and render the circles as SVG elements. Labels are clipped inside each bubble, and full class names appear on hover via the `title` element.

May 25, 2017
Loading thumbnail…

Chord Diagram

A chord diagram visualizes dependencies between classes in a software hierarchy, with arcs representing packages and ribbons showing imports between and within them. The code uses d3.chord to compute the matrix and d3.arc and d3.ribbon for rendering, with color mapping via d3.scaleOrdinal. Data comes from a JSON file listing class names and their imports, rendered as SVG. The diagram reveals circular dependencies, such as between vis.data and vis.events.

May 23, 2017
Loading thumbnail…

Scatterplot Matrix Brushing

This example presents a scatterplot matrix for multidimensional data, where each cell displays a pairwise correlation between traits. Users can see the relationships across all variable combinations at once, with data points colored by category. The visualization is built with D3 v4, using SVG rendering and d3.scaleLinear for axes. It loads JSON data and renders circles for each observation, with axes styled via d3.axisBottom and d3.axisLeft. The matrix layout is generated programmatically, showing all trait pairings in a grid.

May 22, 2017
Loading thumbnail…

Scatterplot

This scatterplot displays the distribution of hours across different processes and roles, with each point colored by its hourly value using a blue-to-red sequential scale. The visualization is rendered in SVG using D3 v4, with `d3.scalePoint` positioning points along categorical axes for processes and roles. A legend generated via `d3.legendColor` communicates the color mapping, while the data loads from a local JSON file containing process, role, and hours attributes.

May 22, 2017
Loading thumbnail…

Bar Chart

This bar chart visualizes the frequency of letters in the English language from TSV data, and also shows a second dataset with process names and their supported counts. It uses conventional margins and D3 v4 features including `d3-dsv` for parsing tab-separated values, `d3-scale` for position encodings, `d3-axis` for axes, and `d3-array` for data processing. The SVG rendering applies `d3.scaleBand` and `d3.scaleLinear` to map categories and values, with bars filled in blue and axes labeled. The chart is generated from a JSON file with name and processesSupported attributes.

May 21, 2017
Loading thumbnail…

Normalized Stacked Bar Chart

This normalized stacked bar chart displays each category’s composition as percentages of a whole, using horizontal segments that always fill the full bar height. The code loads a JSON array of time values, computes the satisfied portion by subtracting left hours from total hours, and sorts categories by total descending. Using d3.stack with the stackOffsetExpand offset, it converts raw counts into proportional shares, then renders SVG rectangles via d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. The legend lines and text are positioned at each segment’s midpoint, while the y-axis labels show percentage ticks.

May 19, 2017
Loading thumbnail…

Sunburst Partition

This sunburst visualization uses a radial partition layout to display hierarchical data from a custom `flare.json` dataset, with the root node at the center and leaves on the circumference. The interface offers two modes—Count and Size—that recompute arc angles based on either a uniform value or the `size` property, animating transitions between them via `transition.attrTween` and a custom `arcTween` interpolation. Built with d3.v3, the code employs `d3.layout.partition`, `d3.svg.arc`, and a `d3.scale.category20c` color scale, with SVG paths styled by parent node names.

May 3, 2017
Loading thumbnail…

Sunburst Partition

A sunburst diagram displays the hierarchical structure of the Flare visualization library as a set of concentric, radial arcs. The center represents the root, with each ring deeper in the hierarchy and each arc’s angle reflecting a node’s value. Interactive radio buttons switch the partition’s metric between node count and node size. Built with D3.js v3, the visualization uses `d3.layout.partition` to compute the layout and `d3.svg.arc` for path geometry. Animated transitions between metrics are achieved with `transition().attrTween()`, which interpolates arc positions in data space. Data comes from the `flare.json` file.

May 3, 2017
Loading thumbnail…

Stacked bar chart

A stacked bar chart displays the time required for five business processes, comparing required working hours against missing hours for each category. The chart uses d3.v4 to bind data from a local JSON file, structuring the dataset through a map function that generates intermediate array objects for rendering. The visualization relies on D3’s data-join and scale APIs to position and size the bars, with each process split into two stacked segments representing the required and missing hour values. The accompanying HTML file sets up a full-viewport body and loads D3 from the official CDN.

Apr 26, 2017
Loading thumbnail…

Stacked bar chart

A stacked bar chart displays the time required for five business processes, comparing required working hours against missing hours for each category. The chart uses d3.v4 to bind data from a local JSON file, structuring the dataset through a map function that generates intermediate array objects for rendering. The visualization relies on D3’s data-join and scale APIs to position and size the bars, with each process split into two stacked segments representing the required and missing hour values. The accompanying HTML file sets up a full-viewport body and loads D3 from the official CDN.

Apr 26, 2017
Loading thumbnail…

Stacked bar chart

A stacked bar chart displays the time required for five business processes, comparing required working hours against missing hours for each category. The chart uses d3.v4 to bind data from a local JSON file, structuring the dataset through a map function that generates intermediate array objects for rendering. The visualization relies on D3’s data-join and scale APIs to position and size the bars, with each process split into two stacked segments representing the required and missing hour values. The accompanying HTML file sets up a full-viewport body and loads D3 from the official CDN.

Apr 26, 2017
Loading thumbnail…

Stacked bar chart

A stacked bar chart displays the time required for five business processes, comparing required working hours against missing hours for each category. The chart uses d3.v4 to bind data from a local JSON file, structuring the dataset through a map function that generates intermediate array objects for rendering. The visualization relies on D3’s data-join and scale APIs to position and size the bars, with each process split into two stacked segments representing the required and missing hour values. The accompanying HTML file sets up a full-viewport body and loads D3 from the official CDN.

Apr 26, 2017
Loading thumbnail…

Stacked bar chart

A stacked bar chart displays the time required for five business processes, comparing required working hours against missing hours for each category. The chart uses d3.v4 to bind data from a local JSON file, structuring the dataset through a map function that generates intermediate array objects for rendering. The visualization relies on D3’s data-join and scale APIs to position and size the bars, with each process split into two stacked segments representing the required and missing hour values. The accompanying HTML file sets up a full-viewport body and loads D3 from the official CDN.

Apr 26, 2017
Loading thumbnail…

TreeMapv2

This example visualizes a hierarchical tree structure of software model elements using a treemap layout. The graph.json data shows nested EClass objects organized by domain, with each node’s size determined by its `degree` value. D3 v3’s `d3.layout.treemap` algorithm partitions the 960×500 SVG canvas, rendering each node as a rectangle with a label, colored via the `category20c` scale. The visualization uses `d3.json` to load the data and SVG `rect` and `text` elements for output.

Feb 28, 2017
Loading thumbnail…

TreeMap

This tree map visualizes a hierarchical model of EClass nodes, representing software architecture domains and their relationships. The layout uses d3.layout.treemap, with node area sized by the degree value and color-coded by domain via d3.scale.category10. The code processes graph.json into a hierarchical structure by iterating links and detecting containment relationships. Rendered as positioned divs, each cell displays the label of its corresponding class, with padding and borders separating nested levels.

Feb 27, 2017
Loading thumbnail…

TreeMap

This example visualizes a hierarchical dataset as a treemap, using rectangles sized by each node’s `degree` value and colored by its `domain` attribute to reveal the relative prominence of categories. Built with D3 v3, the code loads hierarchical JSON data and applies the `d3.layout.treemap` layout with custom padding. Node labels and background colors are assigned via D3 selections, with positions and dimensions computed by the layout and applied through inline styling. The visualization provides a compact overview of the dataset’s nested structure and degree distribution.

Feb 27, 2017
Loading thumbnail…

CS 360 Data Visualization

This example shows an arc diagram of a software system’s service-oriented architecture, with nodes representing methods, parameters, and interfaces, grouped by domain and positioned along a horizontal line. The visualization uses D3.js v3 to render SVG circles for nodes and radial line paths for links, with node colors assigned via a categorical color scale and tooltips displayed on mouseover. The graph data comes from a JSON file containing metadata about the system’s classes and their relationships.

Feb 16, 2017
Loading thumbnail…

Plebiscito

The visualization is a choropleth map of Colombia showing the percentage of "No" votes in the 2016 peace agreement plebiscite for each municipality. A drop-down menu allows filtering by conflict-related variables, and a scatterplot overlays the number of terrorist acts per municipality. The map is rendered using D3.js v4’s `d3.geoPath` with a Robinson projection, and the scatterplot uses D3 scales. Data comes from a CSV and a GeoJSON file, with color mapping via `d3.scaleSequential` and `d3.interpolateRdBu`.

Nov 10, 2016
Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between distance from the center of the contiguous United States and the cost of a 20-minute, 10-mile ride for various cities. Each point is colored blue and includes a tooltip showing the city name and exact values on hover. The code loads data from a TSV file using `d3.csv`, scales the x and y axes with `d3.scale.linear`, and computes domains with `d3.extent`. It renders SVG circles, axes via `d3.svg.axis`, and uses `d3.scale.category10` for legend colors.

Nov 1, 2016
Loading thumbnail…

Tarea 3: Visualización calificaciones

A bar chart displays student grades, identified by student code along the x-axis and grade value on the y-axis, with a red line marking the class average. The bars are colored orange and turn darker on hover. Using d3.v3 and the d3-tip library, hovering over a bar reveals the exact grade via a tooltip. The chart is rendered as an SVG, with d3.scale.ordinal and d3.scale.linear handling the axes, and d3.mean calculates the average line shown. Data is embedded directly in the script as a JSON array.

Sep 6, 2016