hberrong

@hberrong·9 public vizzes

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with an interactive color legend that filters the map when clicked. Hovering reveals country names and values via tooltips. Built with D3 v5, it uses `d3.geoPath` with the Natural Earth projection and `d3.scaleOrdinal` with the Spectral scheme. The data comes from the World Atlas TopoJSON and TSV files, and the code employs `d3.select`, `d3.event`, and a `zoom` function for panning and zooming.

Mar 5, 2021

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for multiple cities, sourced from Data Canvas - Sense Your City, with each city represented by a colored line over time. The chart uses D3 v5 APIs including `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal` with `schemeCategory10`, `d3.line` with `curveBasis`, `d3.nest`, and `d3.axisLeft`/`d3.axisBottom` to render axes with gridlines. The SVG rendering includes a title, axis labels, and semi-transparent overlapping lines via `mix-blend-mode: multiply`.

Feb 23, 2021

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This visualization shows one week of temperature data in San Francisco using a smooth line chart. The x-axis represents time, while the y-axis displays temperature in degrees Celsius. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the curved path in SVG. Data is loaded via `csv` from the Data Canvas - Sense Your City dataset, with axis grid lines and labels styled through CSS.

Feb 19, 2021

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot shows one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis, using circles to mark each data point. The visualization pulls data from the Data Canvas - Sense Your City project via a CSV file. Built with D3 v5, the code uses `d3.csv`, `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and plot circles within an SVG, applying margins and a title.

Feb 19, 2021

Loading thumbnail…

Cars Scatter Plot

This scatterplot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a car, with its position determined by a linear scale for both axes. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG axes and plot circles. The code manually appends axis labels and a title, removes default axis domains, and formats tick text via CSS.

Feb 19, 2021

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using data from the 2017 United Nations World Population Prospects. The code uses D3 v5 to create an SVG visualization with circles positioned by d3.scaleLinear for population and d3.scalePoint for country names. Axes are customized with d3.axisBottom and d3.axisLeft, including tick formatting that converts values to billions. The chart includes axis labels and a title, with styling applied through external CSS.

Feb 19, 2021

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 United Nations World Population Prospects data. Horizontal bars are drawn with `d3.scaleBand` for country categories and `d3.scaleLinear` for population values, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The visualization uses D3 v6 with SVG rendering, loading CSV data and formatting population numbers with `d3.format` to abbreviate values.

Feb 18, 2021

Loading thumbnail…

Making a Barchart

A yellow circle with black eyes and eyebrows forms a simple animated face. The eyebrows smoothly move up and down using D3 transitions. The face is drawn with SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path for the mouth created with the d3.arc function. The code uses d3.select to target the SVG element and applies transforms to position facial features.

Feb 18, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example displays a simple car report using SVG-ready HTML markup, listing three vehicles with their model years and prices. The page highlights the 2012 Nissan Leaf in red text, while the other entries remain in the default monospace font. The implementation relies on plain HTML list elements (`<ul>` and `<li>`) and CSS styling from an external `styles.css` file. No JavaScript or data visualization libraries are used; instead, the example demonstrates how static CSS classes can add visual emphasis to structured data without any dynamic rendering.

Feb 17, 2021