Two graphs arranged using bootstrap

100%

Two graphs arranged using bootstrap

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Jun 30, 2014

Two line charts display fictional company data—projected profits and production costs—side by side with a text column between them, laid out with Twitter Bootstrap’s grid system. Each chart plots date against a numeric value using D3’s time scale, linear scale, and `d3.svg.line`, with axes created via `d3.svg.axis`. The SVG charts are appended to Bootstrap column divs, and the data comes from two CSV files loaded with `d3.csv`. The example demonstrates how Bootstrap columns arrange multiple D3 visualizations and text in a responsive row.

AI-generated description

This is a follow on from the multiple simple graphs on one page used as an example in the book D3 Tips and Tricks.

It demonstrates the loading of two graphs and a paragraph of text and organising them using twitter bootstrap. In the default display on bl.ocks.org the graphs and text may appear vertically, but if you open in a full window they should look more as anticipated.

It should be taken in context with the text of the book which can be downloaded for free from Leanpub.

mit Licensed

Similar vizzes

Loading thumbnail…

Multiple Simple graphs on one page

Two line charts display daily closing values from two separate CSV files, each plotted on its own SVG canvas stacked vertically. The example demonstrates how to reuse a shared set of D3 3.5.17 API components—including `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line`—to build multiple independent graphs on one page. Data is loaded with `d3.csv`, parsed with `d3.time.format`, and rendered as steel-blue paths with annotated axes. Both charts use identical margins, dimensions, and axis configurations, showing a simple way to generate small multiples.

Dd3noob

74% match

Loading thumbnail…

Bootstrap Chiasm Example

This example demonstrates how to embed multiple interactive visualizations—a bar chart, line chart, scatter plot, and pie chart—into a webpage whose layout is managed by Bootstrap’s grid system. Each chart is wrapped in its own Chiasm component, instantiated from the `barChart.js`, `lineChart.js`, and other visualization modules, and injected into the corresponding DIVs defined in `index.html`. The page uses D3.js for rendering and animation, with Chiasm managing reactive data flow so that updates to shared datasets propagate automatically to all charts. The Bootstrap grid provides a responsive layout: three visualizations sit side-by-side in one row, with a full-width line chart below. The example demonstrates how to integrate multiple Chiasm instances with an external CSS framework, combining the strengths of Bootstrap’s layout with D3’s data-driven rendering.

CCurran Kelleher

73% match

Loading thumbnail…

Line Chart

This example demonstrates two identical line charts generated side by side, each plotting two data series with different value sets. The charts are rendered using the C3.js library, which builds upon D3.js to create the visualizations. The page layout uses a CSS Grid structure to position a header, menu, content area, and footer, with one chart embedded within a quadrant of the content grid and the second placed below the main container. The code initializes each chart by calling `c3.generate()`, binding to distinct HTML elements and supplying the same two-column dataset for both, showing how the same chart configuration can be reused in different page locations.

GGerardoFurtado

71% match

Loading thumbnail…

Bootstrap Chiasm Example

This example demonstrates a responsive dashboard layout that arranges four placeholder visualization containers—a scatter plot, bar chart, pie chart, and line chart—using Bootstrap’s grid system. The code relies on jQuery and Bootstrap’s CSS and JavaScript components to structure the fluid container and column spans, while custom styling via CSS classes gives each container a green rounded background. The containers are static placeholders with centered text labels, showing how Chiasm or other visualization libraries could later populate them. The layout adapts across screen sizes, with the first row splitting three charts into equal columns and the second row spanning the full width for the line chart.

CCurran Kelleher

71% match

Loading thumbnail…

Multiple line graph in v7

This example displays two line graphs on a shared time-based x-axis, comparing the open and close prices from a small CSV dataset over a three-month period. The close price is shown as a steelblue line, while the open price appears in red, with both axes scaled to fit the data. The visualization uses d3.line and d3.scaleTime to map data points, d3.axisBottom and d3.axisLeft to render the axes, and d3.csv to load the data. The SVG output includes two separate path elements styled with CSS classes.

Dd3noob

70% match

Loading thumbnail…

Line Chart

Two small line charts, built with the D3.js library and jQuery, visualize two hard-coded data arrays of nine points each. The charts plot the data on a linear scale, with an orange line connecting circular data points. Interactive mouseover events enlarge the circles, and clicking a point logs its value and index to the browser console. The rendering includes grid lines, axis ticks, and labels, all styled with CSS. The data is hardcoded within the script, not loaded from an external source.

CCaged

69% match

Loading thumbnail…

line chart using d3

This example uses D3.js v7 to create a line chart visualizing restaurant profit trends over recorded years. It loads CSV data from a GitHub gist and maps the year and profit columns to a linear x-axis and y-axis, rendering the line as an SVG path with a steelblue stroke. The chart includes axes labeled "Recorded Year" and "Profit In Million," plus an interactive tooltip that displays the data values on mouse movement. The SVG container is configured with custom margins, and the entire chart is styled with a black background and white text via CSS.

Bbhavana.bayyapu@gmail.com

69% match

Loading thumbnail…

Basic line chart

This line chart shows the relationship between two numerical values and time, plotting two series from a CSV file across the years 2010–2015. It uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for axes, while d3.line constructs the paths. The chart renders in SVG, with each line styled via a separate stroke color. Axis labels are added using d3.axisBottom and d3.axisLeft, and the code includes configurable column names for easy reuse as a template.

EEleonore9

69% match