Alfsig

@Alfsig·5 public vizzes

Loading CSV Data

This example visualizes tuberculosis death counts across multiple countries from 2007 to 2013, using data from the World Health Organization loaded via `d3.csv`. The SVG chart renders one line per country, mapping years on the x-axis and death counts on the y-axis with `d3.time.scale` and `d3.scale.linear`. It parses the WHO CSV directly, extracting numeric values from bracketed ranges, and uses `d3.svg.line` and `d3.svg.axis` to draw paths and axes. Hovering highlights a country’s line via CSS.

Apr 24, 2015

Loading thumbnail…

Loading CSV Data

A scatterplot displays the proportion of primarily English-speaking versus primarily French-speaking people across Canadian electoral districts, with each circle representing a district. The data is loaded from a CSV file using `d3.csv`, then mapped onto linear scales via `d3.scale.linear` with axes rendered by `d3.svg.axis`. The SVG circles are colored orange and include tooltips showing exact percentages. The chart reveals a strong negative correlation between the two language groups, with clusters at either end. Data comes from Statistics Canada via a gist.

Apr 22, 2015

Loading thumbnail…

Loading CSV Data

A horizontal bar chart displays the proportion of English speakers in Canadian electoral districts, sorted in descending order. The visualization loads data from a CSV file hosted on GitHub using `d3.csv`, then maps each district's geo code to the y-axis via `d3.scale.ordinal` with `rangeRoundBands`, and its English-speaking proportion to the x-axis via `d3.scale.linear`. Bars are rendered as SVG `rect` elements with hover titles showing the district code and percentage. Axes are drawn using `d3.svg.axis`.

Apr 21, 2015

Loading thumbnail…

Loading CSV Data

This example ranks Canadian electoral districts by the proportion of English speakers, displaying each district as a labeled horizontal bar whose length encodes the percentage. A sorted bar chart is built in SVG, with district codes and percentages shown as text and tooltips. The visualization loads its data from a CSV file hosted on GitHub using the `d3.csv` function and sorts it with `d3.descending`. The chart uses D3 v3 to append SVG `text` and `rect` elements, with bar fill and dimensions driven by the `TxAnglais` column.

Apr 15, 2015

Loading thumbnail…

Loading CSV Data

This example demonstrates the loading and parsing of a CSV file containing language usage data by geographic area, using D3.js version 3. The page displays basic SVG shapes—a line, circle, and polygon—as static placeholder graphics. The code calls `d3.csv()` to fetch the external data file, then logs the parsed data array to the browser console. The visualization focuses solely on the data-loading process, showing how CSV rows are converted into JavaScript objects with properties for each column, though it does not render the loaded data visually.

Apr 1, 2015