Skip to main content
Log in
L

LisaPicado

@LisaPicado·15 public vizzes

Loading thumbnail…

fresh block

Three vertical rectangles, colored green, white, and red, render the Italian flag using D3 v4. The example manually positions and sizes each `<rect>` via a `flag_data` array that specifies color, width, height, and x/y coordinates. The code relies on D3’s selection and data-binding methods to translate the static dataset into SVG shapes, with no scales or axes involved.

May 2, 2017
Loading thumbnail…

From your Education to your Job

This example visualizes gene comparison data as a chord diagram, with the left side representing copepod gene names and the right side representing percent similarity values. The chart uses a custom stretched chord layout to pull the two halves apart, enabling clearer comparison of connections. Built with D3.js v3, it renders SVG paths and includes an animated linear gradient that moves across the chords. The data comes from a CSV file of nematode genes with identity percentages.

Apr 27, 2017
Loading thumbnail…

From your Education to your Job

This example visualizes gene comparison data as a chord diagram, with the left side representing copepod gene names and the right side representing percent similarity values. The chart uses a custom stretched chord layout to pull the two halves apart, enabling clearer comparison of connections. Built with D3.js v3, it renders SVG paths and includes an animated linear gradient that moves across the chords. The data comes from a CSV file of nematode genes with identity percentages.

Apr 27, 2017
Loading thumbnail…

Genome Sequence Comparison

A circular genome sequence comparison visualization splits its layout into two halves, contrasting copepod and nematode data with horizontal gradients and animated color flows. The chart uses a custom stretched chord layout derived from D3's `d3.layout.chord`, with `d3.stretched.chord.js` defining the pulled-apart arc paths and `d3.layout.chord.sort.js` handling angular sorting. SVG paths render the chords, while SVG `<animate>` elements drive gradient movement. Hover interactions adjust chord opacity, and the responsive layout adapts to mobile screen widths using jQuery for viewport detection.

Apr 26, 2017
Loading thumbnail…

From your Education to your Job

This visualization uses a stretched chord diagram to show how graduates from various educational tracks transition into occupational sectors one year after graduation. The left side displays education fields, the right side shows job sectors, with ribbon thickness representing student counts. Built with D3.js v3, it employs a custom `d3.layout.chord.sort` layout and custom `stretchedChord` rendering with SVG paths and quadratic Bézier curves. An animated linear gradient flows across the chords to emphasize directional movement from education to occupation, and hover interactions highlight specific connections.

Apr 4, 2017
Loading thumbnail…

ebola cases

The visualization maps reported Ebola cases as animated dots on a world map, using a Leaflet map via Mapbox with D3.js for rendering. Each dot represents a case location from a GeoJSON file, initially expanding from a large radius to a small point over three seconds. The code projects geographic coordinates to screen positions using Leaflet's `latLngToLayerPoint` and re-renders the dots on map pan or zoom events. It combines Mapbox's base map with D3's data binding and transitions.

Mar 21, 2017
Loading thumbnail…

map with checkboxes

A world map displays orange location markers for sites in the United States, Guinea, and the Democratic Republic of the Congo. Three checkboxes above the map trigger JavaScript alerts when clicked, though they do not filter the displayed points. The visualization uses Mapbox.js with the Mapbox light style to render the base map and D3.js version 3.5.5 to draw and animate the SVG circles. Markers initially expand from a radius of 250 down to 6 pixels over three seconds, and the projection recalculates on map pan or zoom events to keep points aligned.

Feb 28, 2017
Loading thumbnail…

map with checkboxes

A world map displays orange location markers for sites in the United States, Guinea, and the Democratic Republic of the Congo. Three checkboxes above the map trigger JavaScript alerts when clicked, though they do not filter the displayed points. The visualization uses Mapbox.js with the Mapbox light style to render the base map and D3.js version 3.5.5 to draw and animate the SVG circles. Markers initially expand from a radius of 250 down to 6 pixels over three seconds, and the projection recalculates on map pan or zoom events to keep points aligned.

Feb 28, 2017
Loading thumbnail…

Simple Mapping- Ebola

This interactive map visualizes the locations of Ebola cases, displayed as animated dots on a Mapbox base layer. The visualization plots individual data points from a GeoJSON file on a world map, with each circle representing a case location. The code uses D3.js to handle data loading and SVG circle creation, while Mapbox.js manages the map rendering and projection. As users pan or zoom, the map triggers a render function that recalculates the pixel coordinates of each dot, ensuring they stay aligned with their geographic positions.

Feb 23, 2017
Loading thumbnail…

Feb 21st- text inside rectangle

This example displays four gene features as colored rectangles along a horizontal axis, with green rectangles for forward-oriented genes and red rectangles for reverse-oriented ones. Each rectangle is labeled with its gene name centered inside using SVG text elements. The visualization uses d3.json to load the data and d3.selectAll to bind it, with each gene’s start and stop positions determining the rectangle’s placement and width. The code relies on SVG rect and text elements, with transforms translating each group to its appropriate y-coordinate based on orientation.

Feb 21, 2017
Loading thumbnail…

simple genome map

This example presents a simple genome map, visualizing four genes as horizontal bars positioned along a linear sequence. Each gene is rendered as a colored rectangle, with green indicating forward orientation and red indicating reverse orientation, and is labeled with its name. The code loads data from a JSON file using `d3.json` and creates SVG groups for each gene. Using `transition()`, the bars animate from a starting offset to their final positions, with delays tied to each gene's start coordinate, illustrating the relative locations of genetic features.

Feb 21, 2017
Loading thumbnail…

HW Assign.

This visualization displays four genes as horizontal rectangles positioned along a genomic axis, with start and stop coordinates from a JSON dataset. Forward-oriented genes appear in green on one row, while reverse-oriented genes appear in red on a parallel row. The code loads data via d3.json, then creates SVG rectangles using d3.selectAll and .data().enter().append, with x and width attributes derived directly from each gene’s start and stop values, and fill color determined by orientation.

Feb 20, 2017
Loading thumbnail…

fresh block

This visualization displays a set of genomic intervals as green rectangles along a linear x-axis, with each rectangle’s width corresponding to the difference between its start and stop coordinates from a small JSON data file. The rectangles are all positioned at the same y-coordinate and height, indicating that only horizontal position and length carry meaning. The code loads data via `d3.json`, appends a 960×500 SVG canvas, and uses `d3.select("svg").selectAll("rect")` to bind the dataset to rectangle elements, setting their x, width, and fill properties based on the data fields.

Feb 16, 2017
Loading thumbnail…

fresh block

A blank SVG canvas displays the text “Edit the code below to change me!” in large monospace type. The example uses D3 v4 to append a text element to an SVG, setting its position with x and y attributes and styling the font-size and font-family via D3’s style method. The code is minimal, serving as a starting point for customization, with the SVG dimensions fixed at 960 by 500 pixels.

Feb 16, 2017
Loading thumbnail…

fresh block

This visualization displays five data points as circles positioned along a chart area. The circles are colored either purple or green depending on whether their value exceeds 100, with each point’s x and y coordinates equal to its data value. Built using d3.v4, the code appends an SVG canvas to the page and populates it with circles via the `.data().enter().append()` pattern. The fill color is determined by a conditional function, and the circle radius and positions are set using SVG attributes. The data is a hardcoded array in the script.

Jan 31, 2017