Skip to main content
Log in
L

Ljfernando

@Ljfernando·15 public vizzes

Loading thumbnail…

heatmap

This heatmap visualizes the entropy of various chart types across different data variables from automotive data, using a three-color YlGnBu sequential palette to indicate value ranges. The x-axis represents data fields while the y-axis lists chart categories, with a color legend and axes labeled. Built with D3 v3, it uses d3.scale.ordinal with rangeBands for positioning rectangles, d3.scale.linear for color mapping, and d3.svg.axis for tick marks. The nested data structure applies the entropy values to each cell, with hover highlighting for interaction.

Jan 20, 2018
Loading thumbnail…

Pie Chart

This example shows a donut pie chart displaying the distribution of Bitcoin ATMs by continent, with five labeled slices and a color-coded legend. The chart visualizes values for North America, Europe, Asia, South America, and Oceania using a static dataset defined in the HTML. A tooltip appears on hover, showing each slice’s label, count, and percentage. Clicking a legend entry disables the corresponding slice via animated transitions using d3.layout.pie, d3.svg.arc, and transition.attrTween, while SVG renders the chart and legend.

Jan 10, 2018
Loading thumbnail…

D3 Example

This visualization displays small multiples of pie charts showing the religious breakdown of the five most populous countries. Each donut uses color-coded slices for different religions, with all charts scaled equally regardless of population, highlighting proportional composition within each nation. The code uses D3.js with `d3.layout.pie` and `d3.svg.arc` for chart generation, `d3.nest` for data grouping, and the d3-legend library for the color key. Data comes from the Pew Research Center Global Religious Landscape dataset.

Jan 10, 2018
Loading thumbnail…

Pie Chart

A donut chart displays the number of Bitcoin ATMs across five continents, with a legend for toggling categories. Built with D3 v3, it uses `d3.layout.pie` for arc generation and `d3.svg.arc` for the donut shape. Hovering reveals a tooltip with the label, value, and percentage, while clicking a legend item triggers animated transitions via `transition.attrTween` to interpolate arc geometry, disabling or re-enabling slices. The chart is rendered as SVG with custom CSS styling.

Jan 10, 2018
Loading thumbnail…

world map 02 update to d3 v4

This world map example visualizes global population data by country using a choropleth map. The visualization employs a threshhold color scale to categorize population ranges, with tooltips showing specific country names and population values on hover. The code uses d3 v4 APIs including `d3.geoPath` for map rendering, `d3.scaleThreshold` for color encoding, and d3-tip for interactive tooltips. Population data comes from a TSV file, while country boundaries are drawn from a topojson file of world geometries.

May 8, 2017
Loading thumbnail…

Zoom to Bounding Box

This interactive map of the United States uses D3.js (v3) with the Albers USA projection to render state boundaries as SVG paths. Clicking a state triggers a smooth 750-millisecond transition that computes the clicked feature's bounding box and applies a translate and scale transform to zoom into it. The zoom level and translation are calculated using the `d3.geo.path` bounds method, with stroke widths adjusted inversely to the scale. Clicking the active state or the background resets the viewport to its original full-country extent.

Apr 12, 2017
Loading thumbnail…

Multi-Series Line Chart

A multi-series line chart compares the daily average temperatures of New York, San Francisco, and Austin over a year. The visualization loads data from a TSV file using `d3.tsv`, parses dates with `d3.timeParse`, and encodes positions with `d3.scaleTime` and `d3.scaleLinear`. It renders colored lines via `d3.line` and `d3.schemeCategory10`. Interactive mouseover and click events highlight one city’s line while graying out others, using SVG transitions and class toggling for emphasis.

Mar 25, 2017
Loading thumbnail…

Grouped Bar Chart

This grouped bar chart shows the proportion of call types—Alarm, Fire, Non Life-threatening, and Potentially Life-Threatening—across five San Francisco districts. The visualization uses d3.csv to load the data, d3.scaleBand for the x-axis and grouped bars, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color encoding. The SVG rendering includes axes, gridlines, and a legend, with percentages formatted using d3.format.

Mar 15, 2017
Loading thumbnail…

Grouped Bar Chart

A grouped bar chart displays population percentages across four age groups for five San Francisco districts, with each district’s bars colored by age category and a legend identifying them. The visualization loads data from a CSV file using d3.csv, then applies d3.scale.ordinal for x-position and color encoding, d3.scale.linear for the y-axis, and d3.svg.axis to render axes with SI-prefix formatting via d3.format. Bars are drawn as SVG rectangles, with heights computed from the parsed numeric values.

Mar 4, 2017
Loading thumbnail…

HW1 Chart4

A line chart displays the number of police department calls per day in the Southern District for December, with day on the x-axis and call count on the y-axis. The chart includes both horizontal and vertical gridlines and a highlighted title. Built with D3 v4, it loads tab-separated data via `d3.tsv`, maps values through `d3.scaleLinear`, and renders the series as an SVG path using `d3.line`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Feb 12, 2017
Loading thumbnail…

HW1 Chart3

This chart shows the number of SF PD calls per hour in December, with an area plot and a line overlay that both encode the count across a 24-hour period. It uses D3 v4’s `d3.tsv` loader to parse the data file, `d3.area` to create the filled region, and `d3.line` with a linear curve for the stroke. The SVG includes grid lines generated via `d3.axisBottom` and `d3.axisLeft`, with the x-axis labeled “Hour” and the y-axis “Number of Calls,” all rendered in a crisp, block-oriented layout.

Feb 12, 2017
Loading thumbnail…

HW1 Chart3

This chart shows the number of SF PD calls per hour in December, with an area plot and a line overlay that both encode the count across a 24-hour period. It uses D3 v4’s `d3.tsv` loader to parse the data file, `d3.area` to create the filled region, and `d3.line` with a linear curve for the stroke. The SVG includes grid lines generated via `d3.axisBottom` and `d3.axisLeft`, with the x-axis labeled “Hour” and the y-axis “Number of Calls,” all rendered in a crisp, block-oriented layout.

Feb 12, 2017
Loading thumbnail…

HW1 Chart3

This chart displays the number of calls per hour over a 24-hour period, using an area chart to emphasize the volume distribution. The data is loaded from a tab-separated file and mapped to a linear scale for both the x-axis (hour) and y-axis (call count). The visualization uses D3 v4 to render SVG elements, including a filled area path and a line path, with gridlines generated via custom axis functions. The chart is titled “PD Calls Per Hour” with axis labels for hour and number of calls, with the area filled in light steelblue and the line stroke in steelblue.

Feb 12, 2017
Loading thumbnail…

HW1 Chart1

This bar chart shows the number of 911 calls per police district in San Francisco, with districts ordered alphabetically along the x-axis and call counts on the y-axis. Each bar is rendered as an SVG rectangle using D3 v4’s data join, with a steelblue fill that turns brown on hover. The chart includes labeled axes, a title, and a horizontal grid generated via `d3.axisLeft` with custom tick sizing, while the data is loaded from a tab-separated `data.tsv` file using `d3.tsv`.

Feb 12, 2017
Loading thumbnail…

HW1 Chart2

This bar chart displays the number of reported incidents per crime category in descending order, sourced from a tab-separated data file. The horizontal bars use a steelblue fill that turns brown on hover, with a light grey grid highlighting the value scale. It is built with D3.js v4, using `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and SVG rect elements for rendering.

Feb 12, 2017