Bendrog

@Bendrog·7 public vizzes

Temperature in San Francisco Line Chart

This visualization displays a year of temperature and humidity data for San Francisco using two side-by-side line charts. The left chart plots temperature over time, while the right chart plots humidity, both using a shared time axis. The code uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`. Data comes from the 2015 Sense Your City project, and both charts share the same timestamp domain.

Feb 12, 2020

Loading thumbnail…

Temperature in San Francisco scatter plot

This scatter plot displays a year of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Each circle represents a single measurement, colored tomato with partial opacity to reveal overlapping points. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` to generate tick marks. Data comes from the 2015 Sense Your City project and is loaded via `d3.csv`, with timestamps parsed as JavaScript Date objects.

Feb 11, 2020

Loading thumbnail…

Car Scatter Plot

This scatter plot visualizes the relationship between fuel efficiency (MPG) and acceleration for a dataset of cars, with each vehicle represented as a translucent tomato-colored circle. The visualization uses D3 v5 to load CSV data, apply linear scales, and render an SVG with axes and labels. Axis tick marks extend across the plot area, and custom CSS styles the circles, text, and tick marks. The chart title and axis labels clarify the variables, while the data is fetched from a remote CSV file hosted on VizHub.

Feb 11, 2020

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the ten largest countries, with circles positioned along a point scale for country names and a linear scale for population values. The visualization loads CSV data via `d3.csv`, converts population strings to numbers, and renders SVG circles with `d3.axisBottom` and `d3.axisLeft` for labeled axes. Axis ticks are formatted using `d3.format` to abbreviate large numbers into billions. The chart includes a title and uses CSS for circle styling and typography.

Feb 11, 2020

Loading thumbnail…

Customizing Axes (Bar Chart)

This bar chart displays the population of the top 10 most populous countries, sorted by country name on the y-axis and population on the x-axis. The example uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisBottom along with d3.axisLeft for the axes. It customizes the axes by removing the domain lines, adding tick marks that span the chart height, and appending a text label for the x-axis, with tick formatting that converts billions to "B".

Feb 11, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example shows a horizontal bar chart of population data for the ten most populous countries, using a linear scale for population and a band scale for country names. The chart is rendered as SVG with axes and steel-blue rectangles. The code loads a CSV file with `d3.csv`, parses the population values by converting them to numbers and multiplying by 1000, and then renders the visualization using `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft`/`d3.axisBottom`. The data source is an external CSV file listing countries and their populations.

Feb 11, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face built with SVG uses D3.js v5’s selection methods to append a circle for the head, two circles for eyes, and rectangles for eyebrows, with an arc-generated path forming the mouth. The code demonstrates chained transitions via `transition.attr` to animate the eyebrow group’s vertical position over two 2-second phases, creating a raising and lowering effect. The face is centered using a group transform, with all shapes positioned relative to that origin.

Feb 10, 2020