LTymn

@LTymn·15 public vizzes

Conditional Styling

This example visualizes UK homicide and attempted murder statistics from 2002 to 2011 as two filled area charts. The visualization uses conditional styling to highlight the homicide series in red with higher opacity, while attempted murders appear gray and faint. Built with d3.v3 and SVG, it employs d3.svg.area and d3.time.scale for the x-axis, with data loaded from a CSV file. Hovering over any circle or path changes its fill to orange, and the axis labels are rendered using d3.svg.axis.

May 7, 2015

Loading thumbnail…

Scatterplot

A scatterplot shows the relationship between life expectancy at birth and unemployment rate for countries, with each circle representing a country and a tooltip revealing its name and exact values. The visualization animates circles from off-screen to their x-axis positions sorted by life expectancy, using d3.csv to load data from Countries.csv. It employs d3.svg.axis for labeled axes, d3.scale.linear for coordinate mapping, and transition with delay and duration to produce the staggered animation effect. Circle color changes on hover via CSS.

Apr 17, 2015

Loading thumbnail…

No6

A horizontal bar chart displays life expectancy for each country, sorted in descending order, with bars extending proportionally to the value. The visualization uses a D3.js v3 script to read a CSV file, sort the data numerically, and generate SVG rectangles. Each bar includes a tooltip via a title element that reports the country's name and life expectancy value.

Apr 8, 2015

Loading thumbnail…

No6

A horizontal bar chart visualizes life expectancy for each country, sorted from highest to lowest value. The bars are rendered as SVG rectangles whose widths are proportional to life expectancy, and hovering reveals a tooltip with the country name and its exact figure. Data originates from a CSV file containing demographic indicators, processed and sorted using D3 v3’s `d3.csv` and `d3.descending` functions.

Apr 7, 2015

Loading thumbnail…

No6

A horizontal bar chart displays countries’ life expectancy at birth, sorted in descending order so the longest-living nations appear at the top. Each bar’s width is proportional to the life-expectancy value, and hovering reveals a tooltip with the country name and exact figure via a `title` element. The code loads data from a CSV file, sorts it with `d3.descending`, and renders the SVG rectangles using D3 v3’s data join (`selectAll`, `enter`, `append`). The chart uses a white SVG canvas set against a turquoise page background.

Apr 7, 2015

Loading thumbnail…

No6

A horizontal bar chart displays life expectancy for each country, sorted in descending order, using a turquoise background and white SVG canvas. The bars are drawn as rectangles, with width proportional to the life expectancy value from the CSV data. Built with D3 v3, the code uses `d3.csv` to load `Countries3(OLD).csv` and `d3.descending` to sort rows before appending rects to the SVG via `selectAll` and `enter`. Each bar includes a `title` tooltip showing the country name and its life expectancy.

Apr 7, 2015

Loading thumbnail…

Loading CSV Data with D3

This example loads a CSV dataset of country statistics and renders a bar chart of life expectancy using D3. The bars are sorted in descending order by life expectancy, with each rectangle’s width proportional to the value from the `Lifeexpectancyatbirth` column. The visualization uses `d3.csv` for data parsing, `d3.select` to build the SVG, and `.data()` with `rects` to create the graphical marks. The CSV file includes country names and numerical indicators, and a tooltip on each bar shows the country and its life expectancy.

Apr 7, 2015

Loading thumbnail…

No6

This example shows a horizontal bar chart of countries sorted by life expectancy at birth, with each bar’s length proportional to that value and a tooltip revealing the country name and exact figure. The bars are rendered as SVG rectangles arranged vertically, with the tallest at the top. Built with D3 v3, the code loads data from a CSV file, sorts it using `d3.descending`, and appends `rect` elements with `<title>` nodes for hover text. The chart uses a white SVG on a turquoise background.

Apr 7, 2015

Loading thumbnail…

No6

A bar chart displays life expectancy for each country, sorted from highest to lowest, using horizontal bars whose width encodes the value in years. The visualization renders as SVG rectangles via D3 v3, with the data loaded from a CSV file containing population and health statistics. Hovering over a bar reveals a tooltip with the country name and its exact life expectancy, implemented through D3's `append("title")` method.

Apr 7, 2015

Loading thumbnail…

Loading CSV Data with D3

A visualization displays HIV/AIDS prevalence rates against other country statistics from a G7 CSV dataset, using D3.js v3 to load and parse the comma-separated values. The example renders an SVG path layer to illustrate data patterns, with each country contributing specific metrics like birth rate and life expectancy. The code demonstrates basic D3 CSV loading techniques within an SVG canvas, showing how raw tabular data can be transformed into visual form.

Mar 30, 2015

Loading thumbnail…

Loading CSV Data with D3

This example demonstrates loading an external CSV file using the `d3.csv` function and logging the parsed array of JSON objects to the browser console. The page itself displays only a static yellow circle with the text “Tourism” in an SVG, while the actual data processing happens invisibly. The code reads country statistics from `Countries3.csv` (including fields like population and birth rate), converts each row into an object, and outputs the entire array to the console for verification. The visualization relies on D3 version 3 and SVG markup for its minimal on-screen content.

Mar 30, 2015

Loading thumbnail…

Loading CSV Data with D3

This example demonstrates how to load an external CSV file using D3’s `d3.csv` function, converting the raw table into an array of JavaScript objects. The code logs the parsed data to the browser console for inspection, while the page itself displays a static SVG containing lines, a rectangle, a circle, and text as placeholder content. The visualization relies on D3 v3 and SVG rendering, though no data-driven graphics are generated from the CSV in this particular snippet.

Mar 29, 2015

Loading thumbnail…

Gist d6e714e97e5e937623a7

This visualization plots each country as a point positioned by latitude and longitude, with circle size representing total population and color indicating HIV/AIDS prevalence. The chart uses D3’s `d3.geoPath` and a geographic projection to place points over a world map background. Data is loaded from a CSV containing country statistics, and hover interactions reveal specific country details. The rendering relies on standard SVG elements with scales for sizing and color encoding, following a scatterplot-over-map approach.

Mar 25, 2015

Loading thumbnail…

Gist 53ab412b2be670388711

This example visualizes data from a CSV file containing country statistics, including metrics like population, birth rate, and electricity consumption. It uses D3.js to render a scatter plot, positioning countries based on their birth rate and death rate, with the size of each circle representing population. The axes include a linear scale for birth rate and death rate, and the visualization includes interactive features like hover tooltips and zooming. Data is parsed from the CSV using `d3.csv` and scales are defined with `d3.scaleLinear` and `d3.scaleSqrt`.

Mar 20, 2015

Loading thumbnail…

Countries_1

This visualization uses a force-directed simulation with d3.forceSimulation to position countries as nodes, with size and color encoding variables from the Countries.csv dataset such as population and HIV prevalence. The rendering relies on d3.geoPath to draw country boundaries, while tooltips and hover interactions are driven by d3-selection and d3-transition. Data is loaded via d3.csv and mapped to quantitative scales, with the map projection and zoom behavior handled by d3-zoom and d3-geo.

Mar 19, 2015